Bootstrap: container

Tìm gọi về hệ thống lưới (grid) có các hàng và cột để xây dựng nên đồ họa cơ bạn dạng, giải pháp tạo nên sản phẩm, cột, định dạng cột của một layout


Phần này họ tìm hiểu một vài class:

breakpoint sm md lg xl
.container Lớp chế tạo ra phần tử đựng layout
.row Lớp sinh sản mặt hàng của lưới
.col Lớp tạo ra cột của lưới
.col-* * = (1 - 12), lớp chế tác cột gồm phạm vi ví dụ như .col-1, .col-2 ... hiệu lực thực thi mang lại toàn bộ các breakpoint
.col-breakpoint-* * = (1 - 12) Lớp chế tạo cột tất cả phạm vi ví dụ nhỏng .col-sm-1, .col-lg-2 ... hiệu lực hiện hành cùng với breakpoint nỗ lực thể
.col-breakpoint-tự động .col-auto Cột bao gồm độ rộng điều chỉnh theo ngôn từ nó chứa
.align-items-breakpoint-* Thiết lập trực thuộc tính align-items của flexbox
.align-content-breakpoint-* Thiết lập thuộc tính justify-nội dung của flexbox
.justify-content-breakpoint-* Thiết lập trực thuộc tính align-nội dung của flexbox
.align-self-breakpoint-* Thiết lập trực thuộc tính align-self của flexbox

Phần tử chứa để chế tạo bố cục tổng quan layout - các breakpoint

Trong Bootstrap thành phần gốc cơ bạn dạng nhằm xây cất layout là class container với container-fluid, mục tiêu của nó là tạo ra vùng chữ nhật để đựng các thành phần không giống. Tạo ra 1 phần tử nơi bắt đầu layout như sau:


Mục đích sử dụng class container nhằm tạo nên một vùng chữ nhật mà chiều rộng của nó cấu hình thiết lập phụ thuộc vào vào kích cỡ màn hình hiển thị hiện lên.

Bạn đang xem: Bootstrap: container

Màn hình hiện thị lên tác động ảnh hưởng mang lại container được tạo thành các loại:

Chiều rộng màn hình hiển thị Độ rộng lớn của container Ký hiệu nhận ra
xs
≥576px và sm
≥768px cùng md
≥992px với lg
≥1200px 1140px xl

ví dụ như, một phần tử áp dụng container Khi sinh sống screen gồm độ rộng 840px, chú ý vào bảng bên trên nó ở trong md, nó đã hiện thị lên là một chiếc hộp chữ nhật bao gồm phạm vi lớn số 1 là 720px (tức là rộng hoàn toàn có thể chuyển đổi từ bỏ 0px mang đến 720px tùy trực thuộc vào không khí chất nhận được container mnghỉ ngơi rộng)

Container chia theo những trạm dừng, đó là những breakpoint : sm, md, lg, xl

Trong trường hợp sử dụng container-fluid thì vỏ hộp layout tạo thành luôn mở rộng buổi tối nhiều có thể mặc dù trên một số loại screen như thế nào.

Xem thêm: Garen Mùa 11: Bảng Ngọc Bổ Trợ, Cách Lên Đồ Garen Tốc Chiến Mới Nhất

Hệ thống lưới (grid) trong Bootstrap

Bootstrap thực hiện container cùng các lớp về loại (row), cột (colunm) pân hận hợp với nhau nhằm tạo thành một khối hệ thống lưới bối cảnh. Trước hết nên biết là phần đa phần tử sản phẩm, cột áp dụng kỹ thuật CSS flexbox nhằm tạo.

Lưới layout được tạo ra tự các hàng bằng phương pháp thực hiện class .row, vào sản phẩm những thành phần con sinh sản thành cột (hàng) bằng cách áp dụng class bao gồm tiền tố là .col-, .col-sm-, .col-md-, .col-lg-, .col-xl-

Các lớp này được chia ra cùng với tiền tố như vậy để ám chỉ nó bao gồm hiệu lực hiện hành so với đa số màn hình hiển thị rõ ràng nhỏng bảng sau:

Màn hình khôn cùng nhỏ tuổi Màn hình nhỏ dại ≥576px Trung bình ≥768px Lớn ≥992px Rất Khủng ≥1200px
.col- .col-sm- .col-md- .col-lg- .col-xl-
Một sản phẩm gồm độ rộng chia làm 12 phần, từ đó mỗi chi phí tố có 12 lớp, ví dụ tự .col-sm-1 mang đến .col-sm-12, giả dụ thực hiện class .col-sm-2 tức là cột đó bao gồm rượu cồn rộng chiếu 2/12 của độ rộng cột
Khoảng giải pháp giữa các cột là 30px (15px từng bên), nếu như muốn tùy chỉnh thiết lập về 0 áp dụng thêm lớp .

Chia sản phẩm thành nhiều cột cùng với .col

Do .col bao gồm cấu hình thiết lập flex-grow: 1 nên nó được dùng nếu còn muốn phân chia một hàng thành các cột (thông qua số thành phần áp dụng .col) tất cả độ rộng đều nhau, ví dụ: