Giới thiệu

Bắt đầu với Bootstrap, khuôn khổ phổ biến nhất thế giới để xây dựng các trang web đáp ứng, ưu tiên thiết bị di động, với jsDelivr và trang bắt đầu mẫu.

Bắt đầu nhanh

Bạn muốn nhanh chóng thêm Bootstrap vào dự án của mình? Sử dụng jsDelivr, một CDN mã nguồn mở miễn phí. Sử dụng trình quản lý gói hoặc cần tải xuống các tệp nguồn? Đi đến trang tải xuống .

CSS

Sao chép-dán biểu định kiểu <link>vào của bạn <head>trước tất cả các biểu định kiểu khác để tải CSS của chúng tôi.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Nhiều thành phần của chúng tôi yêu cầu sử dụng JavaScript để hoạt động. Cụ thể, chúng yêu cầu jQuery , Popper và các plugin JavaScript của riêng chúng tôi. Chúng tôi sử dụng bản dựng mỏng của jQuery , nhưng phiên bản đầy đủ cũng được hỗ trợ.

Đặt một trong những phần sau gần cuối <script>các trang của bạn, ngay trước </body>thẻ đóng, để bật chúng. jQuery phải xuất hiện trước, sau đó đến Popper và sau đó là các plugin JavaScript của chúng tôi.

Bó

Bao gồm mọi plugin Bootstrap JavaScript với một trong hai gói của chúng tôi. Cả hai bootstrap.bundle.jsvà bootstrap.bundle.min.jsbao gồm Popper cho chú giải công cụ và cửa sổ bật lên của chúng tôi, nhưng không bao gồm jQuery . Bao gồm jQuery trước, sau đó là một gói JavaScript Bootstrap. Để biết thêm thông tin về những gì được bao gồm trong Bootstrap, vui lòng xem phần nội dung của chúng tôi .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Chia

Nếu bạn quyết định sử dụng giải pháp tập lệnh riêng biệt, thì Popper phải đến trước (nếu bạn đang sử dụng chú giải công cụ hoặc cửa sổ bật lên), sau đó mới đến các plugin JavaScript của chúng tôi.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Các thành phần

Bạn muốn biết những thành phần nào yêu cầu rõ ràng jQuery, JavaScript của chúng tôi và Popper? Nhấp vào liên kết hiển thị các thành phần bên dưới. Nếu bạn không chắc chắn về cấu trúc trang, hãy tiếp tục đọc mẫu trang mẫu.

Hiển thị các thành phần yêu cầu JavaScript

Cảnh báo loại bỏ
Các nút để chuyển đổi trạng thái và hộp kiểm / chức năng radio
Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
Thu gọn để chuyển đổi khả năng hiển thị của nội dung
Trình đơn thả xuống để hiển thị và định vị (cũng yêu cầu Popper )
Các phương thức hiển thị, định vị và hành vi cuộn
Thanh điều hướng để mở rộng plugin Thu gọn của chúng tôi để triển khai hành vi đáp ứng
Scrollspy để cập nhật hành vi cuộn và điều hướng
Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị (cũng yêu cầu Cửa sổ bật lên )

Mẫu dành cho người mới bắt đầu

Đảm bảo các trang của bạn được thiết lập với các tiêu chuẩn phát triển và thiết kế mới nhất. Điều đó có nghĩa là sử dụng loại tài liệu HTML5 và bao gồm thẻ meta chế độ xem để có các hành vi đáp ứng thích hợp. Đặt tất cả lại với nhau và các trang của bạn sẽ trông như thế này:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required 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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Đó là tất cả những gì bạn cần cho các yêu cầu tổng thể về trang. Truy cập tài liệu về Bố cục hoặc các ví dụ chính thức của chúng tôi để bắt đầu bố trí nội dung và thành phần trang web của bạn.

Các hình cầu quan trọng

Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng mà bạn sẽ cần phải lưu ý khi sử dụng nó, tất cả đều hầu như chỉ hướng tới việc bình thường hóa các kiểu trình duyệt chéo. Hãy đi sâu vào.

