Dropdown
Lưu ý: mình chưa hướng dẫn cắt htmll và css từ file thiết kết photoshop nên phần bài tập này sẽ làm theo một website mẫu.
/*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*/
}
Nội dung bài học làm web với Bootstrap – Chia bố cục và responsiveNội dung bài học làm web với Bootstrap – Chia bố cục và responsive div có class=”container” bên trong thẻ nav, và đặt nội dung của menu vào trong container.
Mình sẽ làm trang chủ của website bán hàng. Cấu trúc của trang web này như sau:thêm class=”stick-top” cho thẻ nav
+ Thanh menu đa cấp có tính năng responsive.
Phần slide trình chiếu
Phần nội dung chính – danh sách sản phẩm theo loạibài 4: Card và Carousel- Tạo slideshow trong Bootstrap. Mình sẽ sử dụng code trên getbootstrap luôn nhé. link
Xử lý responsive cho phần nội dung
Lưu ý: mình chưa hướng dẫn cắt htmll và css từ file thiết kết photoshop nên phần bài tập này sẽ làm theo một website mẫu.placeholder.com
Nội dung bài học làm web với Bootstrap – Chia bố cục và responsiveNội dung bài học làm web với Bootstrap – Chia bố cục và responsive
Phần nội dung chính – danh sách sản phẩm theo loại
Xử lý responsive cho phần nội dung
Lưu ý: mình chưa hướng dẫn cắt htmll và css từ file thiết kết photoshop nên phần bài tập này sẽ làm theo một website mẫu.div container, sau đó là div row cho mỗi loại sản phẩm.
Nội dung bài học làm web với Bootstrap – Chia bố cục và responsiveNội dung bài học làm web với Bootstrap – Chia bố cục và responsive 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.
Mình sẽ làm trang chủ của website bán hàng. Cấu trúc của trang web này như sau: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
Lưu ý: mình chưa hướng dẫn cắt htmll và css từ file thiết kết photoshop nên phần bài tập này sẽ làm theo một website mẫu.
Nội dung bài học làm web với Bootstrap – Chia bố cục và responsiveNội dung bài học làm web với Bootstrap – Chia bố cục và responsive Bài 2: Hệ thống lưới Bootstrap – Grid System.
Mình sẽ làm trang chủ của website bán hàng. Cấu trúc của trang web này như sau: 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.
+ Thanh menu đa cấp có tính năng responsive.
+ Slide trình chiếu hình ảnhDownload
+ Nội dung danh sách sản phẩm.comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Các bạn có thể sử dụng code có sẵn của Bootstrap [link]. Hoặc tự code như hướng dẫn ở bài 10: Navbar – tạo thanh menu đa cấp với hiệu ứng hover và responsive.