LAB 1: GIỚI THIỆU BOOTSTRAP

Tạo trang web như sau:

Chuẩn bị
- Tạo folder MaSV-HoTen-Lab1
- Giải nén file Web207-Lab1-Images.zip vào folder vừa tạo trên

1
Bài 1: Tổ chức layout
- Trong folder vừa tạo, tạo file bai1.html
- Vào https://getbootstrap.com/  Docs  Introduction  nhắp Copy để chép code mẫu
của thư viện (hình dưới) . Xong Paste vào file bai1.html

- Nhúng boostrap vào trang : Xem hình dưới để thực hiện: Nhắp Download rồi cuộn xuống
mục CDN via jsDelivr  Nhắ[ Copy để chép tag link, script. Xong Paste vào tag head
của trang bai1.html

- Xóa code đang có trong body và code lại

2
- Định dạng CSS

- Xem trang web trên trình duyệt

Bài 2: Thiết kế header . footer, nav

Chép bai1.html thành bai2.html
1. Thiết kế header

- Xóa text trong tag header và lại:

- Định dạng header

3
.container > header .logo {position: absolute; bottom: 20px; left:10px}
.container > header .logo h1 {
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 50px; color:white; letter-spacing: 1px;
text-shadow: 3px 3px 2px darkorange; border-bottom: dotted 1px white;}
.container > header .logo h5 {font-variant: small-caps; color: yellow; font-size: 21px;}
.container > header img { height: 180px;}

2 Thiết kế footer
- Code trong tag footer

- Định dạng:
.container > footer p {line-height: 50px; }
3. Thiết kế nav

- Vào https://getbootstrap.com/docs/5.3/components/navbar/  chép code mẫu navbar và

đặt vào thẻ <nav>

- Xóa tag form và tag li chứa Disabled

- Thêm/Chỉnh text các mục của menu như hình mẫu ở trên (Trang chủ, Giới thiệu. Liên
hệ…)

4
Bài 3: Thiết kế giỏ hàng, form search, chủng loại hàng
- Chép file bai2.html thành bai3.html

1. Thiết kế giỏ hàng

- Chọn component Card theo địa chỉ https://getbootstrap.com/docs/5.3/components/card/ . Cuộn

xuống phần Header and Footer như hình dưới và copy code. Xong Paste vào tag aside

- Chỉnh chữ Featured thành Giỏ hàng

- Trong card-body, xóa tag h5, p, a rồi vào địa chỉ
https://getbootstrap.com/docs/5.3/components/list-group/ Copy code List Group (như hình dưới)
xong Paste vào card-body

- Chỉnh code để được như sau

5
2. Thiết kế ô tìm kiếm

Ở sau code giỏ hàng, sử dụng thành phần card và bên trong có form tìm kiếm với code sau:

3. Thiết kế loại hàng

Ở sau card chứa form tìm kiếm, dùng tiếp thành phần card bên trong là list-group để hiện các
chủng loại như sau

6
Bài 4: Hiện sản phẩm
- Cho dữ liệu gồm tên sản phẩm, giá, hình
Tên Giá Hình
Samsung Galaxy Tab A 6.990.000 VNĐ 1.png
Máy tính bảng Mobell Tab 10 2.750.000 VNĐ 2.png
Điện thoại iPhone 12 Plus 15.990.000 VNĐ 3.png
Điện thoại BlackBerry KEY2 15.500.000 VNĐ 4.png
Điện thoại Realme 5 Pro 6.990.000 VNĐ 5.png
Điện thoại Nokia 3.2 32GB 3.290.000 VNĐ 6.png

- Hãy thiết kế nội dung trong tag <article> như hình dưới

- Chép bai3.html thành bai4.html

- Trong tag article, code để hiện 2 dòng, mỗi dòng 3 cột

7
- Copy code của thành phần card (card có header, footer) rồi Paste vào thay thế cho chữ
SP1. Sau đó thay thế test để được như sau

- Thực hiện tương tự cho SP2, SP3, SP4. SP5. SP6

Bài 5 Làm thêm

Làm thêm cho đẹp (nếu muốn): Chỉnh màu nền, màu chữ, font size, font chữ, hình trong
header, footer, title, icon cho các item, thêm javascript nếu muốn…