Loại tài liệu HTML5

Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Nếu không có nó, bạn sẽ thấy một số kiểu dáng không hoàn chỉnh vui nhộn, nhưng bao gồm cả nó sẽ không gây ra bất kỳ trục trặc đáng kể nào.

<!doctype html>
<html lang="en">
  ...
</html>

Thẻ meta đáp ứng

Bootstrap được phát triển trên thiết bị di động trước tiên , một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước tiên và sau đó mở rộng quy mô các thành phần khi cần thiết bằng cách sử dụng các truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và phóng to chạm cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bạn có thể xem một ví dụ về điều này đang hoạt động trong mẫu khởi động .

Kích thước hộp

Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển box-sizinggiá trị toàn cục từ content-boxthành border-box. Điều này đảm bảo paddingkhông ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ Tìm kiếm Tùy chỉnh của Google.

Trong một số trường hợp hiếm hoi bạn cần ghi đè nó, hãy sử dụng một cái gì đó như sau:

.selector-for-some-widget {
  box-sizing: content-box;
}

Với đoạn mã trên, các phần tử lồng nhau — bao gồm cả nội dung được tạo qua ::beforevà ::after—sẽ kế thừa tất cả các phần tử được chỉ định box-sizingcho điều đó .selector-for-some-widget.

Tìm hiểu thêm về mô hình hộp và định cỡ tại Thủ thuật CSS .

Khởi động lại

Để hiển thị trên nhiều trình duyệt được cải thiện, chúng tôi sử dụng Khởi động lại để sửa các điểm không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại vững chắc hơn một chút cho các phần tử HTML phổ biến.

Cộng đồng

Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng bằng những tài nguyên hữu ích này.

Đọc và đăng ký Blog Bootstrap Chính thức .
Trò chuyện với các Bootstrappers đồng nghiệp trong IRC. Trên irc.libera.chatmáy chủ, trong #bootstrapkênh.
Có thể tìm thấy trợ giúp triển khai tại Stack Overflow (được gắn thẻ bootstrap-4).
Các nhà phát triển nên sử dụng từ khóa bootstraptrên các gói sửa đổi hoặc thêm vào chức năng của Bootstrap khi phân phối thông qua npm hoặc các cơ chế phân phối tương tự để có khả năng phát hiện tối đa.

Bạn cũng có thể theo dõi @getbootstrap trên Twitter để biết những câu chuyện phiếm mới nhất và các video âm nhạc tuyệt vời.

CSP và SVG được nhúng

Một số thành phần Bootstrap bao gồm các SVG được nhúng trong CSS của chúng tôi để tạo kiểu cho các thành phần một cách nhất quán và dễ dàng trên các trình duyệt và thiết bị. Đối với các tổ chức có cấu hình CSP nghiêm ngặt hơn , chúng tôi đã ghi lại tất cả các trường hợp SVG được nhúng của chúng tôi (tất cả đều được áp dụng thông qua background-image) để bạn có thể xem xét kỹ lưỡng hơn các tùy chọn của mình.

Nút đóng (được sử dụng trong cảnh báo và phương thức)
Hộp kiểm tùy chỉnh và nút radio
Công tắc biểu mẫu
Biểu tượng xác thực biểu mẫu
Các menu lựa chọn tùy chỉnh
Điều khiển băng chuyền
Các nút chuyển đổi trên thanh điều hướng

Dựa trên cuộc trò chuyện của cộng đồng , một số tùy chọn để giải quyết vấn đề này trong cơ sở mã của riêng bạn bao gồm thay thế URL bằng nội dung được lưu trữ cục bộ, xóa hình ảnh và sử dụng hình ảnh nội tuyến (không thể thực hiện trong tất cả các thành phần) và sửa đổi CSP của bạn. Khuyến nghị của chúng tôi là xem xét cẩn thận các chính sách bảo mật của riêng bạn và quyết định con đường tốt nhất về phía trước, nếu cần.