Hướng dẫn cài đặt và sử dụng Bootstrap v5

Hướng dẫn cài đặt và sử dụng Bootstrap v5

Bootstrap là một thư viện html, css và js. Bootstrap sử dụng html, css và js tạo ra những mẫu cơ bản như: form, button, table, navigation… giúp nhà phát triển web dễ dàng tạo ra những giao diện web responsive.

Với Bootstrap 5, nhà phát triển đã dần loại bỏ những gì lỗi thời, đặc biệt Bootstrap không còn phụ thuộc vào jQuery và chúng tôi đã giảm hỗ trợ cho Internet Explorer. Bootstrap 5 đang tập trung vào việc xây dựng các công cụ thân thiện hơn trong tương lai, tối ưu các biến CSS, JavaScript nhanh hơn, ít phụ thuộc hơn và API tốt hơn chắc chắn cảm thấy phù hợp. Vậy thì bạn còn chần chừ gì nữa, dưới đây là bài viết mình hưỡng dẫn cài đặt và sử dụng Bootstrap v5. Mình có viết một bài viết giới thiệu về Bootstrap 5, bạn có thể tìm đọc tại đây.

Cách cài đặt và sử dụng Bootstrap v5

Tải từ trang chủ Bootstrap

Truy cập Download · Bootstrap v5.0 (getbootstrap.com) để tải phiên bản mới nhất.

Bạn sẽ thấy trong máy hiển thị 2 thư mục là JS và CSS.  Để sử dụng thư mục này, bạn cần tiến hành giải nén. Tiếp đến bạn cài đặt vào Web cần Hosting bằng giao thức FTP.

Cài đặt bằng CDN

Với cách cài đặt này, lượng băng thông sẽ được tiết kiệm hơn. Mặt khác, công đoạn tích hợp JavaScript sẽ đáp ứng được vô số tính năng cho trang Web của bạn. Tuy nhiên, mất mạng tất nhiên là không sử dụng được :)))

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->     
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Bắt đầu nhanh với Bootstrap

<!doctype html> 
<html lang="en">   
<head>     
<!-- Required meta tags -->     
<meta charset="utf-8">     
<meta name="viewport" content="width=device-width, initial-scale=1">     
<!-- Bootstrap CSS -->     
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">     
<title>Hello, world!</title>  
</head>   
<body>     
<h1>Hello, world!</h1>     
<!-- Optional JavaScript; choose one of the two! -->     <!-- Option 1: Bootstrap Bundle with Popper -->     
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>     
<!-- Option 2: Separate Popper and Bootstrap JS -->     <!--     
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>     
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>     -->   
</body> 
</html>

Leave a Reply