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ề CSS, Components 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
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ái | Mọi thời điểm | Tự động hiển thị theo màn hình | ||
| Độ rộng | Không (tự động) | 750px | 970px | 1170px |
| Tên lớp | .col-xs-* | .col-sm-* | .col-md-* | .col-lg-* |
| Số cột | 12 | |||
| Độ rộng mỗi cột | Tự động | ~62px | ~81px | ~97px |
| Khoảng cách | 30px (15px mỗi bên) | |||
| Nestable | Có | |||
| Offsets | Có | |||
| Column ordering | Có | |||