Bộ công cụ giao diện người dùng mạnh mẽ, có thể mở rộng và đóng gói nhiều tính năng. Xây dựng và tùy chỉnh với Sass, sử dụng hệ thống lưới và các thành phần dựng sẵn, đồng thời đưa các dự án vào cuộc sống với các plugin JavaScript mạnh mẽ.
Hiện tại v5.2.1 · Tải xuống · tài liệu v4.6.x · Tất cả các bản phát hành
Bắt tay ngay vào việc xây dựng với Bootstrap — sử dụng CDN, cài đặt nó qua trình quản lý gói hoặc tải xuống mã nguồn.
Cài đặt các tệp Sass và JavaScript nguồn của Bootstrap thông qua npm, RubyGems, Composer hoặc Meteor. Cài đặt được quản lý theo gói không bao gồm tài liệu hoặc tập lệnh xây dựng đầy đủ của chúng tôi. Bạn cũng có thể sử dụng kho mẫu npm của chúng tôi để tạo nhanh một dự án Bootstrap thông qua npm.
npm install [email protected]gem install bootstrap -v 5.2.1Đọc tài liệu cài đặt của chúng tôi để biết thêm thông tin và các trình quản lý gói bổ sung.
Khi bạn chỉ cần bao gồm CSS hoặc JS đã biên dịch của Bootstrap, bạn có thể sử dụng jsDelivr . Xem nó hoạt động với khởi động nhanh đơn giản của chúng tôi hoặc duyệt qua các ví dụ để bắt đầu dự án tiếp theo của bạn. Bạn cũng có thể chọn bao gồm Popper và JS của chúng tôi một cách riêng biệt .
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Bootstrap sử dụng Sass cho một kiến trúc mô-đun và có thể tùy chỉnh. Chỉ nhập các thành phần bạn cần, bật các tùy chọn toàn cục như gradient và bóng đổ, đồng thời viết CSS của riêng bạn với các biến, bản đồ, hàm và mixin của chúng tôi.
Nhập một biểu định kiểu và bạn bắt đầu cuộc đua với mọi tính năng của CSS của chúng tôi.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Tìm hiểu thêm về các tùy chọn Sass toàn cầu của chúng tôi .
Cách dễ nhất để tùy chỉnh Bootstrap — chỉ bao gồm CSS bạn cần.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
Tìm hiểu thêm về cách sử dụng Bootstrap với Sass .
Bootstrap 5 đang phát triển với mỗi bản phát hành để sử dụng tốt hơn các biến CSS cho các kiểu chủ đề toàn cầu, các thành phần riêng lẻ và thậm chí cả các tiện ích. Chúng tôi cung cấp hàng chục biến số cho màu sắc, kiểu phông chữ và hơn thế nữa ở :rootcấp độ để sử dụng ở mọi nơi. Trên các thành phần và tiện ích, các biến CSS được phân bổ cho lớp có liên quan và có thể dễ dàng sửa đổi.
Sử dụng bất kỳ biến toàn cục:root nào của chúng tôi để viết các kiểu mới. Các biến CSS sử dụng var(--bs-variableName)cú pháp và có thể được kế thừa bởi các phần tử con.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}Ghi đè các biến lớp toàn cầu, thành phần hoặc tiện ích để tùy chỉnh Bootstrap theo cách bạn muốn. Không cần khai báo lại từng quy tắc, chỉ cần một giá trị biến mới.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}Tính năng mới trong Bootstrap 5, các tiện ích của chúng tôi hiện được tạo bởi API Tiện ích của chúng tôi . Chúng tôi đã xây dựng nó như một bản đồ Sass có nhiều tính năng có thể được tùy chỉnh nhanh chóng và dễ dàng. Thêm, xóa hoặc sửa đổi bất kỳ lớp tiện ích nào chưa bao giờ dễ dàng hơn thế. Làm cho các tiện ích đáp ứng, thêm các biến thể giả lớp và đặt tên tùy chỉnh cho chúng.
Tìm hiểu thêm về các tiện ích Khám phá các thành phần tùy chỉnh
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Dễ dàng thêm các phần tử ẩn, phương thức và menu offcanvas có thể chuyển đổi, cửa sổ bật lên và chú giải công cụ, v.v. - tất cả đều không có jQuery. JavaScript trong Bootstrap ưu tiên HTML, có nghĩa là thêm plugin dễ dàng như thêm datathuộc tính. Cần kiểm soát nhiều hơn? Bao gồm các plugin riêng lẻ theo lập trình.
Tại sao phải viết nhiều JavaScript hơn khi bạn có thể viết HTML? Gần như tất cả các plugin JavaScript của Bootstrap đều có API dữ liệu hạng nhất, cho phép bạn sử dụng JavaScript chỉ bằng cách thêm datacác thuộc tính.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
Tìm hiểu thêm về JavaScript của chúng tôi dưới dạng mô-đun và sử dụng API có lập trình .
Bootstrap có hàng tá plugin mà bạn có thể thả vào bất kỳ dự án nào. Thả tất cả chúng cùng một lúc hoặc chỉ chọn những thứ bạn cần.
Bootstrap Icons là một thư viện biểu tượng SVG mã nguồn mở có hơn 1.500 glyphs, với nhiều hơn nữa được bổ sung sau mỗi lần phát hành. Chúng được thiết kế để hoạt động trong bất kỳ dự án nào, cho dù bạn có sử dụng Bootstrap hay không. Sử dụng chúng dưới dạng SVG hoặc phông chữ biểu tượng — cả hai tùy chọn đều cung cấp cho bạn khả năng chia tỷ lệ vectơ và dễ dàng tùy chỉnh thông qua CSS.
Đưa Bootstrap lên cấp độ tiếp theo với các chủ đề cao cấp từ thị trường Chủ đề Bootstrap chính thức . Các chủ đề được xây dựng trên Bootstrap dưới dạng các khung mở rộng của riêng chúng, phong phú với các thành phần và plugin mới, tài liệu hướng dẫn và các công cụ xây dựng mạnh mẽ.
