LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP

MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng

 Thiết kế bảng
 Thiết kế form
 Tổ chức giao diện với tabs
 Sử dụng hộp thoại

PHẦN I

Bài 1 (2 điểm): Tạo bảng

Thiết kế bảng lương cầu thủ như hình sau

Hướng dẫn:

 Sử dụng panel kết hợp với bảng

WEB207 – FRONT-END FRAMEWORKS TRANG 1

 LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP

 Bổ sung icon vào tiêu đề của panel

 Định nghĩa lại css cho <thead>

Bài 2 (2 điểm): Thiết kế form

Thiết kế form nhập lương cầu thủ như hình sau

WEB207 – FRONT-END FRAMEWORKS TRANG 2

 LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP

Hướng dẫn:

 Kết hợp form với panel

 .panel-body chứa form

o Sử dụng lưới để chia mỗi hàng 2 phần tử (6 cột)

WEB207 – FRONT-END FRAMEWORKS TRANG 3

 LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP

o 2 hàng cuối (ghi chú và button) chiếm 12 cột

 Điểm thêm icon cho tiêu đề panel và các button

PHẦN II
Bài 3 (2 điểm): Thiết kế tabs
Thiết kế giao diện quản lý lương cầu thủ như hình sau

WEB207 – FRONT-END FRAMEWORKS TRANG 4

 LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP

Hướng dẫn:

 Vào bootstrap lấy mã tabs và xóa bớt chỉ còn 2 tabs

WEB207 – FRONT-END FRAMEWORKS TRANG 5

 LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP

 Chép bảng và form đã thiết kế ở bài 1 và bài 2 vào vùng nội dung tabs phù
hợp.
 Thêm icon vào các tiêu đề tab
 Sử dụng .input-group và .input-group-addon để kèm thêm đơn vị tiền tệ và
số lẻ cho các ô nhập.

WEB207 – FRONT-END FRAMEWORKS TRANG 6

 LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP
Bài 4 (2 điểm): Thiết kế hộp thoại

Hướng dẫn:

 Vào bootstrap chép mã Modal ở phần (Examples/Live demo)

 Chép form đã thiết kế bài 2 vào .modal-body
 Chuyển 2 button xuống vùng .modal-footer và thêm thuộc tính data-
dismiss=”modal” vào nút Hủy.
 Bỏ nhãn của các điều khiển
 Thêm thuộc tính placeholder vào các điều khiển
 Thay đổi tiêu đề hộp thoại ở vùng .model-title
 Chạy và nhấp vào nút trên trang web

Bài 5 (2 điểm)
Giảng viên cho thêm

WEB207 – FRONT-END FRAMEWORKS TRANG 7

 LAB 2: THIẾT KẾ FORM VỚI BOOSTRAP
Chú ý:

 Phần I và Phần II chỉ áp dụng cho dạy tích hợp. Sinh viên làm phần 1 và
phần 2 theo 2 bài khác nhau tương ứng với 2 phần lý thuyết đã dạy trong
bài học.
 Nếu giảng dạy theo phương pháp truyền thống thì sinh viên phải thực hiện
tất cả các bài trong một buổi.

WEB207 – FRONT-END FRAMEWORKS TRANG 8