Bootstrap 4 tính đến thời điểm chính thức tung ra thị trường đến nay đã được hơn 4 tuổi. Có thể thấy, version 4 này được coi là 1 CSS framework trợ giúp đắc lực trong việc xây dựng và cắt giao diện Website rất hiệu quả.
Version 4 được người dùng đặc biệt yêu thích bởi khả năng hỗ trợ tuyệt vời đối với việc thiết kế Responsive. Hơn nữa, chúng còn rất dễ học và dễ tiếp cận. Thậm chí, người dùng chỉ cần nắm chắc điều cơ bản về CSS là có thể dùng những Class tại thư viện Bootstrap để hỗ trợ trong công việc.
Nắm được xu hướng đó, rất nhiều Website cung cấp cách cài đặt và sử dụng Bootstrap 4. Hy vọng chúng sẽ giúp nhiều người có những trải nghiệm tốt và mang lại thành công trong công việc.
Cách cài đặt Bootstrap 4
Ở đây, bạn sẽ được tiếp cận với 2 cách cài đặt Bootstrap 4.
Cách nhúng Bootstrap 4 từ CDN
Trong quá trình thực hiện công đoạn triển khai một trang Web, hầu hết lập trình viên sẽ nhúng Bootstrap bằng CDN. Điều này giúp người dùng có thể tiết kiệm tối đa băng thông cho Website.
MaxCDN bổ sung những CDN cho CSS và Javascript của Bootstrap và cả thư viện jQuery.
Chẳng hạn, các tập tin sẽ được nhúng nhằm xây dựng trang Website khi dùng Bootstrap 4. Lúc này, bạn sẽ nhúng những file thư viện như dưới đây:
- bootstrap.min.css: bản CSS được nén của BS4
- jquery.min.js: thư viện jQuery, cần được gọi trước thư viện js của BS4 (Đây là điều bắt buộc)
- popper.min.js: thư viện popper đã được nén
- bootstrap.min.js: bản JS đã được nén của BS4. Chúng sẽ được để sau những thư viện JS ngoài
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” />
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
Như vậy, bạn có thể nhận thấy ở ví dụ trên có sự hiện diện của 2 thư viện JavaScript là jQuery và Popper. Bởi chúng có khả năng tạo nên thành phần Website tựa như hộp thoại (modal), chú thích (tooltip), hay popover,… Từ đó, trang Web sẽ sở hữu vô số tính năng và nâng cấp trải nghiệm dành cho người sử dụng nhiều hơn.
Tải Bootstrap 4 từ trang chủ
Cách cài đặt Bootstrap 4 mà chúng ta không thể bỏ lỡ đó là tải Bootstrap 4 từ trang chủ. Mấu chốt của việc dùng cách cài đặt này là bạn cần sử dụng riêng tại Host. Trang chủ chính thức sẽ là vietnamforestry.com
Đầu tiên, bạn sẽ truy cập vào trang chủ theo đường link trên. Sau đó, bạn tải bộ Source tại link xuất hiện đầu tiên (Compiled Css and Js).
Nội dung chính
Quá trình tải xong, bạn sẽ có được cấu trúc bằng 2 thư mục CSS và JS. Cụ thể là:
- CSS: Bạn sẽ đặc biệt chú ý đến 2 file: file bootstrap.css và bootstrap.min.css. Hai file này có nội dung hoàn toàn tương tự. Tuy nhiên, 1 bản đầy đủ còn bản kia là bản nén.
- JS: Bạn cũng chú ý đến duy nhất 2 file: file đầy đủ bootstrap.js và file nén bootstrap.min.js. Tại folder đó, bạn sẽ add thư viện Popper và Jquery thông qua việc vào trang chủ của thư viện đã tải về. Cuối cùng bạn để file thư viện đó vào trong folder JS.
Cách sử dụng Bootstrap 4
Để sử dụng Bootstrap 4, bạn cần:
Thêm dạng tài liệu HTML5 vào
Ở Version 4 này, Bootstrap dùng toàn bộ thuộc tính CSS và phần tử HTML. Nhưng bạn nên nhớ, HTML cần dùng phải là phiên bản HTML5. Do đó, khi muốn dùng phiên bản Bootstrap 4, bạn cần thêm dạng tài liệu HTML5 như sau:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
</head>
</html>
Bootstrap 4 ưu tiên dành cho thiết bị di động
Version 4 được ra đời để thỏa mãn nhu cầu sử dụng trên màn hình di động. Vì vậy, phong cách thiết kế luôn dành sự ưu ái cho thiết bị di động chính là phần lõi chính tại Framework.
Việc hiển thị thu phóng phù hợp, bạn sẽ add thẻ Meta sau bên trong phần tử Head. Từ đó, responsive web design ở thiết bị chuẩn nhất.
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
Cũng giống như BS3, width=device-width bạn sẽ cài đặt độ rộng của trang phù hợp với độ rộng của màn hình. Thời điểm giao diện Website chạy trên những thiết bị màn hình không giống nhau thì trang Web sẽ có độ rộng cũng không giống nhau. Phần initial-scale=1 có nhiệm vụ thiết lập mức thu phóng ban đầu, hầu hết chúng quy định là 1 (tương ứng 100%).
Từ đây, bạn đã biết cách cài đặt và sử dụng Bootstrap 4 để sở hữu giao diện Website như mong đợi. Dưới đây là video cài đặt chi tiết giúp bạn hiểu rõ hơn về quá trình.
Bài viết đã nêu trọn vẹn nội dung cài đặt và sử dụng Bootstrap 4. Nếu bạn có điều gì thắc mắc có thể để lại comment bên dưới.
