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

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

净现值法i引导@5.3.3

阅读文档

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

随心所欲地开始

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

阅读安装文档

通过程序包管理器安装

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

npm安装引导@5.3.3

gem安装引导程序-v 5.3.3

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

通过CDN包含

当您只需要包含Bootstrap编译的CSS或JS时，可以使用jsDeliver公司用我们的简单快速启动，或浏览示例启动下一个项目。您还可以选择包括Popper和我们的JS分别地。

<链接 href公司="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css“ 相对=“样式表” 完整性=“sha384-QWTKZyjpPEjISv5WaRU9OFeSpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” 交叉原点=“匿名”>

<脚本 型钢混凝土="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js“ 完整性=“sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz” 交叉原点=“匿名”></脚本>

阅读我们的入门指南

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

网络包

包裹

维特

使用Sass定制一切

Bootstrap利用Sass实现模块化和可定制的体系结构。只导入您需要的组件，启用渐变和阴影等全局选项，并使用我们的变量、映射、函数和mixin编写您自己的CSS。

了解有关自定义的更多信息

包括Bootstrap的所有Sass

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

//变量优先覆盖$主要: #900;
$enable-阴影: 真的;
$前缀: “月-”;

//然后导入引导数据库@导入 “../node_modules/bootstrap/scss/bootstrap”;

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

包括您需要的内容

自定义Bootstrap的最简单方法只包括您需要的CSS。

//功能优先@导入 “../node_modules/bootstrap/scss/functions”;

//变量超越秒$主要: #900;
$enable-阴影: 真的;
$前缀: “莫-”;

//必需的引导导入@导入 “../node_modules/bootstrap/scss/variables”;
@导入 “../node_modules/bootstrap/scss/variables-dark”;
@导入 “../node_modules/bootstrap/scss/maps”;
@导入 “../node_modules/bootstrap/scss/mixins”;
@导入 “../node_modules/bootstrap/scss/root”;

//可选组件@导入 “../node_modules/bootstrap/scss/utilities”;
@导入 “../node_modules/bootstrap/scss/reboot”;
@导入 “../node_modules/bootstrap/scss/containers”;
@导入 “../node_modules/bootstrap/scss/grid”;
@导入 “../node_modules/bootstrap/scss/helpers”;
@进口 “../node_modules/bootstrap/scss/utilities/api”;

了解有关的更多信息在Sass中使用Bootstrap。

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

Bootstrap 5在每个版本中都在不断发展，以便更好地将CSS变量用于全局主题样式、单个组件甚至实用程序。我们在一个：root水平仪，可在任何地方使用。在组件和实用程序中，CSS变量的作用域是相关的类，可以很容易地进行修改。

了解有关CSS变量的更多信息

使用CSS变量

使用我们的任何全球的：root变量编写新样式。CSS变量使用var（--bs-variableName）语法和可以由子元素继承。

.组件 {
  颜色: 变量(--bs-gray-800型);
  背景色: 变量(--bs-gray-100型);
  边境: 1二甲苯 固体 变量(--bs-gray-200型);
  边界半径: .25雷姆;
}

.组件标头 {
  颜色: 变量(--bs-紫色);
}

通过CSS变量自定义

重写全局、组件或实用程序类变量以自定义引导程序。不需要重新声明每个规则，只需要一个新的变量值。

身体 {
  --bs-身体-家庭: 变量(--bs-font-monospace);
  --bs-车身-线路-高度: 1.4;
  --bs车身bg: 变量(--bs-gray-100型);
}

.表 {
  --bs-表色: 变量(--bs-gray-600型);
  --bs-表-bg: 变量(--bs-gray-100型);
  --bs表边框颜色: 透明的;
}

组件，符合实用程序API

Bootstrap 5中的新增功能，我们的实用程序现在由我们的实用程序API。我们将其构建为一个可快速轻松定制的特色Sass地图。添加、删除或修改任何实用程序类从未如此容易。使实用程序具有响应性，添加伪类变体，并为其提供自定义名称。

快速自定义组件

将我们包含的任何实用程序类应用于组件以自定义其外观，如下面的导航示例。有数百个可用的类定位和上浆到颜色和影响。将它们与CSS变量覆盖混合，以获得更多控制。

<ul公司 班=“nav-nav-pills nav-fill gap-2 p-1小bg-primary rounded-5阴影-sm” 身份证件=“立柱导航2” 角色=“小报” 风格=“--bs-nav-link-color:var（--bs-white）；--bs-nav-pills-link-active-color:var（--bs-primary）；--bs-nav-pills-link-active-bg:var>
  <锂 班=“导航项目” 角色=“演示文稿”>
    <按钮 班=“nav-link active rounded-5” 身份证件=“home-tab2” data-bs切换=“选项卡” 类型=“按钮” 角色=“选项卡” 选自咏叹调=“正确”>主页</按钮>
  </锂>
  <锂 班=“导航项目” 角色=“演示文稿”>
    <按钮 班=“nav-link rounded-5” 身份证件=“profile-tab2” data-bs切换=“选项卡” 类型=“按钮” 角色=“选项卡” 选自咏叹调=“假”>简况</按钮>
  </锂>
  <锂 班=“导航项目” 角色=“演示文稿”>
    <按钮 班=“nav-link rounded-5” 身份证件=“联系人-tab2” data-bs切换=“选项卡” 类型=“按钮” 角色=“选项卡” 选自咏叹调=“假”>联系人</按钮>
  </锂>
</ul公司>

探索自定义组件

创建和扩展实用程序

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

@导入 “bootstrap/scs/bootstrap”;

$实用程序: map-merge地图(
  $实用程序,
  (
    “光标”: (
      财产: 光标,
      班: 光标,
      反应敏捷的: 真的,
      值: 汽车 指针 抓住,
    )
  )
);

探索实用程序API

没有jQuery的强大JavaScript插件

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

了解有关引导JavaScript的更多信息

数据属性API

既然可以编写HTML，为什么还要编写更多JavaScript？几乎所有Bootstrap的JavaScript插件都有一个一流的数据API，允许您通过添加数据属性。

<div公司 班=“下拉列表”>
  <按钮 班=“btn-btn-primary下拉框” 类型=“按钮” data-bs切换=“下拉列表” 咏叹调膨胀=“假”>
下拉菜单  </按钮>
  <ul公司 班=“下拉菜单”>
    <锂><按钮 班=“下拉菜单项” 类型=“按钮”>下拉项</按钮></锂>
    <锂><按钮 班=“下拉菜单项” 类型=“按钮”>下拉项</按钮></锂>
    <锂><按钮 班=“下拉项” 类型=“按钮”>下拉项</按钮></锂>
  </ul公司>
</div公司>

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

全套插件

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

使用引导程序图标进行个性化设置

引导图标是一个开源SVG图标库，拥有1800多个标志符号，每个版本都会添加更多标志符号。它们设计用于任何项目，无论您是否使用Bootstrap本身。将它们用作SVG或图标字体，这两个选项都可以通过CSS进行矢量缩放和轻松定制。

获取引导图标

使用官方引导主题打造专属体验

将Bootstrap带到下一个级别官方Bootstrap主题市场主题是在Bootstrap上构建的，作为它们自己的扩展框架，包含丰富的新组件和插件、文档和强大的构建工具。

浏览引导程序主题