Bắt đầu với Bootstrap

Bootstrap là một bộ công cụ giao diện người dùng mạnh mẽ, có nhiều tính năng. Xây dựng mọi thứ — từ nguyên mẫu đến sản xuất — chỉ trong vài phút.

Trên trang này

Bắt đầu nhanh

Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Hãy xem nó trong thực tế với bản demo Bootstrap CodePen này .

Tạo một index.htmltệp mới trong gốc dự án của bạn. Bao gồm cả <meta name="viewport">thẻ để có hành vi phản hồi thích hợp trong thiết bị di động.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Bao gồm CSS và JS của Bootstrap. Đặt <link>thẻ vào <head>cho CSS của chúng tôi và <script>thẻ cho gói JavaScript của chúng tôi (bao gồm Popper để định vị danh sách thả xuống, cửa sổ bật lên và chú giải công cụ) trước khi đóng </body>. Tìm hiểu thêm về các liên kết CDN của chúng tôi .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng trình đơn thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Chào thế giới! Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Bây giờ bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng bạn , thêm hàng tá thành phần và sử dụng các ví dụ chính thức của chúng tôi .

Liên kết CDN

Để tham khảo, đây là các liên kết CDN chính của chúng tôi.

Sự mô tả	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung .

Bước tiếp theo

Đọc thêm một số cài đặt môi trường toàn cầu quan trọng mà Bootstrap sử dụng.
Đọc về những gì được bao gồm trong Bootstrap trong phần nội dung của chúng tôi và danh sách các thành phần yêu cầu JavaScript bên dưới.
Cần thêm một chút sức mạnh? Cân nhắc xây dựng với Bootstrap bằng cách bao gồm các tệp nguồn thông qua trình quản lý gói .
Tìm cách sử dụng Bootstrap làm mô-đun với <script type="module">? Vui lòng tham khảo phần sử dụng Bootstrap làm mô-đun của chúng tôi .

Các thành phần JS

Bạn muốn biết những thành phần nào yêu cầu rõ ràng JavaScript và Popper của chúng tôi? 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 hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang ví dụ.

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 các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi đáp ứng
Điều hướng với plugin Tab để chuyển đổi các ngăn nội dung
Bản quét tắt để hiển thị, định vị và hành vi cuộn
Scrollspy để cập nhật hành vi cuộn và điều hướng
Nâng cốc để hiển thị và loại bỏ
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 )

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, tất cả đều gần như chỉ hướng đến 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ố phong cách vui nhộn và không hoàn chỉnh.

<!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">

Bạn có thể xem một ví dụ về điều này trong quá trình bắt đầu nhanh .

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 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 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 .
Hỏi và khám phá các cuộc Thảo luận trên GitHub của chúng tôi .
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-5).
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.