Trong bài học này chúng ta sẽ tìm hiểu về cách tải cài đặt hay nhúng Bootstrap 4 vào web của bạn. Trước khi bắt tay vào bài học bạn hãy chắc chắn mình đã hoàn thành khóa học HTML và CSS của chúng tôi bởi đây là những kiến thức web cơ bản nhất trên con đường chinh phục website.
Tải Bootstrap 4 ở đâu?
Có hai cách để bắt đầu sử dụng Bootstrap 4 trên trang web của riêng bạn. Bạn có thể:
- Sử dụng Bootstrap 4 từ CDN
- Tải xuống Bootstrap 4 từ getbootstrap.com
Nhúng Bootstrap 4 CDN
Nếu bạn không muốn tự tải xuống và lưu trữ Bootstrap 4, bạn có thể đưa nó vào từ CDN (Mạng phân phối nội dung).
MaxCDN cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap cũng như thư viện jQuery. Bạn phải nhúng tất cả vào trang web mới sử dụng được Bootstap 4.
Ví dụ sử dụng đoạn code sau để nhúng Bootstrap 4 từ CDN vào website của bạn:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Một lợi thế của việc sử dụng Bootstrap 4 CDN:
Nhiều người dùng đã tải xuống Bootstrap 4 từ MaxCDN khi truy cập trang web khác. Do đó, nó sẽ được tải từ bộ nhớ cache khi họ truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng khi người dùng yêu cầu tệp từ tệp đó, tệp đó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn.
Vì sao cần nhúng jQuery và Popper?
Bootstrap 4 sử dụng jQuery và Popper.js cho các thành phần JavaScript vì vậy cần nhúng Query và Popper để tạo các thành phần website như hộp thoại (modal), chú thích (tooltip), popover,… giúp website có nhiều tính năng và nâng cao trải nghiệm người dùng hơn.
Tải xuống Bootstrap 4
Nếu bạn muốn tự mình tải xuống và sử dụng riêng trên website của mình, hãy truy cập https://getbootstrap.com/ và làm theo hướng dẫn tại đó hoặc tải trực tiếp từ link dưới đây:
https://github.com/twbs/bootstrap/releases/download/v4.5.3/bootstrap-4.5.3-dist.zip
Tạo trang web đầu tiên với Bootstrap 4
1.Thêm dạng tài liệu (doctype) là HTML5.
Bootstrap 4 dùng các thuộc tính CSS và phần tử HTML yêu cầu tài liệu HTML phải là phiên bản HTML5. Vì vậy chúng ta cần khai báo phần tử HTML như sau
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
2. Bootstrap 4 ưu tiên thiết bị di động
Bootstrap 4 được thiết kế để đáp ứng các thiết bị di động vì vậy khai báo ưu tiên cho thiết bị di động là một phần trong lõi chính của nó.
Để đảm bảo việc hiển thị thu phóng thích hợp, chúng ta cần thêm thẻ <meta> sau vào bên trong phần tử <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Phần width = device-width đặt chiều rộng của trang tuân theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
Phần Initial-scale = 1 đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.
3. Containers (Vùng chứa)
Vùng chứa Container là vùng chứa toàn bộ giao diện website. Theo cách thiết kế website cũ, vùng chứa chính là thẻ div id= wrapper chính bao toàn bộ nội dung website. Cũng giống như Bootstrap 3 thì Bootstrap 4 cũng chứa 2 dạng vùng chứa:
- Lớp .container cung cấp vùng chứa có độ rộng cố định đáp ứng responsive.
- Lớp .container-fluid cung cấp độ rộng toàn phần, tùy theo kích thước màn hình.
Tùy theo nhu cầu cá nhân, sở thích và mục tiêu hướng đến người dùng có thể tùy chọn vùng chứa thích hợp.
Lời kết:
Hoàn thành bài học này là bạn đã biết cách cài đặt bootstrap 4 bằng các cách nhúng Bootstrap 4 vào website của mình rồi đấy. CHúng ta sẽ lần lượt tìm hiểu về Bootstrap 4 trong cá bàn sau nhé, hẹn gặp lại các bạn!
