Skip to main content
Check
New in v5.2 CSS 变量、响应式画布、新实用程序等等! Bootstrap

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

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

npm i bootstrap@5.2.0
阅读文档

当前 v5.2.0 · 下载 · v4.6.x 文档 · 所有版本

以您想要的任何方式开始

直接使用 Bootstrap 进行构建——使用 CDN,通过包管理器安装它,或者下载源代码.

阅读安装文档

通过包管理器安装

通过 npm、RubyGems、Composer 或 Meteor 安装 Bootstrap 的源 Sass 和 JavaScript 文件。包管理安装不包括文档或我们的完整构建脚本. 您还可以 使用我们的 npm 模板 repo 通过 npm 快速生成 Bootstrap 项目.

npm install bootstrap@5.2.0
gem install bootstrap -v 5.2.0

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

通过 CDN 包含

当只需要包含 Bootstrap 编译好的 CSS 或 JS 时,可以使用 jsDelivr. 通过我们的简单快速入门查看它的实际效果, 或 浏览示例以快速启动您的下一个项目. 您也可以选择分别包含 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 的源文件包含在新项目中.

使用 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";

了解有关将 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 中的新功能,我们的实用程序现在由我们的Utility API生成. 我们将其构建为功能丰富的 Sass map,可以快速轻松地自定义. 添加、删除或修改任何实用程序类从未如此简单。使实用程序响应,添加伪类变体,并给他们自定义名称.

了解有关实用程序的更多信息 探索定制组件

快速定制组件

// 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 的强大 JavaScript 插件

轻松添加可切换的隐藏元素、模式和 offcanvas 菜单、弹出框和工具提示等等——所有这些都无需 jQuery. Bootstrap 中的 JavaScript 是 HTML 优先的,这意味着添加插件就像添加data属性一样简单. 需要更多控制?以编程方式包含单个插件.

了解有关 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>

了解更多关于 我们作为模块的 JavaScript使用编程 API 的信息.

使用Bootstrap图标对其进行个性化

Bootstrap Icons 是一个开源 SVG 图标库,包含超过 1,500 个字形,每个版本都会添加更多字形。它们被设计用于任何项目,无论您是否使用 Bootstrap 本身。将它们用作 SVG 或图标字体——这两个选项都为您提供矢量缩放和通过 CSS 轻松自定义.

获取 Bootstrap Icons

Bootstrap Icons

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

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

浏览Bootstrap主题

Bootstrap Themes