Hướng dẫn tạo trang web với Bootstrap

Trong bài học này, Mytour sẽ chỉ bạn cách tạo trang web bằng Bootstrap. Ngoài ra, bạn cũng có thể tham khảo các bài học bootstrap khác trên Mytour để tìm hiểu chi tiết về bootstrap.

Hướng dẫn chi tiết cách tạo trang web bằng Bootstrap

1. Chuẩn bị

Trước khi bắt đầu tạo trang web bằng Bootstrap, hãy đảm bảo bạn đã cài đặt trình soạn thảo code và đã nắm vững kiến thức cơ bản về HTML và CSS.

2. Tạo trang web với Bootstrap

Tiếp theo, chúng ta sẽ tạo một mẫu Bootstrap chứa các file CSS và JS của Bootstrap, cũng như các phụ thuộc JavaScript như jQuery và Popper.js thông qua CDN.

Mytour đề xuất bạn thêm Bootstrap vào dự án sử dụng CDN (Content Delivery Network). CDN lưu trữ các file trên nhiều máy chủ trên toàn thế giới, giúp giảm thời gian tải và tối ưu hiệu suất.

Xem chi tiết các bước thực hiện trong phần dưới đây:

2.1. Bước 1: Tạo file HTML cơ bản

Khởi động trình soạn thảo code bạn thích và tạo một file HTML mới. Copy và dán đoạn mã dưới đây vào cửa sổ code, sau đó lưu file với tên 'basic.html' trên màn hình desktop.

Gợi ý: Đặt thẻ meta trong phần head của tài liệu để hỗ trợ zoom và hiển thị đúng trên các thiết bị di động.

2.2. Bước 2: Biến file HTML thành mẫu Bootstrap

Để chuyển đổi file HTML thành mẫu Bootstrap, chỉ cần thêm các file CSS và JS của Bootstrap, cùng với các phụ thuộc JavaScript như jQuery và Popper.js thông qua liên kết CDN.

Làm tốt nhất bằng cách thêm các file JavaScript vào cuối trang, ngay trước thẻ đóng body để cải thiện hiệu suất trang web, như minh họa dưới đây:

Kết quả xuất hiện như sau:

Sau khi tích hợp các file CSS và JS của Bootstrap cùng thư viện jQuery và Popper.js qua CDN, chúng ta đã sẵn sàng phát triển trang web hoặc ứng dụng với framework Bootstrap.

Các thuộc tính integrity và crossorigin đã được thêm vào liên kết CDN để triển khai Subresource Integrity (SRI).

Đây là tính năng bảo mật giảm thiểu rủi ro tấn công từ các CDN bị truy cập trái phép. Đảm bảo file trang web của bạn không chứa mã độc hại hoặc sửa đổi trái phép, người dùng có thể cung cấp hàm băm mật mã khớp với file tìm nạp.

Gợi ý: Nếu trang web của bạn và các trang khác sử dụng cùng một CDN để tải xuống CSS và JS của Bootstrap, trình duyệt sẽ tận dụng bộ nhớ cache, giảm thời gian tải lên.

2.3. Bước 3: Lưu và xem file

Bước cuối cùng là lưu file dưới tên 'bootstrap-template.html' trên màn hình desktop.

Để mở file trong trình duyệt web, hãy chuột phải vào file và chọn trình duyệt ưa thích hoặc kéo và thả file vào cửa sổ trình duyệt.

Chú ý: Phần mở rộng của file cần là .html. Nếu bạn sử dụng trình soạn thảo văn bản như Notepad trên Windows, đảm bảo lưu file với đuôi mở rộng là .txt.

3. Tải xuống các file Bootstrap

Để tải file CSS và JS của Bootstrap, truy cập trang chính và thêm vào dự án của bạn. Có 2 phiên bản Bootstrap để tải, bao gồm phiên bản biên dịch và mã nguồn mở.

Để tải Bootstrap 4, truy cập tại đây.

Phiên bản Bootstrap đã biên dịch chứa file CSS và JavaScript được rút gọn, giúp phát triển web nhanh chóng. Tuy nhiên, phiên bản này không bao gồm các phụ thuộc JavaScript như jQuery và Popper.js. File tải về chứa cả file nguồn CSS và JavaScript, kèm theo bản sao tài liệu cục bộ.

Để tải Bootstrap đã biên dịch, truy cập tại đây.

Sau khi tải và giải nén, bạn sẽ thấy thư mục chứa file CSS và JS đã biên dịch (bootstrap. *), cùng với phiên bản rút gọn (bootstrap.min. *). Sử dụng bootstrap.min.css và bootstrap.min.js.

Sử dụng phiên bản rút gọn của CSS và JS để tối ưu hiệu suất trang web và giảm băng thông yêu cầu HTTP cũng như kích thước tải xuống.

Hướng dẫn của Mytour về tạo trang web bằng Bootstrap vừa kết thúc. Nếu có thắc mắc hoặc câu hỏi, đừng ngần ngại để lại ý kiến trong phần bình luận dưới bài viết.

Trong bài viết tiếp theo, Mytour sẽ giới thiệu về Hệ thống Lưới trong Bootstrap.