Responsive Design với Bootstrap Grid

Trong bài học này, chúng ta sẽ tìm hiểu cách Bootstrap hỗ trợ thiết kế giao diện web responsive, giúp trang web hiển thị tốt trên nhiều kích thước màn hình khác nhau. Chúng ta cũng sẽ khám phá cách sử dụng các class .col-sm-, .col-md-, .col-lg-, .col-xl- để tối ưu hóa bố cục cho từng thiết bị.

1. Responsive Design là gì?

Responsive Design (thiết kế web đáp ứng) là cách thiết kế giao diện web linh hoạt, giúp trang web tự động thay đổi bố cục dựa trên kích thước màn hình của thiết bị (điện thoại, tablet, laptop, desktop).

Tại sao cần Responsive Design?

• Trải nghiệm người dùng tốt hơn.
• Tối ưu hiển thị trên mọi thiết bị.
• SEO tốt hơn (Google ưu tiên trang web responsive).

2. Bootstrap hỗ trợ Responsive Design như thế nào?

Bootstrap sử dụng hệ thống Grid System 12 cột, kết hợp với các class breakpoint giúp điều chỉnh giao diện trên từng thiết bị:

Ví dụ về Bootstrap Grid Responsive

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 bg-primary text-white p-3">
            Cột 1
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-success text-white p-3">
            Cột 2
        </div>
        <div class="col-sm-12 col-md-4 col-lg-6 bg-warning text-dark p-3">
            Cột 3
        </div>
    </div>
</div>

Giải thích:

• Ở màn hình nhỏ (<576px), mỗi cột chiếm toàn bộ hàng.
• Trên tablet (≥768px), mỗi cột chiếm 1/3 hàng.
• Trên màn hình lớn (≥992px), Cột 3 chiếm nửa hàng, hai cột còn lại chia nhau phần còn lại.

3. Ẩn/hiện phần tử trên từng thiết bị

Bootstrap cung cấp các lớp d-* để kiểm soát hiển thị phần tử trên từng thiết bị.

Ví dụ Ẩn/Hiện phần tử

<p class="d-none d-md-block">Hiện trên màn hình từ `md` trở lên.</p>
<p class="d-sm-none d-lg-block">Ẩn trên điện thoại, hiện trên laptop.</p>

Giải thích:

• Dòng 1 chỉ hiển thị trên tablet/laptop/máy tính bàn.
• Dòng 2 bị ẩn trên điện thoại, nhưng hiển thị trên laptop trở lên.

4. Bài tập thực hành

Yêu cầu

Hãy thiết kế một giao diện trang web responsive, sử dụng Bootstrap Grid để bố cục linh hoạt trên từng thiết bị.

Gợi ý bài tập

1. Tạo một navbar có ba phần: Logo, Menu, Nút Đăng nhập.
2. Tạo một section giới thiệu, hiển thị 2 cột trên mobile, 3 cột trên tablet, 4 cột trên desktop.
3. Sử dụng các lớp .d-none để ẩn một số phần tử trên từng thiết bị.

5. Kết luận

• Bạn đã học cách Bootstrap hỗ trợ Responsive Design.
• Hiểu cách sử dụng class col-sm-, col-md-, col-lg- để điều chỉnh bố cục*.
• Biết cách ẩn/hiện phần tử trên từng kích thước màn hình.
• Hãy luyện tập để thành thạo Bootstrap Grid System và Responsive Design!