Dropdown
Class dropdown-content sẽ định thêm css như sau
/*xử lý menu*/
.dropdown{
position: relative;
display: inline-block;
}
.dropdown-content{
display: none; /*ẩn danh sách đổ xuống*/
position: absolute;
z-index: 1;
background-color: #f5f5f5;
}
.dropdown:hover .dropdown-content{
display: block; /*hiện danh sách đổ xuống khi hover vào*/
}
Ngoài ra, để thanh menu trải dài suốt chiều rộng màn hình nhưng nội dung lại được canh giữa. Chúng ta thêm div có class=”container” bên trong thẻ nav, và đặt nội dung của menu vào trong container.div có class=”container” bên trong thẻ nav, và đặt nội dung của menu vào trong container.
Để thanh menu luôn luôn nằm trên cùng khi cuộn trang, chúng ta dùng thêm class=”stick-top” cho thẻ navthêm class=”stick-top” cho thẻ nav
Xem video hướng dẫn nhé.
Phần slide trình chiếu
Để hiểu rõ tính năng, cách hoạt động của slide, các bạn xem thêm bài 4: Card và Carousel- Tạo slideshow trong Bootstrap. Mình sẽ sử dụng code trên getbootstrap luôn nhé. linkbài 4: Card và Carousel- Tạo slideshow trong Bootstrap. Mình sẽ sử dụng code trên getbootstrap luôn nhé. link
Dùng phần carousel slide with indicator.
Phần này chúng ta không cần chỉnh sửa nhiều, chỉ cần thêm đường dẫn hình cho slide. Một website cung cấp hình như trong ví dụ là placeholder.complaceholder.com
Thêm đường dẫn và sửa lại theo kích thước bạn muốn dùng nhé. Đường dẫn hình cho slide này là: //via.placeholder.com/1920×530.
Phần nội dung chính – danh sách sản phẩm theo loại
Code hơi nhiều nên các bạn xem code mẫu cuối bài viết nhé.
Phần nội dung chính sẽ là div container, sau đó là div row cho mỗi loại sản phẩm.div container, sau đó là div row cho mỗi loại sản phẩm.
Mỗi row loại sản phẩm sẽ gồm 1 thẻ h tiêu đề, 1 div chứa thẻ p mô tả loại sản phẩm, và div nhóm 4 sản phẩm. Thêm class mt-5 cho row để tạo margin top cho row.1 thẻ h tiêu đề, 1 div chứa thẻ p mô tả loại sản phẩm, và div nhóm 4 sản phẩm. Thêm class mt-5 cho row để tạo margin top cho row.
Chúng ta sẽ chia lưới Bootstrap bên trong div nhóm sản phẩm. Mỗi cột sẽ dùng Card trong bootstrap để làm những khối sản phẩm nhé. Thêm class mb-3 để tạo margin bottom cho các khối.Card trong bootstrap để làm những khối sản phẩm nhé. Thêm class mb-3 để tạo margin bottom cho các khối.
Xử lý responsive cho phần nội dung
Chúng ta sẽ chia 4 cột đối với màn hình lớn, 2 cột với màn hình máy tính bảng và 1 cột với màn hình nhỏ. Sử dụng lưới Bootstrap như sau: class=”col-md-3 col-sm-6 col-12″.
Nếu bạn còn vướng mắt vấn đề chia lưới Bootstrap và responsive, có thể tham khảo Bài 2: Hệ thống lưới Bootstrap – Grid System.Bài 2: Hệ thống lưới Bootstrap – Grid System.
div row cho mỗi loại sản phẩm chúng ta sẽ thêm padding-left và right lần lượt 5px để khi responsive về 1 cột sẽ đẹp hơn. chúng ta sẽ thêm padding-left và right lần lượt 5px để khi responsive về 1 cột sẽ đẹp hơn.
Như vậy chúng ta đã chia bố cục và responsive cho web. Phần bài sau mình sẽ hướng dẫn cách tùy chỉnh lại các đối tượng và thuộc tính.
Code mẫu: DownloadDownload
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Liên hệ