Hướng dẫn responsive với bootstrap
 Show Chúng ta đã đến với những phần cuối cùng của khóa học Bootstrap. Trong bài học này, chúng ta sẽ thực hành một bài tập lớn, làm web với Bootstrap. Chúng ta sẻ thực hiện phần đầu tiên là chia bố cục và responsive
Video – Làm web với Bootstrap – Chia bố cục và responsiveHướng dẫn chi tiết"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn 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. Chia bố cục cho websiteMì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: "Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn + Thanh menu đa cấp có tính năng responsive. + Slide trình chiếu hình ảnh + Nội dung danh sách sản phẩm. Thanh menu đa cấp có responsiveCá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. Nhìn chung, các bạn sử dụng navbar làm sẵn của Bootstrap. Chúng ta sẽ tùy chỉnh cho dropdown trong navbar như sau: Phần html của dropdown: chúng ta sẽ bỏ class=”dropdown-menu” và thay bằng class tự định nghĩa dropdown-content 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. Để 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ẻ 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é. 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.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à: http://via.placeholder.com/1920×530. Phần nội dung chính – danh sách sản phẩm theo loạiCode 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. 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. 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. Xử lý responsive cho phần nội dungChú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. 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. 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: Download 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. Liên hệ |
