Bootstrap - Hệ thống lưới
Trong chương này, chúng ta sẽ thảo luận về Hệ thống lưới Bootstrap.
Grid là gì?
Theo wikepedia -
Trong thiết kế đồ họa, lưới là một cấu trúc (thường là hai chiều) được tạo thành từ một loạt các đường thẳng (dọc, ngang) giao nhau được sử dụng để cấu trúc nội dung. Nó được sử dụng rộng rãi để thiết kế bố cục và cấu trúc nội dung trong thiết kế in ấn. Trong thiết kế web, nó là một phương pháp rất hiệu quả để tạo một bố cục nhất quán một cách nhanh chóng và hiệu quả bằng cách sử dụng HTML và CSS.
Nói một cách dễ hiểu, các lưới trong thiết kế web tổ chức và cấu trúc nội dung, giúp các trang web dễ dàng quét và giảm tải nhận thức cho người dùng.
Hệ thống lưới Bootstrap là gì?
Theo tài liệu chính thức của Bootstrap cho hệ thống lưới -
Bootstrap bao gồm một hệ thống lưới linh hoạt đầu tiên đáp ứng, di động có thể điều chỉnh tỷ lệ thích hợp lên đến 12 cột khi kích thước thiết bị hoặc khung nhìn tăng lên. Nó bao gồm các lớp được xác định trước cho các tùy chọn bố cục dễ dàng, cũng như các mixin mạnh mẽ để tạo nhiều bố cục ngữ nghĩa hơn.
Hãy để chúng tôi hiểu câu nói trên. Bootstrap 3 trước tiên là di động theo nghĩa là mã cho Bootstrap bây giờ bắt đầu bằng cách nhắm mục tiêu các màn hình nhỏ hơn như thiết bị di động, máy tính bảng, sau đó “mở rộng” các thành phần và lưới cho các màn hình lớn hơn như máy tính xách tay, máy tính để bàn.
Chiến lược đầu tiên trên thiết bị di động
Content
- Xác định điều gì là quan trọng nhất.
Layout
- Thiết kế chiều rộng nhỏ hơn trước.
- CSS cơ sở địa chỉ thiết bị di động đầu tiên; địa chỉ truy vấn phương tiện cho máy tính bảng, máy tính để bàn.
Progressive Enhancement
- Thêm các phần tử khi kích thước màn hình tăng lên.
Hoạt động của hệ thống lưới Bootstrap
Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn. Đây là cách hệ thống lưới Bootstrap hoạt động -
Các hàng phải được đặt trong một .container lớp để căn chỉnh và đệm thích hợp.
Sử dụng các hàng để tạo các nhóm cột theo chiều ngang.
Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
Các lớp lưới được xác định trước như .row and .col-xs-4có sẵn để nhanh chóng tạo bố cục lưới. LESS mixin cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn.
Cột tạo rãnh (khoảng trống giữa nội dung cột) thông qua đệm. Khoảng đệm đó được bù đắp trong các hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên.rows.
Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ: ba cột bằng nhau sẽ sử dụng ba.col-xs-4.
Truy vấn phương tiện truyền thông
Truy vấn phương tiện là một thuật ngữ thực sự ưa thích cho "quy tắc CSS có điều kiện". Nó chỉ đơn giản là áp dụng một số CSS, dựa trên các điều kiện nhất định được đặt ra. Nếu các điều kiện đó được đáp ứng, kiểu được áp dụng.
Media Queries trong Bootstrap cho phép bạn di chuyển, hiển thị và ẩn nội dung dựa trên kích thước khung nhìn. Các truy vấn phương tiện sau được sử dụng trong các tệp LESS để tạo các điểm ngắt chính trong hệ thống lưới Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Đôi khi chúng được mở rộng để bao gồm max-width để giới hạn CSS ở một nhóm thiết bị hẹp hơn.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Truy vấn phương tiện có hai phần, đặc điểm kỹ thuật thiết bị và sau đó là quy tắc kích thước. Trong trường hợp trên, quy tắc sau được đặt:
Hãy để chúng tôi xem xét dòng này -
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }Đối với tất cả các thiết bị không có vấn đề gì với chiều rộng tối thiểu: @ screen-sm-min nếu chiều rộng của màn hình nhỏ hơn @ screen-sm-max , thì hãy làm gì đó .
Tùy chọn lưới
Bảng sau đây tóm tắt các khía cạnh về cách hệ thống lưới Bootstrap hoạt động trên nhiều thiết bị:
| Thiết bị cực nhỏ Điện thoại (<768px) | Thiết bị nhỏ Máy tính bảng (≥768px) | Thiết bị trung bình Máy tính để bàn (≥992px) | Thiết bị lớn Máy tính để bàn (≥1200px) | |
|---|---|---|---|---|
| Hành vi lưới | Ngang mọi lúc | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt | Thu gọn để bắt đầu, nằm ngang phía trên các điểm ngắt |
| Chiều rộng vùng chứa tối đa | Không có (tự động) | 750px | 970px | 1170px |
| Tiền tố lớp | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # cột | 12 | 12 | 12 | 12 |
| Chiều rộng cột tối đa | Tự động | 60px | 78px | 95px |
| Chiều rộng máng xối | 30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
30px (15px trên mỗi bên của cột) |
| Lồng được | Đúng | Đúng | Đúng | Đúng |
| Bù đắp | Đúng | Đúng | Đúng | Đúng |
| Thứ tự cột | Đúng | Đúng | Đúng | Đúng |
Cấu trúc lưới cơ bản
Sau đây là cấu trúc cơ bản của lưới Bootstrap:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
....
</div>Hãy để chúng tôi xem một số ví dụ đơn giản về lưới -
Ví dụ - Xếp chồng lên nhau
Ví dụ - Thiết bị vừa và lớn
Ví dụ - Điện thoại di động, máy tính bảng, máy tính để bàn
Đặt lại cột đáp ứng
Với bốn tầng lưới có sẵn, bạn nhất định gặp phải các vấn đề trong đó tại một số điểm ngắt nhất định, các cột không rõ ràng hoàn toàn vì cột này cao hơn cột kia. Để khắc phục điều đó, hãy sử dụng kết hợp một lớp.clearfixvà các lớp tiện ích đáp ứng như được hiển thị trong ví dụ sau:
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau:
Thay đổi kích thước khung nhìn của bạn hoặc kiểm tra nó trên điện thoại của bạn để có kết quả mong muốn của ví dụ này.
Cột bù đắp
Offsets là một tính năng hữu ích cho các bố cục chuyên biệt hơn. Chúng có thể được sử dụng để đẩy các cột qua để có thêm khoảng cách, (ví dụ). Các.col-xs = * các lớp không hỗ trợ hiệu số, nhưng chúng dễ dàng được sao chép bằng cách sử dụng một ô trống.
Để sử dụng hiệu số trên màn hình lớn, hãy sử dụng .col-md-offset-*các lớp học. Các lớp này tăng lề trái của cột bằng* cột ở đâu * phạm vi từ 1 đến 11.
Trong ví dụ sau, chúng ta có <div class = "col-md-6"> .. </div>, Chúng ta sẽ căn giữa điều này bằng cách sử dụng lớp .col-md-offset-3.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau:
Lồng các cột
Để lồng nội dung của bạn với lưới mặc định, hãy thêm một .row và tập hợp .col-md-* cột trong một .col-md-*cột. Các hàng lồng nhau phải bao gồm một tập hợp các cột lên đến 12.
Trong ví dụ sau, bố cục có hai cột, với cột thứ hai được chia thành bốn hộp trên hai hàng.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>First Column</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-md-9" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Second Column- Split into 4 boxes</h4>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics.
Pinterest assumenda minim organic quis.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau:
Thứ tự cột
Một tính năng thú vị khác của hệ thống lưới Bootstrap là bạn có thể dễ dàng viết các cột theo thứ tự và hiển thị chúng theo một thứ tự khác. Bạn có thể dễ dàng thay đổi thứ tự của các cột lưới tích hợp với.col-md-push-* và .col-md-pull-* các lớp bổ nghĩa nơi * phạm vi từ 1 đến 11.
Trong ví dụ sau, chúng ta có bố cục hai cột với cột bên trái là hẹp nhất và hoạt động như một thanh bên. Chúng tôi sẽ hoán đổi thứ tự của các cột này bằng cách sử dụng.col-md-push-* và .col-md-pull-* các lớp học.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>Điều này sẽ tạo ra kết quả sau: