Skip to main content
New in v5.3 支持颜色模式，可扩展调色板，以及更多特性! Bootstrap

用 Bootstrap 建立快速、响应式的网站

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

npm i bootstrap@5.3.2
阅读文档

当前版本 v5.3.2 · Download · All releases

按你希望的任何方式开始

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

阅读安装文档

通过包管理器安装

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

npm install bootstrap@5.3.2
gem install bootstrap -v 5.3.2

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

通过CDN包含

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 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/variables-dark";
@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";

了解更多信息 将Bootstrap与Sass一起使用。

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

Bootstrap 5随着每个版本的发布而不断发展，以更好地将CSS变量用于全局主题样式、单个组件甚至utilities工具集。 我们提供了大量的颜色变量，字体样式，以及在 :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变量进行自定义

重写全局、组件或实用utility工具集类变量，以便根据自己的喜好自定义引导。 不需要重新声明每个规则，只需要一个新的变量值。

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

组件，使用工具集Utility API

Bootstrap 5中的新功能，我们的工具集现在由 Utility API。 我们将其构建为一个功能丰富的Sass地图，可以快速轻松地进行定制。 添加、删除或修改任何实用程序类都是前所未有的简单。 使工具集成为响应式的，添加伪类变体，并为它们提供自定义名称。

快速自定义组件

将我们包含的任何工具集应用于我们的组件，以自定义它们的外观，如下面的导航示例。 有数百个类可供选择--来自 positioning 和 sizing 到 colors 和 特效。 将它们与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的utility API修改我们包含的任何utilities，或为任何项目创建您自己的自定义utilities。 首先导入Bootstrap，然后使用Sass Map 函数来修改、添加或删除utilities。

@import "bootstrap/scss/bootstrap";

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

探索utilities API

强大的JavaScript插件，无需jQuery

添加可切换的隐藏元素、模式和画布外菜单、弹出窗口和工具提示等等——所有这些都不需要jQuery。 Bootstrap的JavaScript是HTML声明优先的，这意味着大多数插件可以通过在HTML添加 data 属性。 需要更多的控制吗？ 以编程方式包括各个插件。

了解有关Bootstrap JavaScript的更多信息

Data属性API

既然可以写HTML，为什么还要写更多的JavaScript？ Bootstrap的几乎所有JavaScript插件都是data API优先，只需添加 data 属性。

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

了解更多信息关于 我们的JavaScript模块 使用 使用程序化API.

一套全面的插件

Bootstrap提供了十几个插件，你可以将其放入任何项目中。 一次把它们全部放进去，或者只选择你需要的。

Alert

Show and hide alert messages to your users.

Button

Programmatically control the active state for buttons.

Carousel

Add slideshows to any page, including support for crossfade.

Collapse

Expand and collapse areas of content, or create accordions.

Dropdown

Create menus of links, actions, forms, and more.

Modal

Add flexible and responsive dialogs to your project.

Offcanvas

Build and toggle hidden sidebars into any page.

Popover

Create custom overlays. Built on Popper.

Scrollspy

Automatically update active nav links based on page scroll.

Tab

Allow Bootstrap nav components to toggle contents.

Toast

Show and hide notifications to your visitors.

Tooltip

Replace browser tooltips with custom ones. Built on Popper.

使用Bootstrap Icons 进行个性化设置

Bootstrap Icons 是一个开源的SVG图标库，具有1800多个字形，每次发布都会添加更多字形。 它们设计用于任何项目，无论您是否使用Bootstrap本身。 将它们用作SVG或图标字体——这两种选项都可以通过CSS实现矢量缩放和轻松定制。

获取Bootstrap Icons

Bootstrap Icons

使用官方Bootstrap主题让它成为你的专属主题

通过使用各种来自 官方Bootstrap主题市场的主题将Bootstrap带入更高的级别。 主题作为自己的扩展框架构建在Bootstrap上，其中包含丰富的新组件和插件、文档和强大的构建工具。

浏览 Bootstrap 主题

Bootstrap Themes