Bootstrap Framework là một thư viện CSS, HTML và JavaScript được phát triển bởi Mark Otto và Jacob Thornton tại Twitter được xuất bản vào năm 2011, framework này cho phép bạn thiết kế giao diện thân thiện với các thiết bị di động hay gọi là responsive design, Bootstrap thiết kế sẵn cho bạn nhiều biểu mẫu cơ bản bằng HTML CSS và JavaScript bạn chỉ việc sử dụng và tùy chỉnh lại theo ý của mình.

Bootstrap

Vì sao bạn nên sử dụng Bootstrap

  • Bootstrap sở dĩ được nhiều người sử dụng mặc dù mới ra đời trong thời gian vài năm trở lại đây bởi sự ổn định, dễ sử dụng, chạy tốt trên mọi kích cỡ màn hình phát triển mã nguồn mở nên được cộng đồng thế giới đóng góp và hoàn thiện hơn, bạn có thể tạo giao diện web nhanh hơn bình thường rất nhiều.
  • Bootstrap cũng như các CSS Framework khác sử dụng đạng grid để định hình giao diện web nên bạn có thể tùy chỉnh dễ dàng. Grid Bootstrap phân ra 12 cột.
  • Bootstrap có cả các tài liệu chi tiết rất dễ học, có ví dụ cho từng biểu mẫu nên bạn cứ canh chỉnh theo hướng dẫn và dùng.
  • Sử dụng một thư viện JavaScript rất phong phú gần như hỗ trợ tất cả các biểu mẫu cần thiết cho một website.
  • Cơ chế có thể tự phát triển theo ý mình dựa trên nền tảng Bootstrap, đây là một trong những điểm mạnh của Bootstrap mà ít có Framework nào hiện tại cạnh tranh được.

Tìm hiểu Bootstrap

Đầu tiên, bạn hãy xem các ví dụ cơ bản mà Bootstrap cung cấp tại đây sau đó đọc sơ qua các tài liệu về CSSComponents và JavaScript để nắm cái khái niệm cơ bản. Sau đó, bạn có thể thực hành series Dự án Blog cá nhân để áp dụng.

Grid System

Bootstrap grid system

Grid systems là một hệ thống của Bootstrap, tạo ra với 12 cột trong một trang nội dung và tự động sắp xếp theo kích thước hiển thị của thiết bị (Desktop, Tablet, Phone…), từ đó chúng ta dễ dàng phân bố cục cho Bootsrap theo thiết kế Reponsive. Cách hoạt động của grid system:

  • Mỗi một hàng, phải được bao bọc bởi class .container (cố định kích thước rộng là 768px) hoặc .container-fluid (không giới hạng chiều rộng) để canh giữa và cách khoảng cách lề.
  • Mỗi một hàng gồm các nhóm cột.
  • Nội dung nằm trong cột, mỗi cột có thể chứa 12 cột con khác.
  • Giữa các cột sẽ có khoảng padding (đệm). Khoảng đệm của cột đầu và cuối sẽ được quy định bởi .rows.
  • Nếu có nhiều hơn 12 cột trên một hàng thì mỗi nhóm 12 cột sẽ cố định và phần dư sẽ được chuyển sang hàng mới.
  • Grid system được đinh nghĩa với các kích thước màn hình khác nhau mà hiển thi khác nhau. Ví dụ ta có lớp .col-md-* sẽ không hiển thị đúng cột nếu màn hình cỡ lớn và .col-lg-* sẽ không áp dụng nếu bạn đang xem bằng màn hình cỡ vừa.

Các lớp tùy chọn của Grib System được quy định bởi bảng sau:

Màn hình nhỏ nhất
Phones (< 768px)
Màn hình nhỏ
Tablets (≥ 768px)
Màn hình vừa
Desktops (≥ 992px)
Màn hình lớp
Desktops (≥ 1200px)
Trạng tháiMọi thời điểmTự động hiển thị theo màn hình
Độ rộngKhông (tự động)750px970px1170px
Tên lớp.col-xs-*.col-sm-*.col-md-*.col-lg-*
Số cột12
Độ rộng mỗi cộtTự động~62px~81px~97px
Khoảng cách30px (15px mỗi bên)
Nestable
Offsets
Column ordering