Hướng dẫn is bootstrap a replacement for css? - bootstrap có phải là sự thay thế cho css không?

Cài đặt qua Trình quản lý gói

Cài đặt các tệp SASS và JavaScript của Bootstrap, thông qua NPM, Rubygems, Composer hoặc Meteor. Cài đặt được quản lý gói don don 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 repo mẫu NPM của chúng tôi để nhanh chóng tạo dự án Bootstrap thông qua NPM.

npm install 

gem install bootstrap -v 5.2.2

Đọc tài liệu cài đặt của chúng tôi để biết thêm thông tin và người quản lý gói bổ sung.

Bao gồm thông qua CDN

Khi bạn chỉ cần bao gồm Bootstrap, đã biên dịch CSS hoặc JS, bạn có thể sử dụng JSDELIVR. Xem nó trong hành động với sự khởi đầu nhanh chóng đơn giản của chúng tôi, hoặc duyệt các ví dụ để khởi động 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//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Đọc hướng dẫn bắt đầu của chúng tôi

Nhận được một bước nhảy bao gồm các tệp nguồn của Bootstrap trong một dự án mới với các hướng dẫn chính thức của chúng tôi.

Tùy chỉnh mọi thứ với & nbsp; sass

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, kích hoạt các tùy chọn toàn cầu như độ dốc và bóng tối và viết CSS của riêng bạn với các biến, bản đồ, chức năng và hỗn hợp của chúng tôi.

Tìm hiểu thêm về tùy chỉnh

Bao gồm tất cả Bootstrap từ Sass

Nhập một bảng kiểu và bạn đang tham gia các 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.

Bao gồm những gì bạn cần

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ề việc sử dụng bootstrap với sass.

Xây dựng và mở rộng trong thời gian thực với các biến CSS & NBSP;

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 tiện ích. Chúng tôi cung cấp hàng tá biến cho màu sắc, kiểu phông chữ và nhiều hơn ở mức

gem install bootstrap -v 5.2.2

Tìm hiểu thêm về các biến CSS

Sử dụng các biến CSS

Sử dụng bất kỳ biến

gem install bootstrap -v 5.2.2

gem install bootstrap -v 5.2.2

.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);
}

Tùy chỉnh thông qua các biến CSS

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 chỉ là cách bạn muốn. Không cần phải tái lập từng quy tắc, chỉ là 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;
}

Các thành phần, đáp ứng tiện ích & nbsp; API

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 đóng gói tính năng có thể được tùy chỉnh nhanh chóng và dễ dàng. Nó không bao giờ dễ dàng hơn để thêm, xóa hoặc sửa đổi bất kỳ lớp tiện ích nào. Làm cho các tiện ích đáp ứng, thêm các biến thể pseudo-lớp và đặt cho họ tên tùy chỉnh.

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

Nhanh chóng tùy chỉnh các thành phần

// 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,
    )
  )
);

Plugin JavaScript mạnh mẽ mà không có & nbsp; jQuery

Dễ dàng thêm các yếu tố ẩn, phương thức và menu OffCanvas, popover và chú giải công cụ, và nhiều hơn nữa, không có tất cả mà không cần jQuery. JavaScript trong Bootstrap là HTML-First, có nghĩa là thêm các plugin cũng dễ dàng như thêm các thuộc tính

gem install bootstrap -v 5.2.2

Tìm hiểu thêm về bootstrap javascript

API thuộc tính dữ liệu

Tại sao viết thêm JavaScript 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 các thuộc tính

gem install bootstrap -v 5.2.2

• Mục thả xuống
• Mục thả xuống
• Mục thả xuống

<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 các mô -đun và sử dụng API lập trình.

Tập hợp các plugin toàn diện

Bootstrap có một tá plugin mà bạn có thể thả vào bất kỳ dự án nào. Thả chúng trong tất cả cùng một lúc, hoặc chỉ chọn những người bạn cần.

Cá nhân hóa nó với bootstrap & nbsp; biểu tượng

Các biểu tượng Bootstrap là một thư viện biểu tượng SVG nguồn mở có hơn 1.500 glyphs, với nhiều bản phát hành được thêm vào. 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 làm phông chữ SVG hoặc biểu tượng Các tùy chọn cả hai cung cấp cho bạn tỷ lệ vectơ và tùy chỉnh dễ dàng thông qua CSS.

Nhận biểu tượng bootstrap

Biến nó thành của bạn với các chủ đề bootstrap chính thức

Đưa Bootstrap lên một tầm cao mới 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 như 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 và các công cụ xây dựng mạnh mẽ.

Duyệt chủ đề bootstrap