Bootstrap 5 Kết quả

Bootstrap 5 Kết quả

Từ chương trước, bạn đã học được rằng Bootstrap cần các phần tử để bao bọc nội dung trang web.

Chúng ta thêm nội dung vào khung và có hai lớp khung sẵn có:

  • .container class cung cấp khung cố định rộng phản hồi
  • .container-fluid class cung cấp khung toàn rộng, trải qua toàn bộ chiều rộng khung nhìn

khung cố định

sử dụng .container class tạo khung có độ rộng cố định, phản hồi.

Lưu ý, chiều rộng của nó (max-width）sẽ thay đổi ở các kích thước màn hình khác nhau:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Vui lòng mở ví dụ dưới đây và điều chỉnh kích thước cửa sổ trình duyệt để xem độ rộng khung thay đổi ở các điểm chập khác nhau:

Mô hình

<div class="container">
  <h1>Trang Bootstrap đầu tiên của tôi</h1>
  <p>Đây là một đoạn văn bản.</p>
</div>

Thử ngay

Điểm chập XXL (≥1400px) là tính năng mới được thêm vào Bootstrap 5, trong khi điểm chập lớn nhất trong Bootstrap 4 là Extra large (≥1200px).

khung流体

sử dụng .container-fluid class tạo khung toàn rộng, nó luôn trải qua toàn bộ chiều rộng màn hình (width luôn luôn 100%）：

Mô hình

<div class="container-fluid">
  <h1>Trang Bootstrap đầu tiên của tôi</h1>
  <p>Đây là một đoạn văn bản.</p>
</div>

Thử ngay

độ đầy khung

Mặc định, khung có độ đầy bên trái và bên phải (biên độ bên trong), không có độ đầy trên hoặc dưới (biên độ trên và dưới). Do đó, chúng ta thường sử dụng công cụ độ cách（công cụ tiện ích），như độ đầy thêm và biên giới, để chúng trông tốt hơn. Ví dụ như.pt-5 nghĩa là "thêm một khoảng trống lớnđộ cao đầy：

Mô hình

<div class="container pt-5"></div>

Thử ngay

Viền và màu sắc của container

Các công cụ khác, chẳng hạn như viền và màu sắc, cũng thường được sử dụng cùng với container:

Mô hình

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Thử ngay

Bạn sẽ học thêm về công cụ màu sắc và viền trong các chương sau.

container tương ứng

Bạn cũng có thể sử dụng .container-sm|md|lg|xl loại để xác định khi nào nên phản hồi.

của容器 max-width Sẽ thay đổi trên các kích thước màn hình/viewport khác nhau:

Loại Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Mô hình

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

Thử ngay