Hướng dẫn bootstrap how it works - bootstrap nó hoạt động như thế nào

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. 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. 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.  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
https://getbootstrap.com/: Website chính của bootstrap

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
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 webhttps://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
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

d. Trang dạy bootstrap w3schoolshttps://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
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

e. Trang chứa nhiều mẫu code và hiệu ứng bổ sung https://startbootstrap.com/snippets/
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

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.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.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ế.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)Documentation => Getting started  rồi copy code trong phần Starter template (hình dưới)

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.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.

 
  
    
    
    
    
    
    
  
  
    
Hello, world!

    
    
    
    
    
  

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: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:

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:mau3.html và code thế này:

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

– 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 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.js của bootstrap.

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

5. Template bootstrap free và premium

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:mau3.html thành bt-01.html và code trong body:

      
Văn hóa Việt
      
Cung oán ngâm khúc

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

– Và kết quả:

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