Hướng dẫn bootstrap 4 responsive - bootstrap 4 đáp ứng

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
  • Chia bố cục cho website
  • Thanh menu đa cấp có responsive
  • Phần slide trình chiếu
  • 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

Video – Làm web với Bootstrap – Chia bố cục và responsive

Hướng dẫn chi tiết

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Chia bố cục cho website

Thanh menu đa cấp có responsiveNội dung bài học làm web với Bootstrap – Chia bố cục và responsive

Chia bố cục cho website

Thanh menu đa cấp có responsive

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Phần slide trình chiếu

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

Thanh menu đa cấp có responsive

Phần slide trình chiếulink). 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.

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

Dropdown

Action
Another action
Something else here

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.