Biết về Bootstrap là gì vẫn chưa đủ. Bạn cần phải biết cách cài đặt và sử dụng Bootstrap như thế nào? Có hai cách phổ biến để tải Bootstrap về web hosting của bạn

1. Tải về từ trang Bootstrap

Bạn có thể tải Bootstrap từ trang chủ https://getbootstrap.com/. Sau khi tải về, bạn sẽ nhận được cấu trúc gồm hai thư mục JS và CSS. Bạn cần giải nén và cài đặt vào web hosting thông qua giao thức FTP.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
    <h1>Learning Bootstrap</h1>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

2. Bootstrap từ CDN

Bạn không muốn tải xuống và lưu trữ Bootstrap trên thiết bị? Bạn có thể nhúng Bootstrap thông qua CDN (Content Delivery Network – mạng phân phối nội dung). Đây là cách mà đa số lập trình viên sử dụng để nhúng Bootstrap vì tiết kiệm băng thông cũng như tích hợp JavaScript, CSS, thư viện jQuerry mang đến nhiều tính năng cho website và nâng cao trải nghiệm người dùng hơn.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Bootstrap 3

Bài 2: Nhúng Bootstrap vào website

1. Tải về từ trang Bootstrap

2. Bootstrap từ CDN