Xây dựng Layout cơ bản với Bootstrap

Tìm hiểu về hệ thống lưới (grid) gồm các hàng và cột để xây dựng nên giao diện cơ bản, cách tạo hàng, cột, định dạng cột của một layout

Phần này chúng ta tìm hiểu một số class:

breakpoint sm md lg xl
.container Lớp tạo phần tử chứa layout
.row Lớp tạo hàng của lưới
.col Lớp tạo cột của lưới
.col-* * = (1 - 12), lớp tạo cột có độ rộng cụ thể như .col-1.col-2 ... hiệu lực cho tất cả các breakpoint
.col-{breakpoint}-* * = (1 - 12) Lớp tạo cột có độ rộng cụ thể như .col-sm-1.col-lg-2 ... hiệu lực với breakpoint cụ thể
.col-{breakpoint}-auto .col-auto Cột có độ rộng điều chỉnh theo nội dung nó chứa
.align-items{-breakpoint}-* Thiết lập thuộc tính align-items của flexbox
.align-content{-breakpoint}-* Thiết lập thuộc tính justify-content của flexbox
.justify-content{-breakpoint}-* Thiết lập thuộc tính align-content của flexbox
.align-self{-breakpoint}-* Thiết lập thuộc tính align-self của flexbox

Phần tử chứa để xây dựng bố cục layout - các breakpoint

Trong Bootstrap phần tử gốc cơ bản để xây dựng layout là class container và container-fluid, mục đích của nó là tạo ra vùng chữ nhật để chứa các phần tử khác. Tạo ra một phần tử gốc layout như sau:

<div class="container">
    <!--Code HTML-->
</div>

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

Màn hình hiện thị tác động đến container được chia thành các loại:

Chiều rộng màn hình Độ rộng lớn của container Ký hiệu nhận biết
<576px (rất nhỏ) <576px xs
≥576px và < 768 (nhỏ) 540px sm
≥768px và < 992px (trung bình) 720px md
≥992px và < 1200px (lớn) 960px lg
≥1200px 1140px xl

Ví dụ, một phần tử sử dụng container khi ở màn hình có độ rộng 840px, nhìn vào bảng trên nó thuộc md, nó sẽ hiện thị là một cái hộp chữ nhật có độ rộng lớn nhất là 720px (nghĩa là rộng có thể thay đổi từ 0px đến 720px tùy thuộc vào không gian cho phép container mở rộng)

Container chia theo các điểm dừng, đó là các breakpoint : smmdlgxl

Trong trường hợp sử dụng container-fluid thì hộp layout tạo ra luôn mở rộng tối đa có thể dù trên loại màn hình nào.

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

Bootstrap sử dụng container và các lớp về dòng (row), cột (colunm) phối hợp với nhau để tạo ra một hệ thống lưới giao diện. Trước tiên cần biết là những phần tử hàng, cột sử dụng kỹ thuật CSS flexbox để xây dựng.

Lưới layout được tạo ra từ các hàng bằng cách sử dụng class .row, trong hàng các phần tử con tạo thành cột (hàng) bằng cách sử dụng class có tiền tố là .col-.col-sm-.col-md-.col-lg-.col-xl-

Các lớp này được chia ra với tiền tố như vậy để ám chỉ nó có hiệu lực đối với những màn hình cụ thể như bảng sau:

Màn hình rất nhỏ
<576px
Màn hình nhỏ
≥576px
Trung bình
≥768px
Lớn
≥992px
Rất lớn
≥1200px
.col- .col-sm- .col-md- .col-lg- .col-xl-
Một hàng có độ rộng chia làm 12 phần, từ đó mỗi tiền tố có 12 lớp, ví dụ từ .col-sm-1 đến .col-sm-12, nếu sử dụng class .col-sm-2 có nghĩa là cột đó có động rộng chiếu 2/12 của độ rộng cột
Khoảng cách giữa các cột là 30px (15px mỗi bên), nếu muốn thiết lập về 0 sử dụng thêm lớp .

Chia hàng thành nhiều cột với .col

Do .col có thiết lập flex-grow: 1 nên nó được dùng nếu muốn chia một hàng thành nhiều cột (bằng số phần tử sử dụng .col) có độ rộng bằng nhau, ví dụ:

