Tìm hiểu hệ thống Bootstrap Grid 4 trong 10 phút
1 ví dụ về hệ thống Bootstrap lưới 4
Hệ thống lưới 4 Bootstrap được sử dụng cho các responsive layouts.
Responsive layouts đại diện cho cách các yếu tố căn chỉnh trong trang trên các độ phân giải khác nhau. Điều quan trọng là bạn hiểu cách sử dụng lưới trước khi tìm hiểu về bất kỳ thành phần Bootstrap 4 nào khác, bởi vì bất kỳ phần tử nào bạn sử dụng, bạn sẽ cần đặt nó ở đâu đó trên màn hình.
Băt đâu nào!
Table of Contents
Lưới Bootstrap 4 bao gồm các thùng chứa(container) hàng và cột. Chúng tôi sẽ lấy từng cái một và giải thích chúng
Bootstrap 4 Container
Một thùng chứa(container) Bootstrap 4 là một phần tử với lớp .container. Vùng chứa là gốc của hệ thống lưới Bootstrap 4 và nó được sử dụng để kiểm soát chiều rộng của bố cục.
thùng chứa(container) Bootstrap 4 chứa tất cả các phần tử trong một trang. Điều này có nghĩa là trang của bạn phải có cấu trúc sau: đầu tiên là phần nội dung của trang HTML, bên trong nó, bạn nên thêm vùng chứa và tất cả các phần tử khác bên trong vùng chứa.
Lớp .container đơn giản thiết lập chiều rộng của bố trí tùy thuộc vào độ rộng của màn hình. Nó đặt nội dung ở giữa trang sắp xếp nó theo chiều ngang. Có khoảng trống bằng nhau giữa thùng chứa(container) Bootstrap 4 và bên trái và cạnh phải của trang.
Các .container chiều rộng màn hình thu hẹp và trở thành đầy đủ trên điện thoại di động. Chiều rộng của container được định nghĩa bên trong thư viện Bootstrap 4 cho mọi kích thước màn hình. Bạn có thể thấy các kích thước chính xác tại đây.
Hộp chứa có chiều rộng đầy đủ chiếm 100% kích thước màn hình bất kể chiều rộng màn hình là bao nhiêu. Để sử dụng nó, bạn cần phải thêm lớp .container-fluid.
Bạn có thể xem CodePen tại đây.
Để xem sự khác biệt giữa hai loại vùng chứa, bạn có thể mở trong bảng điều khiển của mình và chuyển đổi giữa các kích thước màn hình
Bootstrap 4 row
Bootstrap 4 row là các lát ngang của màn hình. Chúng chỉ được sử dụng làm trình bao bọc cho các cột. Để sử dụng chúng, bạn cần lớp .row.
Dưới đây là những điều quan trọng nhất bạn cần nhớ về Bootstrap 4 row:
Chúng chỉ được sử dụng để chứa các cột. Nếu bạn đặt các phần tử khác bên trong hàng cùng với các cột, bạn sẽ không nhận được kết quả mong đợi.
Chúng phải được đặt trong các thùng chứa(container). Nếu bạn không làm điều này, bạn sẽ nhận được một cuộn ngang trên trang của bạn. Điều này xảy ra bởi vì các hàng có lề trái và phải tiêu cực của 15. thùng chứa(container) có các miếng đệm 15px để nó chống lại các lề.
Các cột phải là con của hàng. Nếu không, họ sẽ không căn chỉnh. Các hàng và cột được tạo để hoạt động cùng nhau trong phân cấp nghiêm ngặt này.
Bootstrap 4 Columns
Bây giờ chúng ta có thể nhận được phần tốt đẹp của hướng dẫn này, các cột Bootstrap 4. Cột là tuyệt vời! Chúng giúp bạn chia màn hình theo chiều ngang.
Nếu bạn đặt một cột trong hàng của bạn, nó sẽ chiếm toàn bộ chiều rộng. Nếu bạn thêm hai cột, mỗi cột sẽ lấy 1/2 từ chiều rộng. Và vì vậy nó đi cho bất kỳ số lượng cột.
Bạn có thể xem mã trực tiếp trên CodePen.
Ghi chú: Cột không được tô màu. Tôi chỉ thêm màu sắc cho một mô tả hấp dẫn hơn về hình ảnh / vì vậy chúng trông khá đẹp.
Đặt kích thước cho cột
Sử dụng lớp .col đặt độ rộng cho cột động. Điều đó có nghĩa là tùy thuộc vào số cột trong một hàng, chiều rộng của một cột sẽ là chiều rộng của vùng chứa chia cho số cột.
Nhưng có một cách khác để xác định các cột. Bạn có thể sử dụng các lớp cho các cột và xác định kích thước của chúng.
Theo mặc định, lưới Bootstrap 4 bao gồm 12 cột. Bạn có thể chọn bất kỳ kích thước nào từ 1 đến 12 cho cột của bạn. Nếu bạn muốn 3 cột bằng nhau, bạn có thể sử dụng .col-4 cho mỗi cột (vì 3 * 4 cols mỗi = 12). Hoặc bạn có thể đặt các kích thước khác nhau cho chúng. Dưới đây là một số ví dụ:
Bạn có thể xem mã trực tiếp trên CodePen.
Nếu tổng của các cột trong hàng của bạn không đạt đến 12, thì chúng sẽ không lấp đầy toàn bộ hàng. Nếu tổng các cột vượt quá 12 thì nó sẽ chuyển sang dòng kế tiếp. Dòng đầu tiên sẽ chỉ hiển thị các phần tử đầu tiên thêm tối đa 12 hoặc thấp hơn.
Đặt điểm ngắt cho cột
Nếu bạn lấy ví dụ trên và muốn hiển thị nó trên thiết bị di động, bạn có thể gặp phải một số sự cố. Hiển thị năm cột trên thiết bị di động sẽ làm cho nội dung không đọc được.
Đây là nơi mà một trong những thành phần Bootstrap 4 mạnh mẽ nhất có hiệu lực. Để có bố cục khác nhau trên các màn hình khác nhau, bạn sẽ không cần phải viết truy vấn phương tiện, thay vào đó bạn có thể sử dụng các điểm ngắt cột.
Điểm ngắt là một biến Bootstrap 4 viết tắt của độ phân giải màn hình. Khi bạn chỉ định một điểm dừng cho một lớp, bạn đang yêu cầu lớp chỉ hoạt động đối với các độ phân giải ít nhất là lớn như số mà điểm dừng giữ.
Lớp đơn giản nhất mà chúng ta sẽ học là lớp .col- [breakpoint]. Khi bạn sử dụng lớp này, bạn chỉ xác định hành vi cho các cột khi chúng được hiển thị trên các thiết bị có độ phân giải ít nhất là điểm ngắt xác định. Đến điểm ngắt nhất định, các cột của bạn sẽ căn chỉnh theo chiều dọc theo mặc định. Và sau breakpoint của bạn, chúng sẽ sắp xếp theo chiều ngang vì lớp
Bootstrap có 4 điểm ngắt mà bạn có thể sử dụng:
.col-sm cho điện thoại di động lớn hơn (các thiết bị có độ phân giải ≥ 576px);
.col-md cho máy tính bảng (≥768px);
.col-lg cho máy tính xách tay (≥992px);
.col-xl cho máy tính để bàn (≥1200px)
Giả sử bạn muốn hiển thị hai cột một cái khác theo chiều dọc trên màn hình nhỏ và trên cùng một dòng trên màn hình lớn hơn. Bạn sẽ cần phải xác định breakpoint nơi các cột đi trên cùng một dòng.
Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng điểm ngắt .col-lg và xem các cột trông như thế nào trên các màn hình khác nhau. Đối với các độ phân giải thấp hơn điểm ngắt cho trước (<992px), các cột sẽ được hiển thị theo chiều dọc. Điều này có nghĩa là trên thiết bị di động và máy tính bảng, các cột sẽ trông giống như sau:
Màn hình hiển thị độ phân giải <992px (thiết bị di động).
Và đối với các thiết bị có độ phân giải cao hơn hoặc bằng điểm ngắt (≥992px), các cột sẽ xuất hiện trên cùng một hàng. Điều này có nghĩa là trên máy tính xách tay và máy tính để bàn, bạn sẽ nhận được kết quả này:
Màn hình hiển thị độ phân giải> = 992px (máy tính xách tay và màn hình lớn hơn).
Bạn có thể xem mã trực tiếp trên CodePen. Nếu bạn mở Codepen trong một cửa sổ khác và xem trang ở các độ phân giải khác nhau, bạn sẽ thấy các cột thay đổi vị trí của chúng.
Nếu bạn muốn cho 2 cột để đi trên cùng một dòng bắt đầu với điện thoại di động lớn hơn, bạn sẽ sử dụng .col-sm, cho máy tính bảng .col-md và cho màn hình cực lớn .col-xl.
Đặt kích thước và điểm ngắt cho cột
Bạn có thể kết hợp các kích thước và điểm ngắt và sử dụng một lớp đơn với định dạng .col- [breakpoint] - [size].
Ví dụ: nếu bạn muốn ba cột có kích thước khác nhau căn chỉnh trên một hàng bắt đầu bằng độ phân giải của máy tính xách tay, bạn cần thực hiện việc này:
Bạn sẽ nhận được kết quả này về độ phân giải <992px:
Và đối với màn hình có kích thước ≥992px:
bạn có thể thấy mã trực tiếp trên CodePen.
Nhưng điều gì sẽ xảy ra nếu bạn muốn hiển thị một cột trên mỗi hàng trên các độ phân giải di động nhỏ, hai cột mỗi hàng trên máy tính bảng và bốn cột trên máy tính xách tay hoặc thiết bị có độ phân giải cao hơn?
Sau đó, bạn thêm nhiều lớp cho một cột để mô tả hành vi cho mọi độ phân giải. Sử dụng nhiều lớp, bạn chỉ định rằng nội dung sẽ mất sáu vị trí trên máy tính bảng và ba trên máy tính xách tay.
Kết quả sẽ hiển thị như thế này trên máy tính bảng:
Và như thế này trên máy tính xách tay và độ phân giải cao hơn:
Ví dụ này cũng có trên CodePen.
Là một bài tập, bạn có thể thử và tạo các hàng với số lượng cột khác nhau tùy thuộc vào màn hình và xác minh hành vi trong bảng điều khiển trình duyệt của bạn.
Offsetting Columns
Nếu bạn không muốn các cột nằm cạnh nhau, bạn có thể sử dụng lớp .offset- [breakpoint] - [size] cùng với .col- [breakpoint] - [size].
Sử dụng lớp này giống như thêm một cột trống trước cột của bạn. Đây là một ví dụ đơn giản:
Bạn có thể xem mã trực tiếp trên CodePen.
Bạn có thể sử dụng lớp trên bất kỳ cột nào trong hàng. Dưới đây là một số ví dụ:
Nesting Columns(Cột lồng nhau)
Điều này có thể đến như là một bất ngờ, nhưng bạn có thể thêm một hàng bên trong một cột!
Hàng được đề cập (sẽ có chiều rộng của cột mẹ) sẽ được chia thành 12 cột (nhỏ hơn) mà bạn có thể tham chiếu thông qua các lớp .col- *.
Hãy xem điều gì sẽ xảy ra khi chúng tôi chèn một hàng mới bên trong một cột:
Bạn có thể xem mã trực tiếp trên CodePen.
Biết được điều này, bạn có thể đi nhiều cấp độ sâu để tổ chức thông tin của bạn. Các cột sẽ cung cấp một cách đơn giản để bạn quản lý không gian của mình.
Điều này kết thúc kiến thức cơ bản liên quan đến hệ thống lưới đáp ứng Bootstrap 4. Nếu bạn có câu hỏi, xin vui lòng cho tôi biết trong các ý kiến, tôi sẽ rất vui khi trả lời.
