使用引导建立快速、响应迅速的站点

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

npm一引导@5.2.1

阅读文档

目前v5.2.1版 · 下载 · v4.6.x文档 · 所有版本

想怎么开始就怎么开始吧

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

阅读安装文档

通过包管理器安装

通过npm、RubyGems、Composer或Meteor安装引导源Sass和JavaScript文件。包管理的安装不包括文档或完整的构建脚本。你也可以使用我们的npm模板回购通过npm快速生成一个引导项目。

npm安装引导@5.2.1

gem安装引导-v 5.2.1

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

通过CDN包含

当您只需要包含引导程序编译的CSS或JS时，可以使用JSdeliver公司。请用我们的简单快速入门，或浏览示例开始你的下一个项目。你也可以选择包括Popper和我们的JS分别地.

<!-- 仅限CSS-->
<链接 href="https://cdn.jsdeliver.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css“ 雷尔=“样式表” 完整性=“sha384 iYQeCzEYFbKjA/T2UDLTPKWGZCIQ6大豆8TYAI1GYVH/UjpbCx/TYkiZhlZB6+fzT” 交叉原点=“匿名”>

<!-- JavaScript捆绑包与Popper-->
<脚本 src公司="https://cdn.jsdeliver.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js“ 完整性=“sha384-U1OKNCPxWVY5KFMNBILK2HRNQC3PR17A+RTT6rIHI7NnikvbZlHgTPOOmMi466C8” 交叉原点=“匿名”></脚本>

阅读我们的入门指南

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

网页包

包裹

维生素

用Sass定制一切

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

了解有关自定义的详细信息

包括所有引导的sas

导入一个样式表，你就可以开始使用我们的CSS的每一个特性了。

//变量优先覆盖$初级: #900个;
$启用阴影: 是的;
$前缀: “莫——”;

//然后导入引导@进口 “./node\u modules/bootstrap/scss/bootstrap”;

进一步了解全局Sass选项.

包括你需要的

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

//功能优先@进口 “./node_modules/bootstrap/scs/函数”;

//变量覆盖秒$初级: #900个;
$启用阴影: 是的;
$前缀: “莫——”;

//必需的引导导入@进口 “./node\u modules/bootstrap/scss/variables”;
@进口 “./node\u modules/bootstrap/scss/maps”;
@进口 “./node_modules/bootstrap/scss/mixins”;
@进口 “./node\u modules/bootstrap/scss/root”;

//可选组件@进口 “./node\u modules/bootstrap/scss/utilities”;
@进口 “./node_modules/bootstrap/scss/reboot”;
@进口 “./node\u modules/bootstrap/scs/containers”;
@进口 “./node\u modules/bootstrap/scss/grid”;
@进口 “./node\u modules/bootstrap/scss/helpers”;
@进口 “./node_modules/bootstrap/scss/utilities/api”;

了解更多在Sass中使用引导.

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

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

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

使用CSS变量

使用我们的全球的：根目录变量写新的风格。CSS变量使用变量（--bs variableName）语法，并且可以由子元素继承。

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

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

通过CSS变量自定义

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

身体 {
  --bs正文字体系列: 变量(--bs字体等宽);
  --bs车身线条高度: 1.4;
  --bs主体bg: 变量(--bs-灰色-100);
}

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

组件，满足实用程序API

在bootstrap5中，我们的实用程序现在由实用程序API。我们将其构建为一个功能打包的Sass地图，可以快速轻松地进行定制。添加、删除或修改任何实用程序类都是前所未有的简单。使实用程序响应，添加伪类变量，并给它们自定义名称。

了解更多实用程序浏览自定义组件

快速自定义组件

//使用实用程序API创建和扩展实用程序
@进口 “引导/scss/bootstrap”;

$公用事业: 地图合并(
  $公用事业,
  (
    “光标”: (
      财产: 光标,
      班: 光标,
      反应敏捷的: 是的,
      价值观: 汽车 指针 抓住,
    )
  )
);

没有jQuery的强大JavaScript插件

很容易添加可切换的隐藏元素、modals和offcanvas菜单、弹出窗口和工具提示等等，所有这些都不需要jQuery。Bootstrap中的JavaScript首先是HTML，这意味着添加插件和添加插件一样简单数据属性。需要更多的控制？以编程方式包含单个插件。

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

数据属性API

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

<迪夫 班=“下拉列表”>
  <按钮 班=“btn btn主下拉切换” 类型=“按钮” 数据基站切换=“下拉列表” 咏叹调展开=“错误”>
下拉列表  </按钮>
  <保险商实验室 班=“下拉菜单”>
    <锂><一 班=“下拉项” href="#">下拉项</一></锂>
    <锂><一 班=“下拉项” href="#">下拉项</一></锂>
    <锂><一 班=“下拉项” href="#">下拉项</一></锂>
  </保险商实验室>
</迪夫>

了解更多我们的JavaScript作为模块和使用编程API.

全套插件

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

使用引导图标对其进行个性化设置

引导图标是一个开放源码的SVG图标库，具有1500多个字形，每个版本都会添加更多。它们被设计用于任何项目，无论您是否使用引导程序。使用它们作为SVG或图标字体，这两个选项都可以通过CSS实现矢量缩放和轻松定制。

获取引导图标

以官方引导主题打造属于您的专属鞋款

使用来自官方引导主题市场.Themes是在Bootstrap上构建的，作为它们自己的扩展框架，有丰富的新组件和插件、文档和功能强大的构建工具。

浏览引导主题