Dịch từ trang chủ bootrap https://getbootstrap.com/docs/5.0/getting-started/introduction/
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.Trên trang này
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.Sao chép
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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 các plugin JavaScript và Popper của riêng chúng tôi . Nơi một trong các cách sau <script>s gần cuối trang của bạn, ngay trước khi bế mạc </body>thẻ, để kích hoạt chúng.
Bó
Bao gồm mọi plugin Bootstrap JavaScript và phụ thuộc 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. Để 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 .Sao chép
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Riêng biệt
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.Sao chép
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Mô-đun
Nếu bạn sử dụng <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
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
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:Sao chép
<!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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Đối với các bước tiếp theo, hãy 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.
Toàn 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 lưu ý khi sử dụng nó, tất cả đều hầu 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ố 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.Sao chép
<!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>.Sao chép
<meta name="viewport" content="width=device-width, initial-scale=1">
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 kích thướ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 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:Sao chép
.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 .
- Tham gia phòng Slack 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-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.