Bootstrap

Bootstrap
Bootstrap

Bootstrap là một bộ công cụ mã nguồn mở để phát triển giao diện web một cách nhanh chóng. Nó bao gồm các đoạn HTML, các lớp CSS và hàm tiện ích JavaScript được xây dựng sẵn.

Giới thiệu

Bootstrap là một trong những project có nhiều sao nhất github. Ban đầu, Bootstrap có tên là Twitter Blueprint. Nó được Mark Otto và Jacob Thornton phát triển tại Twitter với mục đích ban đầu là một framework nội bộ cho công ty.

Sau hiều tháng phát triển, Twitter Blueprint nhận được nhiều sự đóng góp của các lập trình viên tại Twitter hơn. Sau đó, họ đổi tên nó thành Bootstrap và biến nó trở thành một dự án mã nguồn mở vào ngày 19/08/2011. Ngày nay, Bootstrap vẫn được duy trì và phát triển bởi Mark Otto, Jacob Thornton và một nhóm nhỏ các core developers.

Là một framework hỗ trợ phát triển giao diện web. Bootstrap cung cấp rất nhiều các thành phần tiện ích. Do đó, khi sử dụng Bootstrap một cách hợp lý. Chúng ta sẽ tiết kiệm được rất nhiều thời gian, công sức.

Một thành phần Bootstrap sẽ bao gồm một cấu trúc HTML cụ thể, các class CSS và một số trường hợp kèm theo mã JavaScript.

Bootstrap 2 and 3

Vào ngày 31/1/2012 phiên bản thứ 2 của Bootstrap được phát hành. Phiên bản này có một số bổ sung, thay thế và nâng cấp các thành phần của phiên bản đầu tiên. Đặc biệt vào giai đoạn này, tính năng Media queries gần như đã hoàn thiện. Do đó, Bootstrap 2 là phiên bản đầu tiên hỗ trợ Web Responsive.

Phiên bản kế tiếp Boootstrap 3 được phát hành vào ngày 19/08/2013. Nó thiết kế lại các thành phần theo Flat Design và áp dụng cách tiếp cận ‘Mobile First‘.

Bootstrap 4

Phiên bản thứ 4 được giới thiệu vào ngày 29/09/2014. Có quá nhiều thay đổi trong phiên bản này. Do đó tới tận 4 năm sau, vào ngày 18/01/2018 phiên bản Bootstrap 4 mới thực sự hoàn thành. Những thay đổi chính trong phiên bản này bào gồm:

  • Đổi CSS preprocessor từ LESS sang SASS
  • Thêm module Roboot
  • Ngưng hỗ trợ IE8, IE9 và iOS6
  • Hỗ trợ CSS Flexible Box
  • Thêm các options hỗ trợ tùy biến navigation
  • Thêm các classes tiện ích hỗ trợ spacing và sizing
  • Đổi đơn vị đo từ pixel qua rem
  • Tăng kích thước font-size mặc định từ 14px lên 16px
  • Bỏ các components: panels, thumbnail, pager và well
  • Ngưng hỗ trợ Glyphicons
  • Hoàn thiện hơn form styling,  buttons, drop-down menus, media objects và image classes
  • Và thêm vào rất rất nhiều các classes tiện ích khác

Bootstrap 5

Phiên bản thứ 5 đang trong quá trình phát triển, cộng đồng rất hy vọng nó sẽ xuất hiện sớm trong năm 2020. Một số tính năng được kỳ vọng ở phiên bản này như:

  • Loại bỏ sự phụ thuộc vào jQuery
  • Phát triển thêm một số tính năng cho hệ thống lưới
  • Ngưng hỗ trợ IE10 và IE11
  • Hỗ trợ thêm các SVG icons

Bắt đầu với Bootstrap

Để làm việc được với Bootstrap, chúng ta cần nhúng các thành phần của nó vào tài liệu HTML của chúng ta.

Các thành phần của Bootstrap

Để mọi thứ hoạt động trơn tru, chúng ta hãy tìm hiểu qua các thành phần của Bootstrap trước. Để sử dụng Bootstrap, chúng ta sẽ cần nhúng 3 file JavaScript và 1 file CSS vào tài liệu HTML. Chúng gồm:

  • bootstrap.min.css: là file chứa toàn bộ các rules CSS của Bootstrap. Được nén lại nhằm giảm dung lượng.
  • jquery-X.X.X.min.js: là file chứa thư viện jQuery. Đa phần các phương thức JavaScript của Bootstrap đều sử dụng thư viện này. Vậy nên chúng ta cần nhúng jQuery trước khi nhúng file JavaScript của Bootstrap.
  • popper.min.js: là một thư viện JavaScript. Cũng tương tự jQuery, Bootstrap phụ thuộc vào thư viện này, nên chúng ta cũng cần nhúng nó trước.
  • bootstrap.min.js: là file chứa các phương thức JavaScript của thư viện Bootstrap. Nó cần thêm để một số components mới có thể hoạt động.

