LAB 3 MÔN FRONTEND FRAMEWORKS

Bài 1 : Sử dụng Carousel

Chuẩn Bị

 Tạo folder <MaSV_TênSV>_Lab3

 Chép tất cả mọi thứ trong folder Web207-Lab3_TaiNguyen.zip vào folder mới tạo
1. Tạo file
Chép file layout.html thành bai1.html và chỉnh thông tin trong footer thành thông tin của
mình : MaSV , Họ tên, Email
2. Sử dụng alert tạo box thông báo
- Trong tag article, code như sau:

- Định dạng thêm và xem kết quả

3. Code tạo carousel

a. Vào getbootstrap.com/components/ => Carousel => Cuộn xuống Indicators => nhắp Copy

b. Paste code mẫu vừa chép vào phía sau div alert ở trên
WEB207 – FRONT-END FRAMEWORKS Trang 1
c. Hiệu chỉnh lại mã theo hướng dẫn sau (địa chỉ hình, mô tả)

Xem kết quả

e. Ngoài 3 slide đã có, hãy bổ sung 1 slide nữa với hình và tên sản phẩm bạn tự tìm
d. Thêm icon tùy ý vào trước chữ Chủng loại, Tìm Kiếm, Giỏ hàng (trong cột phải)

WEB207 – FRONT-END FRAMEWORKS Trang 2

Bài 2 : Thiết kế accordion
- Chép file bai1.html thành bai2.html
- Copy code mẫu: Vào https://getbootstrap.com/docs/5.3/components/accordion/ Trong mục
Example nhắp Copy

- Xóa 3 tag div card bên trong tag aside xong thì Paste vào tag asidse code mẫu đã copy
- Chỉnh code
+ Chỉnh chữ Accordion Item #1 thành Chủng loại
+ Chỉnh chữ Accordion Item #2 thành Nhà sản xuất
+ Chỉnh chữ Accordion Item #3 thành Hàng đặc biệt
- Ra trang web, nhắp các nhãn xem thử (phải ra nội dung tương ứng)
- Thay nội dung tương ứng với nhãn CHỦNG LOẠI thành

- Xem thử sẽ thấy như hình dưới, định dạng thêm cho đẹp

- Thay nội dung tương ứng với nhãn NHÀ SẢN XUẤT thành

WEB207 – FRONT-END FRAMEWORKS Trang 3

- Thay nội dung tương ứng với nhãn HÀNG ĐẶC BIỆT thành

- Thêm các icon vào 3 nhãn (card-heading, card-checklist, card-list ) – xem mẫu hình dưới
- Chỉnh định dạng thêm và xem kết quả

Bài 3: Sử dụng thumbnail, grid, list-group, badge, button

1. Tạo file
Chép file bai1.html thành trang bai3.html
2. Code để được như hình:
Xóa code bên trong tag article và chi tiết sản phẩm
WEB207 – FRONT-END FRAMEWORKS Trang 4
- Trong div col-4: chèn hình images/pd-0.jpg

- Trong div col-8, code tạo list group chứa tên sản phẩm, giá , màu sắc, khuyến mãi, các button

- Trong div có class py-2 , hiện 3 pd-1.jpg, pd-2.jpg, pd-3.jpg

- Trong div có class là p-2 hiện các text như hình

Bài 4: Tạo trang responsive

Tạo file bai5.html và thực hiện 1 trang layout tùy ý. Yêu cầu phải có response cho các loại
thiết bị khác nhau. Nội dung tùy ý sáng tạo

WEB207 – FRONT-END FRAMEWORKS Trang 5