Bài 13: Làm web với Bootstrap – Chia bố cục và responsive

0

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à responsive

Hướng dẫn chi tiết

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à responsive
Nội dung bài học làm web với Bootstrap – Chia bố cục và responsive

 

Nội dung bài học làm web với Bootstrap – Chia bố cục và responsive

Chia bố cục cho website

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:

+ 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ó responsive

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.

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

<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" >Dropdown</a>
<div class="dropdown-content">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>

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ạ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.

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 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.

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ệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.