TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
GIÁO TRÌNH
THIẾT KẾ LAYOUT WEB VỚI CSS FRAMEWORK
(Lưu hành nội bộ)
Hà Nội năm 2025
1
MỤC LỤC
BÀI 1. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK ................................. 2
1. Giới thiệu Bootstrap Framework................................................................... 2
2. Download và sử dụng Bootstrap ................................................................... 4
BÀI 2: CSS TRONG BOOTSTRAP .................................................................. 10
1. Hệ thống lưới ............................................................................................... 10
2. Định dạng (typography) .............................................................................. 18
3. Tạo bảng biểu .............................................................................................. 25
4. Sử dụng Form .............................................................................................. 27
5. Sử dụng nút lệnh ......................................................................................... 31
6. Sử dụng ảnh ................................................................................................. 32
BÀI 3: CÁC THÀNH PHẦN TRONG BOOTSTRAP ...................................... 33
1. Các thành phần trong form .......................................................................... 33
2. Các thành phần điều hướng ......................................................................... 37
3. Đối tượng đa phương tiện ........................................................................... 40
4. Nhóm danh sách .......................................................................................... 43
5. Các panels ................................................................................................... 47
6. Nhúng responsive ........................................................................................ 49
7. Các thành phần khác ................................................................................... 50
BÀI 4: JAVASCRIPT TRONG BOOTSTRAP .................................................. 55
1. Hiệu ứng Modal .......................................................................................... 55
2. Dropdown .................................................................................................... 57
3. Tooltips (chú giải) ....................................................................................... 60
4. Popover ........................................................................................................ 61
5. Alert ............................................................................................................. 61
6. Collapse ....................................................................................................... 63
7. Carousel ....................................................................................................... 64
2
BÀI 1. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK
1. Giới thiệu Bootstrap Framework
Bootstrap 4 (viết tắt là BS4), là phiên bản mới nhất của Bootstrap.
Bootstrap là framework HTML, CSS và Javascript phổ biến nhất hiện nay
để thiết kế website có thể đáp ứng trên tất cả các nền tảng di động và các thiết bị
khác như máy tính bảng, laptop,….
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Bản
bootstrap mới nhất bây giờ là bootstrap 4.
Tương tự như Bootstrap 3 phiên bản cũ, Bootstrap 4 hoàn toàn miễn phí và
tự do sử dụng.
Ví dụ: Muốn tạo 1 nút (Button)
Kết quả:
Sử dụng Bootstrap:
3
Kết quả:
* Tại sao nên sử dụng Bootstrap:
➢ Dễ dàng thao tác: Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã
nguồn mở HTML, CSS và Javascript. Người dùng cần trang bị kiến thức
cơ bản 3 mã này mới có thể sử dụng Bootstrap hiệu quả. Bên cạnh đó, các
mã nguồn này cũng có thể dễ dàng thay đổi và chỉnh sửa tùy ý.
➢ Tùy chỉnh dễ dàng: Bootstrap được tạo ra từ các mã nguồn mở cho phép
designer linh hoạt hơn. Giờ đây có thể lựa chọn những thuộc tính, phần tử
phù hợp với dự án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết kiệm
dung lượng vì không cần tải mã nguồn về máy.
➢ Chất lượng sản phẩm đầu ra hoàn hảo: Bootstrap là sáng tạo của các lập
trình viên giỏi trên khắp thế giới. Bootstrap đã được nghiên cứu và thử
nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào sử dụng.
Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản
phẩm với chất lượng tốt nhất.
➢ Độ tương thích cao: Bootstrap tương thích với mọi trình duyệt và nền tảng
bởi Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trên
thiết bị di động hơn. Bootstrap có khả năng tự động điều chỉnh kích thước
trang website theo khung browser. Mục đích để phù hợp với màn hình của
máy tính để bàn, tablet hay laptop.
Cấu trúc và tính năng của Bootstrap: Bootstrap chứa các tập tin JavaScript,
CSS và fonts đã được biên dịch và nén lại. Ngoài ra, Bootstrap được thiết kế dưới
dạng các mô-đun. Do đó, dễ dàng tích hợp với hầu hết các mã nguồn mở như
WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến nhiều chức năng
nổi bật.
Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” các thành
tố dùng để tạo nên giao diện của một website hoàn chỉnh như font, typography,
form, table, grid…
Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải
xuống và sử dụng nó tại trang web của khung.
4
Tái sử dụng các thành phần lặp đi lặp lại trên trang web.
Bootstrap được tích hợp jQuery. Bạn chỉ cần khai báo chính xác các tính
năng trong quá trình lập trình web của bạn.
Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu
tượng và tăng tốc độ tải trang..
2. Download và sử dụng Bootstrap
Có hai cách phổ biến để tải Bootstrap về web của bạn:
Tải trực tiếp từ trang cung cấp Bootstrap: Sau khi tải và nhúng vào dự án
web, không cần có kết nối internet để hiển thị trang web bình thường
Thông qua CDN (Content Delivery Network) Bootstrap: Luôn cần kết nối
đến CDN
Cách 1: Tải trực tiếp từ trang cung cấp Bootstrap:
Bước 1: Truy cập trang web https://getbootstrap.com/
Bước 2: Chọn Download