🟢15-Thiết kế layout website bằng Bootstrap

Trong bài học ngày hôm nay, chúng ta sẽ thực hành bố cục giao diện website sử dụng thư viện Bootstrap đã được học ở bài học trước.

Ở các buổi thực hành trước, chúng ta đã thực hiện thiết kế giao diện layout website bằng cách:

• Sử dụng các thẻ table

• Sử dụng khối div kết hợp với css

Trong bài hôm nay, chúng ta sẽ tìm hiểu thêm một cách để thiết kế layout sử dụng thư viện bootstrap.

Yêu cầu bài thực hành

Sử dụng thư viện bootstrap để bố cục layout website sau:

Các bước thực hiện

Để thiết kế layout website sử dụng bootstrap, bạn cần phải thực hiện các bước như sau:

Bước 1: Tạo ra một project mới và cấu hình thư viện bootstrap bằng một trong hai cách đã học ở bài trước.

Bước 2: Phân tích bố cục layout tổng thể của website.

Ở bước này, bạn cần xác định được diện tích mà các khối (block) chiếm bao nhiêu phần trong tổng thể trang web.

Sau khi nhìn tổng thể giao diện trang web và các thành phần tương ứng, bạn có thể xác định các thành phần của bootstrap có thể sử dụng:

• Navs component: Cho phép chúng ta tạo ra thanh menu cho website đơn giản

• Col* class: Sử dụng các class của hệ thống lưới để phân chia các khoảng diện tích của từng thành phần.

Bước 3: Phân tách bố cục chi tiết và thêm các thành phần vào các khối layout tương ứng

Trong phần chi tiết này, bạn có thể sử dụng các component có sẵn của bootstrap để hoàn thiện chi tiết các bố cục đã được chia từ bước 2.

• Carosuel component: Cho phép tạo ra slide ảnh đơn giản

• Card component: Cho phép tạo ra các block dạng card để giới thiệu sản phẩm

Tham khảo: