By GokiSoft.com| 19:31 12/10/2020|
Tài Liệu Bootstrap

Bootstrap 4 Containers

Containers

Từ bài trước bạn biết rằng Bootstrap yêu cầu một yếu tố container để bọc nội dung trang web.

Containers được sử dụng để đệm nội dung bên trong chúng và có hai class container có sẵn:

  1. Class .container cung cấp một container chiều rộng cố định, luôn cách 2 bên màn hình một đoạn nhỏ cố định.
  2. Class .container-fluid cung cấp một container chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của màn hình.
  3. .container
    .container-fluid





    Fixed Container

    Dùng class .container để tạo responsive fixed-width container.

    Chú ý chiều rộng (max-width) sẽ thay đổi tùy thuộc kích thước màn hình:

    Extra small
    <576px
    Small
    ≥576px
    Medium
    ≥768px
    Large
    ≥992px
    Extra large
    ≥1200px
    max-width100%540px720px960px1140px


<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Fluid Container

Dùng class .container-fluid để tạo full width container, nó luôn trải dài toàn bộ chiều rộng của màn hình(width:100%):



<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Container Padding

Theo mặc định, containers có phần padding left và right 15px, không có phần padding top hoặc bottom. Vì thế, chúng ta thường sử dụng thêm các khoảng cách, chẳng hạn như thêm padding và margins để làm cho chúng trông đẹp hơn. Ví dụ, .pt-3 có nghĩa "add top padding 16px":

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

Container Border and Color

Các tiện ích khác, chẳng hạn như border và color, cũng thường được sử dụng cùng với các container:

Ví dụ

My First Bootstrap Page

This container has a border and some extra padding and margins.

My First Bootstrap Page

This container has a dark background color and a white text, and some extra padding and margins.

My First Bootstrap Page

This container has a blue background color and a white text, and some extra padding and margins.


Responsive Containers

Bạn có thể sử dụng các class .container-sm|md|lg|xl để tạo responsive containers.

max-width của container sẽ thay đổi tùy thuộc kích thước màn hình:

ClassExtra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
.container-sm100%540px720px960px1140px
.container-md100%100%720px960px1140px
.container-lg100%100%100%960px1140px
.container-xl100%100%100%100%1140px

Ví dụ

<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>



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó