Cơ bản về Bootstrap

Cơ bản về bootstrap là bài viết giới thiệu sơ lược với bạn về thư viện boostrap, cách nhúng vào trang, cấu trúc file, làm quen css trong đó…

A. Giới thiệu về bootstrap

  • Bootstrap là framework cho phép bạn thiết kế một trang web responsive rất nhanh và dễ dàng.
  • Bootstrap xây dựng một nền tảng gồm HTML, CSS và Javascript để tạo nên những mẫu giao diện thiết kế có sẵn, giúp bạn bớt nhiều thời gian thực hiện website.
  • Bootstrap được Mark Otto và Jacob Thornton cùng nhau phát triển tại Twitter năm 2010
  • Bootstrap chạy ở client (trong trình duyệt web) , không chạy trên server.
  • Bootstrap js chạy trên nền jquery, do đó bạn phải nhớ chèn jquery vào trang khi sử dụng bootstrap.

=> Bootstrap giúp công việc làm web của bạn được nhanh, tiện lợi và đồng bộ.

B. Sử dụng bootstrap bạn sẽ được gì?

  • Tiết kiệm nhiều thời gian viết code html vì nó cung cấp sẵn code mẫu để chèn vào trang web.
  • Tiết kiệm nhiều thời gian định dạng css vì nó tạo ra rất nhiều class css đã được định dạng sẵn.
  • Tiết kiệm nhiều thời gian viết code javascript vì nó trang bị sẵn nhiều hiệu ứng javascript, giúp bạn khỏi viết code javascript.
  • Bootstrap tổ chức màn hình thành hệ thống lưới (Grid System) 12 cột, giúp bạn dễ tổ chức giao diện trang web theo ý mình.
  • Bootstrap cung cấp sẵn responsive phù hợp với mọi loại thiết bị như smartphone, tablet, desktop, …

C. Các version hiện tại của Bootstrap

Hai version hiện tại đang phổ biến của thư viện Bootstrap là Bootstrap3 và Bootstrap 4.

Ver-sion Năm Mô tả
1.0 2011 Phiên bản đầu tiên, chưa hỗ trợ Mobile.
2.0 2012 Bổ sung Grid-Layout 12 cột. Thêm một số component mới. Chưa hỗ trợ Mobile.
3.0 2013 Các thành phần được thiết kế lại theo phong cách thiết kế phẳng (flat design). Bắt đầu hỗ trợ Mobile.
4.0 2018 Bootstrap 4 gần như viết lại hoàn toàn từ Bootstrap 3, và được đánh giá là dễ sử dụng hơn rất nhiều so với phiên bản trước.

Bootstrap 3 đã rất hay, thuyết phục được rất nhiều nhà phát triển.  Nhưng bootstrap 4 còn tốt hơn, tối ưu về tốc độ load, cải thiện tổ chức layout… code cũng khác khá nhiều so với bootstrap 3.

Hiện tại nhiều website, nhiều tài nguyên trên mạng vẫn dùng nhiều Bootstrap 3. Nhưng theo thời gian thì Bootstrap 4 sẽ thay thế hết.

D. Website tài nguyên bootstrap

Sau đây là các website để tải và lấy mẫu code bootstrap

a. Website chính thức của bootstrap
https://getbootstrap.com/: Website chính của bootstrap

getbootstrap

b. Tài liệu hướng dẫn dùng bootstrap
https://getbootstrap.com/docs/: Trang này chứa tài liệu hướng dẫn chính thức. Cách nhúng thư viện bootstrap (css và js), starter template

c. Hướng dẫn tạo các component trên trang web
https://getbootstrap.com/components/: Hướng dẫn sử dụng các element giao diện trong trang như alert, badge, button… đầy đủ thông tin như giải thích, code mẫu, demo

bt4 components

d. Trang dạy bootstrap w3schools
https://www.w3schools.com/bootstrap4/ : Trang hướng dẫn bootstrap của W3schools. Hướng dẫn các thành phần, code mẫu

bt4 w3schools

e. Trang chứa nhiều mẫu code và hiệu ứng bổ sung
https://startbootstrap.com/snippets/

E. Cấu trúc file trong Bootstrap

Thư viện bootstrap khi down về và giải nén, bạn sẽ thấy cấu trúc các file như sau:

Bootstrap 3

file-structure-bootstrap3

Bootstrap 4

Các file và source code của bootstrap 3 và bootstrap 4 khi down về và giải nén như hình trên. Trong đó:

  • Folder css chứa các file định dạng css, có rất nhiều class khai báo sẵn. File quan trọng nhất là bootstrap.min.css. Các file khác không cần thiết lắm.
  • Folder js chứa các file javascript, trong có rất nhiều hàm khai báo sẵn. File quan trọng nhất là bootstrap.min.js. Các file khác không cần thiết lắm.
  • Folder font chỉ có trong bootstrap 3, đó là các glyphicons được bootstrap xây dựng. Qua bootstrap 4, các icon này không còn nữa, bạn sẽ font dùng font awesome hay các font icon khác thay thế.

