Skip to main content
Bootstrap

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

强大、可扩展、且功能丰富的前端工具包。 使用 Sass 构建和定制，利用预构建的网格系统和组件，并通过强大的 JavaScript 插件将项目变为现实。 

npm i bootstrap@5.3.3
阅读文档

当前版本 v5.3.3 · 下载

以你想要的方式开始

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

阅读安装文档

通过包管理器安装

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

npm install bootstrap@5.3.3
gem install bootstrap -v 5.3.3

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

通过 CDN 引入

当你只需要引入 Bootstrap 编译好的 CSS 或 JS 时，你可以使用 jsDelivr。 通过我们简单的 快速入门 来查看它的实际操作，或者 浏览示例 以快速启动你的下一个项目。 你还可以选择 分别 引入 Popper 和我们的 JS。 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

阅读我们的入门指南

通过我们的官方指南，快速将 Bootstrap 的源文件引入到新项目中。

Webpack Parcel Vite

使用 Sass 定制一切

Bootstrap 利用 Sass 来实现模块化和可定制的架构。 仅导入你需要的组件，启用渐变和阴影等全局选项，并使用我们的变量、映射、函数和混入编写你自己的 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 变量。 我们在 :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 变量进行定制

覆盖全局、组件或实用工具的类变量以按照你的喜好定制 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 中的新增功能，我们的实用工具现在由我们的 实用工具 API 生成。 我们将其构建为功能丰富的 Sass 映射，可以快速轻松地进行定制。 添加、删除、或修改任何实用工具类从未如此简单。 使实用工具具有响应式，添加伪类变体，并为它们提供自定义名称。

快速定制组件

将我们引入的任何实用工具类应用于我们的组件以定制其外观，如下面的导航示例。 有数百个可用的类 - 从 定位 和 尺寸 到 颜色 和 效果。 将它们与 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 中添加数据属性的。 需要更多控制？ 以编程方式引入各个插件。

了解有关 Bootstrap JavaScript 的更多信息

数据属性 API

当你可以编写 HTML 时，为什么还要编写更多 JavaScript？ 几乎所有 Bootstrap 的 JavaScript 插件都具有一流的数据 API，允许你只需添加数据属性即可使用 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>

了解有关 我们的 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 图标进行个性化

Bootstrap 图标 是一个开源 SVG 图标库，拥有超过 1,800 个字形，每个版本都会添加更多字形。 它们被设计为适用于任何项目，无论你是否使用 Bootstrap 本身。 将它们用作 SVG 或图标字体 - 这两个选项都可以让你通过 CSS 进行矢量缩放和轻松定制。

获取 Bootstrap 图标

Bootstrap Icons

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

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

浏览 Bootstrap 主题

Bootstrap Themes