Tìm hiểu Hệ thống lưới Bootstrap 4 trong 10 phút

Hệ thống Lưới Bootstrap 4 được sử dụng cho các bố cục đáp ứng.

Bố cục đáp ứng thể hiện cách các phần tử căn chỉnh trong trang ở các độ phân giải khác nhau. Điều quan trọng là bạn phải 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ỳ thành phần 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!

Mục lục

  • Bootstrap 4 Container
  • Bootstrap 4 hàng
  • Bootstrap 4 cột
  • Đọc thêm

Lưới Bootstrap 4 bao gồm các vùng chứa, 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

Vùng chứa Bootstrap 4 là một phần tử có 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.

Vùng chứa 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 đơn giản .containerđặt chiều rộng của bố cục tùy thuộc vào chiều rộng của màn hình. Nó đặt nội dung ở giữa trang, căn chỉnh theo chiều ngang. Có không gian bằng nhau giữa vùng chứa Bootstrap 4 và cạnh trái và phải của trang.

Các .containerthang xuống trong chiều rộng như màn hình rộng thu hẹp và trở nên đầy đủ chiều rộng trên di động. Chiều rộng của vùng chứa được xác định bên trong thư viện Bootstrap 4 cho mọi kích thước màn hình. Bạn có thể xem kích thước chính xác ở đây.

Vùng chứa toàn chiều rộng 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 thêm lớp. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Bạn có thể xem CodePen tại đây.

Để xem sự khác biệt giữa hai loại hộp chứa, bạn có thể mở bút 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 hàng

Bootstrap 4 hàng là các lát cắ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 .rowlớp học.

 ... 

Dưới đây là những điều quan trọng nhất bạn cần nhớ về Bootstrap 4 hàng:

  • 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. 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 mình. Điều này xảy ra vì các hàng có lề trái và phải âm là 15. Vùng chứa có đệm 15px nên nó chống lại lề.
  • Các cột phải là con của hàng. Nếu không chúng sẽ không thẳng hàng. Các hàng và cột được tạo để hoạt động cùng nhau trong hệ thống phân cấp nghiêm ngặt này.

Bootstrap 4 cột

Bây giờ chúng ta có thể đến phần hay của hướng dẫn này, Bootstrap 4 cột. 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 mình, nó sẽ chiếm hết chiều rộng. Nếu bạn thêm hai cột, mỗi cột sẽ chiếm 1/2 chiều rộng. Và vì vậy nó áp dụng cho bất kỳ số lượng cột nào.

 ... ... ... ... ... ... ... ... 

Bạn có thể xem mã trực tiếp trên CodePen.

Lưu ý bên: Các cột không được tô màu. Tôi chỉ thêm màu sắc để mô tả trực quan hấp dẫn hơn / để chúng trông đẹp.

Đặt kích thước cho các cột

Sử dụng .collớp đặt chiều rộng cho cột một cách tự động. Điều đó có nghĩa là tùy thuộc vào số lượng 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ộ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 mình. Nếu bạn muốn 3 cột bằng nhau, bạn có thể sử dụng .col-4cho mỗi cột (vì 3 * 4 cột mỗi cột = 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 số col trong hàng của bạn không lên đến 12, thì chúng sẽ không lấp đầy toàn bộ hàng. Nếu tổng của các cột vượt quá 12 thì nó sẽ chuyển sang dòng tiếp theo. Dòng đầu tiên sẽ chỉ hiển thị các phần tử đầu tiên cộng 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 một số vấn đề. Hiển thị năm cột trên thiết bị di động sẽ khiến nội dung không thể đọc được.

Đây là nơi một trong những thành phần Bootstrap 4 mạnh mẽ nhất phát huy tác dụng. Để có 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 viết các 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 đại diện cho độ phân giải màn hình. Khi bạn chỉ định một điểm ngắt cho một lớp, bạn đang yêu cầu lớp chỉ hoạt động cho các độ phân giải ít nhất là lớn bằng số mà điểm ngắt đó giữ.

Lớp học đơn giản nhất mà chúng ta sẽ tìm hiểu là .col-[breakpoint]lớp học. Khi bạn sử dụng lớp này, bạn đang xác định hành vi cho các cột chỉ 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. Lên đến điểm ngắt đã cho, các cột của bạn sẽ căn chỉnh theo chiều dọc theo mặc định. Và sau điểm ngắt của bạn, chúng sẽ căn chỉnh 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 (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 lần lượt 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 chỉ định điểm ngắt 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 .col-lgđiểm ngắt 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 độ phân giải thấp hơn điểm ngắt đã cho (<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ẽ giống như sau:

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ẽ nằm 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:

 ... ... 

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 2 cột trên cùng một dòng, bắt đầu từ đ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-mdvà 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 duy nhất 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 điều này:

 ... ... ... 

Bạn sẽ nhận được kết quả này trên độ phân giải <992px:

Và đối với màn hình ≥992px:

Một lần nữa, bạn có thể xem 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 mỗi hàng trên độ 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 duy nhấ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ẽ chiếm sáu vị trí trên máy tính bảng và ba vị trí 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.

Như 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 kích thước 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.

Cột bù trừ

Nếu bạn không muốn các cột của mình ở 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 cũng 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ụ:

 ... ... ... ... ... 

Các cột làm tổ

Điều này có thể gây ngạc nhiên, 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 cha) sau đó sẽ được chia thành 12 cột (nhỏ hơn) mà bạn có thể tham chiếu qua các .col-* lớp.

Hãy xem điều gì sẽ xảy ra khi chúng ta chèn một hàng mới vào 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 sâu nhiều cấp độ để sắp xếp thông tin của mình. 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.

Phần này tóm tắt những kiến ​​thức cơ bản về hệ thống lưới đáp ứng Bootstrap 4. Nếu bạn có thắc mắc, vui lòng cho tôi biết trong phần bình luận, tôi sẽ sẵn lòng giải đáp.

Đọc thêm

Nếu bạn có nhiều thời gian hơn, đây là một số tài nguyên hữu ích:

  • Tài liệu lưới chính thức từ GetBootstrap
  • Video hướng dẫn từ Scrimba

Bài viết này ban đầu được đăng trên Blog BootstrapBay. Đây là một phần của loạt bài hướng dẫn về Bootstrap 4 lớn hơn được gọi là 14 Days of Bootstrap 4. Nếu bạn muốn tiếp tục tìm hiểu về các thành phần của Bootstrap 4, các bài viết này là một nơi tốt để bắt đầu.

Và nếu bạn muốn bắt đầu phát triển của mình với mẫu Bootstrap, bạn có thể xem thị trường của chúng tôi.

Nhưng trước khi tìm hiểu sâu hơn, hãy dành một chút thời gian để ăn mừng những kỹ năng mới có được của bạn !?