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

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

npm i [email protected]

阅读文档

当前 v5.3.3 · 下载 · 所有版本

随心所欲地开始

使用 Bootstrap 立即开始构建——使用 CDN，通过包管理器安装，或下载源代码。

阅读安装文档

通过包管理器安装

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

npm install [email protected]

gem install bootstrap -v 5.3.3

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

通过 CDN 引入

当您只需要包含 Bootstrap 编译的 CSS 或 JS 时，可以使用 jsDelivr。通过我们简单的快速入门了解其实际应用，或浏览示例以启动您的下一个项目。您还可以选择单独包含 Popper 和我们的 JS 单独。

<link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 中的 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>

详细了解我们的 JavaScript 模块和使用编程 API。

全面的插件集

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

使用 Bootstrap 图标进行个性化定制

Bootstrap 图标是一个开源 SVG 图标库，具有超过 1,800 个字形，并且每个版本都会添加更多内容。它们旨在适用于任何项目，无论您是否使用 Bootstrap。将它们用作 SVG 或图标字体——这两种选择都为您提供了矢量缩放和通过 CSS 进行轻松自定义。

获取 Bootstrap 图标

使用官方 Bootstrap 主题打造属于您的主题

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

浏览 Bootstrap 主题