Bootstrap 4 - Thiết lập môi trường

Bạn có thể bắt đầu sử dụng Bootstrap 4 trong trang web của mình bằng cách thêm nó từ CDN (Mạng phân phối nội dung) hoặc tải xuống từ getbootstrap.com .

Sử dụng CDN

Bootstrap 4 có thể được sử dụng trong trang web bằng cách đưa nó vào từ Mạng phân phối nội dung .

Sử dụng CDN của Bootstrap gồm CSS và JS đã biên dịch dưới đây trong dự án của bạn.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Bao gồm các phiên bản CDN của jQuery và Popper.js (Bootstrap 4 sử dụng jQuery và Popper.js để sử dụng các thành phần JavaScript như modals, tooltip, popovers, v.v.) trước JavaScript Bootstrap rút gọn , nếu bạn đang sử dụng phiên bản JavaScript đã biên dịch.

Sau đây là một số thành phần, yêu cầu jQuery:

Được sử dụng cho các cảnh báo có thể đóng
Chuyển đổi các trạng thái bằng cách sử dụng các nút và hộp kiểm / nút radio và thu gọn để chuyển đổi nội dung
Băng chuyền cho các trang trình bày, điều khiển và chỉ báo
Trình đơn thả xuống (sử dụng Popper.js để định vị hoàn hảo)
Mở và đóng Chế độ
Để thu gọn thanh điều hướng
Chú giải công cụ và cửa sổ bật lên (sử dụng Popper.js để định vị hoàn hảo)

Tải xuống Bootstrap 4

Bạn có thể tải xuống Bootstrap 4 từ https://getbootstrap.com/docs/4.1/getting-started/download/. Khi bạn nhấp vào liên kết này, bạn sẽ thấy một màn hình như hình dưới đây -

Ở đây bạn có thể thấy hai nút -

Download- Nhấp vào đây, bạn có thể tải xuống các phiên bản được biên dịch trước và rút gọn của CSS và JavaScript của Bootstrap. Không có tài liệu hoặc tệp mã nguồn gốc nào được bao gồm.
Download Source - Nhấp vào đây, bạn có thể nhận được Bootstrap SCSS, mã nguồn JavaScript và các tệp tài liệu mới nhất.

Để hiểu rõ hơn và dễ sử dụng, chúng tôi sẽ sử dụng phiên bản Bootstrap được biên dịch sẵn trong suốt hướng dẫn. Vì các tệp được tuân thủ và giảm thiểu, bạn không phải bận tâm mỗi khi bao gồm các tệp riêng biệt cho chức năng riêng lẻ.

Cấu trúc tệp

Biên dịch sẵn Bootstrap 4

Khi phiên bản đã biên dịch Bootstrap 4 được tải xuống, hãy giải nén tệp ZIP và bạn sẽ thấy cấu trúc tệp / thư mục sau:

Như bạn có thể thấy, có CSS và JS đã biên dịch (bootstrap. *), Cũng như CSS và JS được biên dịch và rút gọn (bootstrap.min. *).

Mã nguồn Bootstrap 4

Nếu bạn đã tải xuống mã nguồn Bootstrap 4, thì cấu trúc tệp sẽ như sau:

Các tệp dưới js / và scss / là mã nguồn cho Bootstrap CSS và JavaScript.
Các dist / thư mục bao gồm tất cả mọi thứ được liệt kê trong phần tải về biên dịch sẵn ở trên.
Các tài liệu / ví dụ / , bao gồm mã nguồn cho các tài liệu Bootstrap và ví dụ về việc sử dụng Bootstrap.

Tạo trang web đầu tiên với Bootstrap 4

Ví dụ dưới đây chỉ định trang web đơn giản của Bootstrap 4 -

Thí dụ

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Đầu ra