Mục tiêu

Tạo layout trong Bootstrap.

Sử dụng các thành phần của Bootstrap để tạo bố cục cơ bản cho một trang web.

Mô tả- Tạo layout trong Bootstrap

Hãy sử dụng các thành phần có sẵn của bootstrap để tạo bố cục và nội dung trang web như sau:

Tạo layout trong Bootstrap

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

Bước 1: Tạo file layout.html

Phân chia phần body trang web như sau

Code tham khảo:

Bước 2: Thiết kế header

Thêm phần mã sau vào <header>

Bước 3: Thiết kế header

Chọn hình có kích thước phù hợp và đẩy sang  phải với class là .pull-right đã được định nghĩa trong bootstrap

Định dạng cho class .shopping-mall bằng cách bổ sung vào poly.css mã như sau:

Bước 4: Thiết kế footer

Thêm một panel vào <footer>

Bước 5: Thiết kế <nav>

Truy cập vào https://getbootstrap.com/docs/3.3/components/#navbar. Copy đoạn mã tạo nav vào thẻ <nav>. Sau đó làm theo hướng dẫn sau:

– Đổi .navbar-default thành navbar-inverse

– Xoá bỏ thẻ form

– Hiệu chỉnh nội dung của menu như hình sau

– Bổ sung các icon vào các mục menu như hình trên. Để bổ sung menu bạn cần thêm <span class = ?> sau đó vào https://getbootstrap.com/docs/3.3/components/#glyphicons lấy các icon phù hợp.

Bước 6: Thiết kế <aside>

Tạo layout trong Bootstrap

Thiết kế giỏ hàng. Thêm đoạn mã sau vào phần <aside>

Chia .panel-body thành 2 phần. Trong đó ảnh chiếm 5 cột còn <ul> chiếm 7 cột. Bổ sung vào file poly.css để định dạng giỏ hàng thông qua .poly-cart như sau:

Thiết kế ô tìm kiếm. Sử dụng panel để thiết kế ô tìm kiếm với mã như sau:

Thiết kế loại hàng. Sử dụng list-group kết hợp với panel để thiết kế danh mục loại hàng với mã như sau:

Bước 7: Thiết kế <article>

Tạo layout trong Bootstrap

Yêu cầu: mỗi sản phẩm gồm hình, tên và giá. Mỗi hàng 3 sản phẩm.

Hướng dẫn:

Sử dụng lưới để chia (mỗi sản phẩm 4 cột)

Sử dụng panel để thiết kế sản phẩm

  • .panel-heading: tên sản phẩm
  • .panel-body: hình ảnh
  • .panel-footer: đơn giá

Bổ sung .poly-prod để định dạng cho mỗi phẩm

Bước 8: Mở file laout.html bằng trình duyệt xem kết quả

Trong phần này bạn đã luyện tập sử dụng các phần tử của bootstrap để tạo bố cục và đưa từng nội dung vào trong trang web.

Ứng dụng mẫu có thể xem ở đây: http://demo.codegym.vn/web/15/layout-bootstrap/

Trên đây CodeGym đã cùng với bạn thực hành tạo layout trong Bootstrap . Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trêt CodeGymX để cùng nhau luyện tập nhé!


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.