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

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

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:

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 : sm, md, lg, xl

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:

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>

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>

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>

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>

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>

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>

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