Bootstrap được xây dựng trên một lưới 12 cột đáp ứng. Chúng tôi cũng đã bao gồm các bố cục có chiều rộng cố định và chiều rộng linh hoạt dựa trên hệ thống đó.
Hệ thống lưới mặc định được cung cấp như một phần của Bootstrap là lưới 12 cột rộng 940px .
Nó cũng có bốn biến thể đáp ứng cho các thiết bị và độ phân giải khác nhau: điện thoại, máy tính bảng dọc, ngang bàn và máy tính để bàn nhỏ và máy tính để bàn màn hình rộng lớn.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Như được hiển thị ở đây, một bố cục cơ bản có thể được tạo với hai "cột", mỗi "cột" trải dài một số trong số 12 cột cơ bản mà chúng tôi đã xác định là một phần của hệ thống lưới của chúng tôi.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Với hệ thống lưới tĩnh (không chất lỏng) trong Bootstrap, việc lồng vào nhau rất dễ dàng. Để lồng nội dung của bạn, chỉ cần thêm một .row
tập hợp các .span*
cột mới trong một .span*
cột hiện có.
Các hàng lồng nhau phải bao gồm một tập hợp các cột cộng lại với số lượng các cột chính của nó. Ví dụ: hai .span3
cột lồng nhau nên được đặt trong a .span6
.
- <div class = "row" >
- <div class = "span12" >
- Cấp 1 của cột
- <div class = "row" >
- <div class = "span6" > Cấp 2 </div>
- <div class = "span6" > Cấp 2 </div>
- </div>
- </div>
- </div>
Hệ thống lưới linh hoạt sử dụng phần trăm cho chiều rộng cột thay vì pixel cố định. Nó cũng có các biến thể đáp ứng tương tự như hệ thống lưới cố định của chúng tôi, đảm bảo tỷ lệ thích hợp cho các thiết bị và độ phân giải màn hình chính.
Làm cho bất kỳ hàng nào trở nên linh hoạt đơn giản bằng cách thay đổi .row
thành .row-fluid
. Các cột giữ nguyên chính xác, giúp bạn dễ dàng lật giữa các bố cục cố định và linh hoạt.
- <div class = "row-chất lỏng" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Việc lồng với lưới chất lỏng có một chút khác biệt: số lượng cột lồng nhau không cần phải khớp với cột gốc. Thay vào đó, các cột của bạn được đặt lại ở mỗi cấp vì mỗi hàng chiếm 100% cột mẹ.
- <div class = "row-chất lỏng" >
- <div class = "span12" >
- Cấp 1 của cột
- <div class = "row-chất lỏng" >
- <div class = "span6" > Cấp 2 </div>
- <div class = "span6" > Cấp 2 </div>
- </div>
- </div>
- </div>
Biến đổi | Giá trị mặc định | Sự mô tả |
---|---|---|
@gridColumns |
12 | Số cột |
@gridColumnWidth |
60px | Chiều rộng của mỗi cột |
@gridGutterWidth |
20px | Khoảng trống giữa các cột |
@siteWidth |
Tính tổng của tất cả các cột và máng xối | Đếm số cột và rãnh để đặt chiều rộng của .container-fixed() hỗn hợp |
Được tích hợp trong Bootstrap là một số ít các biến để tùy chỉnh hệ thống lưới 940px mặc định, được nêu ở trên. Tất cả các biến cho lưới được lưu trữ trong các biến.less.
Sửa đổi lưới có nghĩa là thay đổi ba @grid*
biến và biên dịch lại Bootstrap. Thay đổi các biến lưới trong biến.less và sử dụng một trong bốn cách được ghi lại để biên dịch lại . Nếu bạn đang thêm nhiều cột hơn, hãy đảm bảo thêm CSS cho những cột đó trong grid.less.
Tùy chỉnh lưới chỉ hoạt động ở mức mặc định, lưới 940px. Để duy trì các khía cạnh đáp ứng của Bootstrap, bạn cũng sẽ phải tùy chỉnh các lưới trong responsive.less.
Bố cục mặc định và đơn giản, rộng 940px, ở giữa chỉ dành cho bất kỳ trang web hoặc trang nào được cung cấp bởi một trang duy nhất <div class="container">
.
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
<div class="container-fluid">
cung cấp cấu trúc trang linh hoạt, chiều rộng tối thiểu và tối đa và thanh bên bên trái. Nó tuyệt vời cho các ứng dụng và tài liệu.
- <div class = "container-liquid" >
- <div class = "row-chất lỏng" >
- <div class = "span2" >
- <! - Nội dung thanh bên ->
- </div>
- <div class = "span10" >
- <! - Nội dung phần thân ->
- </div>
- </div>
- </div>
Bootstrap hỗ trợ một số truy vấn phương tiện trong một tệp duy nhất để giúp làm cho các dự án của bạn phù hợp hơn trên các thiết bị và độ phân giải màn hình khác nhau. Đây là những gì được bao gồm:
Nhãn mác | Chiều rộng bố cục | Chiều rộng cột | Chiều rộng máng xối |
---|---|---|---|
Điện thoại thông minh | 480px trở xuống | Cột linh hoạt, không có chiều rộng cố định | |
Máy tính bảng chân dung | 480px đến 768px | Cột linh hoạt, không có chiều rộng cố định | |
Máy tính bảng nằm ngang | 768px đến 979px | 42px | 20px |
Mặc định | 980px trở lên | 60px | 20px |
Màn hình lớn | 1210px trở lên | 70px | 30px |
Để đảm bảo thiết bị hiển thị đúng các trang đáp ứng, hãy bao gồm thẻ meta chế độ xem.
- <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >
Truy vấn phương tiện cho phép CSS tùy chỉnh dựa trên một số điều kiện — tỷ lệ, chiều rộng, loại hiển thị, v.v. — nhưng thường tập trung xung quanh min-width
và max-width
.
Bootstrap không tự động bao gồm các truy vấn phương tiện này, nhưng việc hiểu và thêm chúng rất dễ dàng và yêu cầu thiết lập tối thiểu. Bạn có một số tùy chọn để bao gồm các tính năng đáp ứng của Bootstrap:
Tại sao không chỉ bao gồm nó? Sự thật mà nói, không phải cái gì cũng cần đáp ứng. Thay vì khuyến khích các nhà phát triển loại bỏ tính năng này, chúng tôi nghĩ cách tốt nhất là nên kích hoạt nó.
- // Điện thoại ngang trở xuống
- @media ( tối đa - chiều rộng : 480px ) { ... }
- // Điện thoại ngang sang máy tính bảng dọc
- @media ( tối đa - chiều rộng : 768px ) { ... }
- // Dọc máy tính bảng sang ngang và máy tính để bàn
- @media ( tối thiểu - chiều rộng : 768px ) và ( tối đa - chiều rộng : 980px ) { ... }
- // Màn hình lớn
- @media ( tối thiểu - chiều rộng : 1200px ) { .. }