1. Bootstrap "Grid" là gì?
Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.
Bootstrap Grid có thể được sử dụng một mình, mà không cần Bootstrap JavaScript và các thành phần CSS khác. Bạn chỉ cần tải xuống và tham chiếu "bootstrap-grid.css" chứa các lớp Grid và Flexbox.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Đây là ví dụ cơ bản nhất về việc sử dụng Grid:
<div class="container">
<div class="row">
<div class="col">
<h2>Đây là cột thứ nhất</h2>
Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.
</div>
</div>
</div>
“Cột” lớn theo chiều ngang trên khung nhìn…
2 cột…
<div class="col">
<h2>Đây là cột thứ nhất</h2>
Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.
</div>
<div class="col">
<h2>Đây là cột thứ hai</h2>
Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.
</div>
3 cột…
<div class="col">
<h2>Đây là cột thứ nhất</h2>
Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.
</div>
<div class="col">
<h2>Đây là cột thứ hai</h2>
Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.
</div>
<div class="col">
<h2>Đây là cột thứ ba</h2>
Bootstrap Grid được sử dụng để bố trí giao diện một cách đặc thù, đặc biệt sử dụng cho Responsive Layouts. Hiểu cách thức hoạt động sẽ giúp hiểu thêm về Bootstrap. Lưới được tạo thành từ nhóm Rows & Columns bên trong 1 hoặc nhiều Containers.
</div>
Lưu ý: Các đường viền màu xám nhạt xung quanh các cột trong các ví dụ trên đã được thêm vào để bạn có thể hình dung đường viền của mỗi cột.
2. Tại sao lại sử dụng Container để bao quát Row
Container có thể được sử dụng để chứa bất kỳ phần tử và nội dung nào. Nó không chỉ được sử dụng cho các Rows & Columns của Grid.
Đừng bỏ qua Container.
Lúc đầu, Container có vẻ không cần thiết, nhưng nó giúp kiểm soát chiều rộng của bố cục. Vùng chứa cũng được sử dụng để căn đều các cạnh trái và phải của bố cục trong khung nhìn của trình duyệt.
Bootstrap 4 có 2 loại Container. Trong các ví dụ của tôi, tôi đã sử dụng .container, nhưng cũng có full-width .container-fluid. Bạn có thể sử dụng một trong hai:
- Vùng chứa có chiều rộng cố định để căn giữa bố cục của bạn ở giữa:
<div class="container"></div>
- Vùng chứa có chiều rộng đầy đủ cho bố cục kéo dài toàn bộ chiều rộng:
<div class="container-fluid"></div>
Các .container tỷ lệ chiều rộng giảm dần theo phản ứng (khi chiều rộng màn hình thu hẹp) để cuối cùng nó trở thành toàn chiều rộng như. container-fluid trên các thiết bị nhỏ hơn.
3. Cách thiết kế đáp ứng với Bootstrap.
Bootstrap 4 có 5 Bậc Responsive (“ Breakpoints ”). Ví dụ: col-lg-4, col-md.
Điểm ngắt đáp ứng, dựa trên chiều rộng màn hình:
- (xs) - chiều rộng màn hình < 576 px (Đây là lớp "mặc định")
- sm - chiều rộng màn hình ≥ 576 px
- md - chiều rộng màn hình ≥ 768 px
- lg - chiều rộng màn hình ≥ 992 px
- xl - chiều rộng màn hình ≥ 1200 px
Chú ý: Tại sao tôi lại đặt (xs) trong ngoặc đơn chứ không phải các dấu ngắt khác? Vì xs (cực nhỏ) là điểm ngắt mặc định, bản -xs infix được sử dụng cho Bootstrap 3.x lâu hơn được sử dụng trong Bootstrap 4.x. Vì vậy, thay vì sử dụng col-xs-6, nó đơn giản col-6.
Ví dụ: đây là 2 cột, mỗi cột 50% chiều rộng:
<div class = "container">
<div class = "row">
<div class = "col-sm-6"> Cột 1 </div>
<div class = "col-sm-6"> Cột 2 </ div>
</div>
</div>
Chiều rộng màn hình nhỏ hơn 768px , 2 cột trở thành 100% chiều rộng và xếp chồng theo chiều dọc.
Hãy xem một số ví dụ về Lưới bố cục tự động…
3 cột có chiều rộng bằng nhau. `Cols` vẫn nằm ngang ở mọi chiều rộng và không xếp chồng theo chiều dọc vì điểm ngắt xs là mặc định:
<div class = " container ">
<div class = " row ">
<div class = " col "> 1 </div>
<div class = " col "> 2 </div>
<div class = " col "> 3 </div>
</div>
</div>3 cột có chiều rộng bằng nhau (đáp ứng). Trong ví dụ này, 'cols' vẫn nằm ngang cho đến smđiểm ngắt là 576px, sau đó xếp chồng lên nhau theo chiều dọc. Hãy nhớ rằng, bạn có thể chuyển ra smcho bất cứ điều gì breakpoint ( md, lg, xl) là cần thiết:
<div class = " container ">
<div class = " row ">
<div class = " col-sm "> 1 </div>
<div class = " col-sm "> 2 </div>
<div class = " col-sm "> 3 </div>
</div>
</div>2 cột, thanh bên trái. Đây là một ví dụ về việc kết hợp các cột có chiều rộng được xác định cổ điển với các cột được bố trí tự động. Cột bên phải sẽ tự động phát triển để lấp đầy chiều rộng vì chúng tôi đang sử dụng bố cục tự động .col. Thanh bên sẽ chiếm 16,6% chiều rộng màn hình trên các màn hình lớn hơn và sau đó xếp chồng lên nhau tại smđiểm ngắt 576px:
<div class = " container ">
<div class = " row ">
<div class = " col-sm-2 "> thanh bên </div>
<div class = " col "> nội dung chính </div>
</ div >
</div>3 cột, thanh bên phải (thu nhỏ để vừa vặn): Trong ví dụ này, có thanh bên trái, vùng nội dung trung tâm và thanh bên phải thu nhỏ chiều rộng để điều chỉnh cho phù hợp với nội dung của nó.
<div class = " container ">
<div class = " row ">
<div class = " col-sm-2 "> left </div>
<div class = " col "> main content </div>
<div class = " col-auto "> right </div>
</div>
</div>