<div class="container">
    <div class="row">
        <div class="col bg-danger">
            Cột 1
        </div>
        <div class="col bg-info">
            Cột 2
        </div>
        <div class="col bg-warning">
            Cột 3
        </div>
    </div>
</div>

Cột 1

Cột 2

Cột 3

Nếu muốn thiết lập độ rộng riêng cho một cột nào đó thì sử dụng các phần tử từ col-1 ... col-12, ví dụ nếu sử dụng col-6 nó sẽ chiếm 6 phần của hàng (hàng chia làm 12 phần).

Ví dụ sau cột số 2 chiếm 6/12 độ rộng hàng, còn lại 6 phần chia đều cho 3 phần tử còn lại

<div class="container">
    <div class="row">
        <div class="col bg-danger">
            Cột 1
        </div>
        <div class="col-6 bg-info">
            Cột 2 chiếm 6/12 cột
        </div>
        <div class="col bg-warning">
            Cột 3
        </div>
        <div class="col bg-danger">
            Cột 4
        </div>
    </div>
</div>

Cột 1

Cột 2 chiếm 6/12 cột

Cột 3

Cột 4

Class .col.col-1 ... .col-12 có hiệu lực đối với tất cả các breakpoint

Độ rộng các cột căn cứ theo nội dung của cột

Các phần tử dùng .col như trên do ảnh hưởng của flexbox độ rộng của nó được thiết lập không phụ thuộc vào nội dung nó chứa. Nếu phần tử cột nào đó muốn trở lại điều chỉnh độ rộng theo nội dung thì sử dụng các class col-{breakpoint}-auto: như .col-auto.col-sm-auto ...

<div class="container">
    <div class="row">
        <div class="col bg-danger">
            Cột 1
        </div>
        <div class="col-auto bg-info">
            Cột 2, độ rộng theo nội dung
        </div>
        <div class="col bg-warning">
            Cột 3
        </div>
        <div class="col bg-danger">
            Cột 4
        </div>
    </div>
</div>

Cột 1

Cột 2, độ rộng theo nội dung

Cột 3

Cột 4

Pha trộn nhiều breakpoint cho cột

Để đảm bảo tính responsive, căn cứ theo tính chất cascading của CSS, một cột có thể sử dụng nhiều loại class, từ đó mà tùy theo loại màn hình mà class nào có hiệu lực. Ví dụ sau, 2 cột khi ở màn hình nhỏ (breakpoint sm) thì độ rộng cột bằng 1/2 độ rộng hàng, nhưng khi ở màn hình độ rộng đó lại là 3/12 độ rộng hàng

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3 bg-danger">
            Cột 1
        </div>
        <div class="col-sm-6 col-md-3 bg-primary">
            Cột 2
        </div>

    </div>
</div>

Cột 1

Cột 2

Align các cột

Do .row sử dụng kỹ thuật flexbox nên có thể căn chỉnh các cột trong nó căn về phía nào đó mong muốn của hàng giống như trình bày trong phần flexbox

Thiết lập ở cấp độ hàng (phần tử sử dụng .row) có các lớp điều chỉnh thuộc tính flexbox:

  • .align-items{-breakpoint}-{start|end|center|baseline|stretch}
  • .align-content{-breakpoint}-{start|end|center|beween|around|stretch}
  • .justify-content{-breakpoint}-{start|end|center|beween|around}
<div class="container">
    <div class="row align-items-md-end bg-success" style="height: 100px">
        <div class="col-sm-6 col-md-3 bg-danger">
            Cột 1
        </div>
        <div class="col-sm-6 col-md-3 bg-primary">
            Cột 2
        </div>

    </div>
</div>

Cột 1

Cột 2

Align riêng từng cột

Các lớp thiết lập thuộc tính flexbox cho riêng từng cột (phần tử) là:

  • .align-self{-breakpoint}-{auto|start|end|center|baseline|stretch}
<div class="container">
    <div class="row bg-success" style="height: 100px">
        <div class="col-sm-6 col-md-3 bg-danger align-self-sm-start">
            Cột 1
        </div>
        <div class="col-sm-6 col-md-3 bg-primary  align-self-sm-center">
            Cột 2
        </div>
        <div class="col-sm-6 col-md-3 bg-danger  align-self-sm-end">
            Cột 3
        </div>
    </div>
</div>

Cột 1

Cột 2

Cột 3

Ngoài ra xem lại phần CSS flex để áp dụng các thiết lập phức tạp hơn cho lưới