跳至主要内容
最新 v5.3 颜色模式支持、扩展调色板等等！ Bootstrap

使用 Bootstrap 构建快速响应的网站

功能强大、可扩展且功能丰富的前端工具包。使用 Sass 进行构建和自定义，利用预构建的网格系统和组件，并使用强大的 JavaScript 插件使项目栩栩如生。 

npm i bootstrap@5.3.0-alpha2
阅读文档

Currently v5.3.0-alpha2 · 下载 · v4.6.x 文档 · 所有版本

以您想要的任何方式开始

直接进入使用 Bootstrap 进行构建 - 使用 CDN、通过包管理器安装它或下载源代码。

阅读安装文档

通过包管理器安装

通过 npm、RubyGems、Composer 或 Meteor 安装 Bootstrap 的源 Sass 和 JavaScript 文件。包托管安装不包括文档或我们的完整构建脚本。您还可以使用我们示例存储库中的任何演示来快速启动 Bootstrap 项目。 

npm install bootstrap@5.3.0-alpha2
gem install bootstrap -v 5.3.0-alpha2

阅读我们的安装文档以获取更多信息和其他包管理器。

通过 CDN 包含

当你只需要包含 Bootstrap 编译的 CSS 或 JS 时，你可以使用 jsDelivr。使用我们简单的 快速入门, 或 浏览示例 以快速启动您的下一个项目。你也可以选择包括Popper和我们的JS 来分离。 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

阅读我们的入门指南

通过我们的官方指南，将 Bootstrap 的源文件包含在新项目中。

Webpack Parcel Vite

使用 Sass 自定义一切

Bootstrap利用Sass进行模块化和可定制的架构。仅导入您需要的组件，启用渐变和阴影等全局选项，并使用我们的变量、映射、函数和 mixins 编写您自己的 CSS。

了解有关自定义的详细信息

包括 Bootstrap 的所有 Sass

导入一个样式表，您就可以使用我们 CSS 的每个功能。

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

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

了解更多关于我们的 全局 Sass 选项。

包括您需要的内容

自定义 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";

Learn more about using Bootstrap with Sass.

使用 CSS变量实时构建和扩展

Bootstrap 5 随着每个版本的发展而不断发展，以更好地将 CSS 变量用于全局主题样式、单个组件甚至实用程序。我们在 ：root 级别为颜色、字体样式等提供了数十个变量，以便在任何地方使用。在组件和实用程序上，CSS 变量的作用域为相关类，并且可以轻松修改。

详细了解 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 变量进行定制s

覆盖全局、组件或实用程序类变量，以按照您喜欢的方式自定义 Bootstrap。无需重新声明每个规则，只需一个新的变量值。

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

组件，满足实用程序的 API

Bootstrap 5 中的新功能，我们的实用程序现在由我们的Utility API 生成。我们将其构建为功能丰富的 Sass 地图，可以快速轻松地进行自定义。添加、删除或修改任何实用程序类从未如此简单。使实用程序具有响应性，添加伪类变体，并为其指定自定义名称。

快速自定义组件

将我们包含的任何实用程序类应用于我们的组件以自定义其外观，如下面的导航示例所示。 There are hundreds of classes available—from positioning and sizing to colors and effects.将它们与 CSS 变量覆盖混合使用，以实现更多控制。

<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
  <li class="nav-item" role="presentation">
    <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
  </li>
</ul>

探索自定义组件

创建和扩展实用程序

使用 Bootstrap 的实用程序 API 修改我们包含的任何实用程序，或为任何项目创建您自己的自定义实用程序。首先导入Bootstrap程序，然后使用 Sass 映射函数修改、添加或删除实用程序。

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

探索实用程序 API

强大的JavaScript插件，无需jQuery。

添加可切换的隐藏元素、模态和画布外菜单、弹出框和工具提示等等 - 所有这些都无需 jQuery。Bootstrap的JavaScript是HTML优先的，这意味着大多数插件都是在HTML中添加 data 属性的。需要更多控制？以编程方式包含单个插件。

了解有关 Bootstrap JavaScript 的更多信息

数据属性 API

当你可以写HTML时，为什么要写更多的JavaScript？几乎所有 Bootstrap 的 JavaScript 插件都具有一流的数据 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><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
  </ul>
</div>

Learn more about our JavaScript as modules and using the programmatic API.

全面的插件集

Bootstrap 具有十几个插件，您可以将其放入任何项目中。一次将它们全部放入，或只选择您需要的那些。

警报(Alerts)

向用户显示和隐藏警报消息。

B按钮utton

以编程方式控制按钮的活动状态。

轮播(Carousel)

向任何页面添加幻灯片，包括对交叉淡入淡出的支持。

折叠(Collapse)

展开和折叠内容区域，或创建手风琴。

下拉菜单

创建链接、操作、表单等菜单。

模式(Modal)

向项目添加灵活且响应迅速的对话框。

画布(Offcanvas)

构建隐藏的侧边栏并将其切换到任何页面。

弹出框

创建自定义叠加层。建立在Popper上。

滚动

根据页面滚动自动更新活动导航链接。

Tab

允许Bootstrap导航组件切换内容。

Toast

向访问者显示和隐藏通知。

工具提示(Tooltips)

将浏览器工具提示替换为自定义工具提示。建立在Popper上。

Personalize it with Bootstrap Icons

Bootstrap Icons 是一个开源的 SVG 图标库，包含 1，800 多个字形，每个版本都会添加更多字形。它们旨在适用于任何项目，无论您是否使用 Bootstrap 本身。将它们用作 SVG 或图标字体 - 这两个选项都为您提供了矢量缩放和通过 CSS 轻松自定义。

获取 Bootstrap Icons

Bootstrap Icons

使其成为您的Bootstrap官方主题

使用来自官方Bootstrap主题市场的高级主题将Bootstrap提升到一个新的水平。主题基于 Bootstrap 构建，作为自己的扩展框架，包含丰富的新组件和插件、文档和强大的构建工具。

浏览 Bootstrap 主题

Bootstrap Themes