国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Skip to main content
Check
New in v5.2 CSS 變量、響應(yīng)式畫布、新實(shí)用程序等等! Bootstrap

使用 Bootstrap 構(gòu)建快速響應(yīng)式的網(wǎng)站

功能強(qiáng)大、可擴(kuò)展且功能豐富的前端工具包。使用 Sass 構(gòu)建和自定義，利用預(yù)構(gòu)建的網(wǎng)格系統(tǒng)和組件，并使用強(qiáng)大的 JavaScript 插件使項(xiàng)目栩栩如生. 

npm i bootstrap@5.2.0
閱讀文檔

當(dāng)前 v5.2.0 · 下載 · v4.6.x 文檔 · 所有版本

以您想要的任何方式開始

直接使用 Bootstrap 進(jìn)行構(gòu)建——使用 CDN，通過包管理器安裝它，或者下載源代碼.

閱讀安裝文檔

通過包管理器安裝

通過 npm、RubyGems、Composer 或 Meteor 安裝 Bootstrap 的源 Sass 和 JavaScript 文件。包管理安裝不包括文檔或我們的完整構(gòu)建腳本. 您還可以 使用我們的 npm 模板 repo 通過 npm 快速生成 Bootstrap 項(xiàng)目. 

npm install bootstrap@5.2.0
gem install bootstrap -v 5.2.0

閱讀我們的安裝文檔 以獲取更多信息和其他包管理器.

通過 CDN 包含

當(dāng)只需要包含 Bootstrap 編譯好的 CSS 或 JS 時(shí)，可以使用 jsDelivr. 通過我們的簡單快速入門查看它的實(shí)際效果, 或 瀏覽示例以快速啟動您的下一個(gè)項(xiàng)目. 您也可以選擇分別包含 Popper 和我們的JS. . 

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

閱讀我們的入門指南

借助我們的官方指南，快速將 Bootstrap 的源文件包含在新項(xiàng)目中.

Webpack Parcel Vite

使用 Sass 自定義一切

Bootstrap 將 Sass 用于模塊化和可定制的架構(gòu)。僅導(dǎo)入您需要的組件，啟用漸變和陰影等全局選項(xiàng)，并使用我們的變量、映射、函數(shù)和 mixins 編寫您自己的 CSS.

了解有關(guān)定制的更多信息

包括所有 Bootstrap 的 Sass

導(dǎo)入一個(gè)樣式表，您就可以參加我們CSS每個(gè)功能的比賽.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

詳細(xì)了解我們的全局 Sass 選項(xiàng).

包括你需要的

自定義 Bootstrap 的最簡單方法 - 僅包含您需要的 CSS.

// 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";

了解有關(guān)將 Bootstrap 與 Sass 一起使用的更多信息.

使用 CSS 變量實(shí)時(shí)構(gòu)建和擴(kuò)展

Bootstrap 5 隨著每個(gè)版本的發(fā)布而不斷發(fā)展，以便更好地將 CSS 變量用于全局主題樣式、單個(gè)組件甚至實(shí)用程序。我們在:root 級別為顏色、字體樣式等提供了數(shù)十個(gè)變量，以便在任何地方使用。在組件和實(shí)用程序上，CSS 變量的作用域?yàn)橄嚓P(guān)類，并且可以輕松修改。

了解有關(guān) CSS 變量的更多信息

使用 CSS 變量

使用我們的任何 全局 :root 變量 來編寫新樣式. CSS 變量使用 var(--bs-variableName) 語法并且可以被子元素繼承.

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

通過 CSS 變量進(jìn)行自定義

覆蓋全局、組件或?qū)嵱贸绦蝾愖兞?，以按照您的喜好自定義 Bootstrap。無需重新聲明每條規(guī)則，只需一個(gè)新的變量值.

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

組件,滿足實(shí)用程序API的要求

Bootstrap 5 中的新功能，我們的實(shí)用程序現(xiàn)在由我們的Utility API生成. 我們將其構(gòu)建為功能豐富的 Sass map，可以快速輕松地自定義. 添加、刪除或修改任何實(shí)用程序類從未如此簡單。使實(shí)用程序響應(yīng)，添加偽類變體，并給他們自定義名稱.

了解有關(guān)實(shí)用程序的更多信息 探索定制組件

快速定制組件
// 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,
    )
  )
);

無需 jQuery 的強(qiáng)大 JavaScript 插件

輕松添加可切換的隱藏元素、模式和 offcanvas 菜單、彈出框和工具提示等等——所有這些都無需 jQuery. Bootstrap 中的 JavaScript 是 HTML 優(yōu)先的，這意味著添加插件就像添加data屬性一樣簡單. 需要更多控制？以編程方式包含單個(gè)插件.

了解有關(guān) Bootstrap JavaScript 的更多信息

Data屬性 API

既然可以編寫 HTML，為什么還要編寫更多 JavaScript？幾乎所有 Bootstrap 的 JavaScript 插件都具有一流的data API，允許您通過添加data屬性來使用 JavaScript.

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

了解更多關(guān)于 我們作為模塊的 JavaScript 和 使用編程 API 的信息.

使用Bootstrap圖標(biāo)對其進(jìn)行個(gè)性化

Bootstrap Icons 是一個(gè)開源 SVG 圖標(biāo)庫，包含超過 1,500 個(gè)字形，每個(gè)版本都會添加更多字形。它們被設(shè)計(jì)用于任何項(xiàng)目，無論您是否使用 Bootstrap 本身。將它們用作 SVG 或圖標(biāo)字體——這兩個(gè)選項(xiàng)都為您提供矢量縮放和通過 CSS 輕松自定義.

獲取 Bootstrap Icons

Bootstrap Icons

使用官方 Bootstrap 主題讓它成為你的

使用來自官方 Bootstrap 主題市場. 的高級主題將 Bootstrap 提升到一個(gè)新的水平。主題作為它們自己的擴(kuò)展框架構(gòu)建在 Bootstrap 之上，包含豐富的新組件和插件、文檔和強(qiáng)大的構(gòu)建工具.

瀏覽Bootstrap主題

Bootstrap Themes