Với 4 file này, chúng ta sẽ sử dụng các tags link và script để nhúng chúng vào tài liệu HTML. Tuy nhiên, cũng cần lưu ý một xíu về vị trí và thứ tự sắp xếp của chúng.

Với bootstrap.min.css chúng ta sẽ đặt nó trong phần tử head trước file style.css của chúng ta.

Với 3 file JavaScript còn lại, chúng ta sẽ đặt ở dưới cùng của tài liệu HTML (trước closing tag </body>). Theo thứ tự: jquery-X.X.X.min.js -> popper.min.js -> bootstrap.min.js

Một số phần tử quan trọng

Để Bootstrap hoạt động chính xác 100%, chúng ta cần lưu ý thêm một số phần tử quan trọng.

Đầu tiên là khai báo doctype, Bootstrap có một số thành phần dựa trên HTML5. Do đó, nếu thiếu khai báo doctype, có thể một số lỗi hiển thị sẽ phát sinh.

Kế đến, là responsive meta tag:

Đây là thẻ meta, nó khai báo một số chỉ thị cho trình duyệt web. Với phần tử meta phía trên, chúng ta báo cho trình duyệt biết kích thước của viewport sẽ bằng kích thước màn hình thiết bị, với tỉ lệ scale = 1.0 (các thiết bị di động có thể zoom màn hình được). Đây là yếu tố tiên quyết cho responsive design.

Sau khi chuẩn bị xong, chúng ta sẽ tiến hành nhúng Bootstrap vào tài liệu HTML của mình. Có 2 phương pháp là sử dụng CDN và Download trực tiếp mã nguồn Bootstrap, thêm chúng vào dự án của mình.

Sử dụng CDN

Để sử dụng CDN chúng ta chỉ cần truy vập vào mục BootstrapCDN copy/paste các file nào vào đúng vị trí của nó.

Download mã nguồn

Để donwload mã nguồn, chúng ta truy cập vào mục Compiled CSS and JS.

Bootstrap không bao gồm các thư viện JS
Bootstrap không bao gồm các thư viện JS

Tuy nhiên, các bạn có thể nhìn thấy phần thông báo. Trong mục tải về không bao gồm jQuery và Popper.js.

Bước 1: Tạo folder dự án, bao gồm file index.html và các thư mục con.

Thư mục dự án
Thư mục dự án

Bước 2: Download jQuery: chúng ta cần truy cập vào trang download của thư viện jQuery.

Download jQuery
Download jQuery

Phiên bản hiện tại là 3.5.1 khi bạn download, có thể phiên bản này đã thay đổi. Các bạn cũng không cần lo lắng. Chỉ cần chú ý chọn bản compressed và production là được. Khi các bạn truy cập vào link này file JavaScript sẽ được mở lên. Chúng ta sẽ sử dụng phím tắt ctrl + S để lưu file mã nguồn về máy của mình.

Bước 3: Download Popper.js: chúng ta cần truy cập vào trang chủ thư viện Popper.js.

Popper.js
Popper.js

Các bạn có thể truy cập link CDN, mở file JavaScript lên và thao tác tương tự bước 2 để lưu thư viện popper về máy.

Bước 4: Download Bootstrap: Truy cập link download Compiled CSS and JS của Bootstrap. Download về và giải nén ra. Bên trong có 2 thư mục JS và CSS với rất nhiều file bên trong. Các bạn cũng không cần lo lắng quá. Chúng ta chỉ cần copy 2 file là: bootstrap.min.js và bootstrap.min.css.

Sau khi download, chúng ta sẽ cất tất cả file CSS vào thư mục css. File JavaScript vào thư mục js. Lúc này, folder của chúng ta sẽ như sau:

Thư mục dự án
Thư mục dự án

Bước 5: Nhúng các file vào tài liệu HTML. Cũng tương tự như CDN, chỉ khác biệt là bây giờ chúng ta sẽ nhúng các file nằm trong cùng dự án bằng đường dẫn tương đối của chúng.

Kiểm thử

Để chắc chắn mọi thứ đã ổn. Chúng ta sẽ sử dụng một vài thành phần của Bootstrap, để xem nó đã hoạt động chưa.

Đầu tiên, chúng ta sẽ thêm đoạn mã HTML này vào phần tử body. Sau đó reload lại trang web.

Nếu mọi thứ hoạt động, giao diện của chúng ta sẽ như sau:

Buttons - Bootstrap
Buttons – Bootstrap

kế đến, chúng ta sẽ mở Devtools. Truy cập tab “Console” và chắc chắc không có lỗi nào xuất hiện.

Như vậy là chúng ta đã thêm Bootstrap vào dự án của mình thành công rồi.