F. Template bootstrap

Bạn có thể tạo các trang html của mình với sự hỗ trợ của bootstrap bằng cách nhúng thư viện vào và sử dụng các css và js trong nó.

Việc nhúng bootstrap rất đơn giản: chỉ việc nhúng 2 file css và js của nó vào. Nhúng link file trực tiếp trên mạng hoặc down về website để nhúng vào.

Bootstrap gồm 2 phần chính css và js. Muốn dùng bootstrap trong trang của mình thì bạn sẽ nhúng 2 file css và js của nó vào nhé. Lấy code mẫu và nhúng vào trang như sau:

0. Lấy template mẫu từ website bootstrap

Vào https://getbootstrap.com/ => nhắp Documentation => Getting started  rồi copy code trong phần Starter template (hình dưới)

starer template

1. Nhúng trực tiếp bootstrap từ nhà cung cấp (mẫu 1)

Tạo trang mau1.html và paste code mẫu đã copy từ website bootstrap (xem hình trên). Vậy là bạn đã có 1 trang web được nhúng sẵn code bootstrap từ website gốc.

<!doctype html> <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script>
  </body>
</html>

2.Nhúng trực tiếp bootstrap từ nhà cung cấp (mẫu 2)

Trong mau1.html, bạn có thể bỏ qua các giá trị integrity, để trang web sẽ gọn hơn, code sẽ thế này:

<!doctype html> <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel ="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Hello, world! </title>
  </head>
  <body>
    

    <!-- Optional JavaScript:  jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" > </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script>
  </body>
</html>

3. Nhúng trực tiếp bootstrap css từ nhà cung cấp (mẫu 3)

Nếu trang web của bạn mà chỉ dùng css của bootstrap chứ không cần dùng javascript của nó thì bạn chỉ việc nhúng file css của bootstrap mà thôi.

Tạo file mau3.html và code thế này:

<!doctype html> <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    
  </body>
</html>

4. Tải Bootstrap và Jquery về website và nhúng vào trang (mẫu 4)

a. Download bootstrap:

– Vào website:  https://getbootstrap.com/ =>  Download

bt4 download

– Giải nén file vừa download rồi chép 2 folder con (js , css) vào website của bạn để dùng

b. Tải Jquery

– Tải https://code.jquery.com/jquery-3.3.1.min.js lưu vào folder js của bootstrap

– Tải https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js   lưu vào folder js của bootstrap.

bt4 prepare

c. Tạo trang mau4.html trong website và code

<!doctype html> <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Tiêu đề trang web</title>
  </head>
  <body>
     
  </body>
</html>
<script src="js/jquery-3.3.1.min.js"> </script>
<script src="js/popper.min.js" > </script>
<script src="js/bootstrap.min.js"> </script>
bt-codemau

5. Template bootstrap free và premium

Có rất nhiều template html hiện nay sử dụng bootstrap và jquery để phát triển, do đó việc biết dùng bootstrap là 1 lợi thế khi bạn custom các trang web dùng bootstrap do người khác làm hoặc từ các nguồn free / mua trên mạng.

Free template: https://startbootstrap.com/templates/

Premium template:  https://themeforest.net/category/site-templates?term=bootstrap  => Rất nhiều template dùng bootstrap

G. Bootstrap với CSS và Javacript

Bootstrap cung cấp rất nhiều class CSS định dạng sẵn và hiệu ứng javascript cài đặt sẵn để bạn dùng, bạn chỉ việc sử dụng nó để tạo giao diện mong muốn. 

Bootstrap cung cấp rất nhiều class CSS định dạng sẵn để bạn dùng, bạn chỉ việc biết tên và áp dụng nó vào các tag để tạo giao diện mong muốn. 

1. Sử dụng class css bootstrap trong trang

– Copy file mau3.html thành bt-01.html và code trong body:

<div class="container">
      <header>Văn hóa Việt</header>
      <p class="bg-info text-white p-2 text-uppercase">Cung oán ngâm khúc</p>
</div>

Trong ví dụ này, chúng ta dùng các class css của bootstrap cung cấp:

  • container: định dạng khung chứa toàn trang
  • bg-info: class quy định màu nền xanh
  • text-white: màu chữ trắng
  • text-uppercase: đổi thành chữ hoa
  • p-2: quy định padding mức 2

– Và kết quả:

bt4 làm quen class css

2. Tra cứu các class css bootstrap

Đầy đủ các class css của bootstrap 4: w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp

Đầy đủ các class css của bootstrap 3: w3schools.com/bootstrap/bootstrap_ref_all_classes.asp