通过包管理器安装
通过npm、RubyGems、Composer或Meteor安装Bootstrap的源Sass和JavaScript文件。包管理安装不包括文档或我们的完整构建脚本。您还可以使用我们的npm模板repo通过npm快速生成Bootstrap项目。
npm install bootstrap@5.3.0-alpha1
gem install bootstrap -v 5.3.0-alpha1
阅读我们的安装文档了解更多信息和其他软件包管理器。
CDN包含引用
当您只需要包含Bootstrap编译的CSS或JS时,可以使用jsDelivr。通过我们的简单快速启动,或浏览示例开始下一个项目。您也可以选择单独包含Popper和我们的JS。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
使用Sass定制一切
Bootstrap利用Sass实现模块化和可定制的架构。只导入您需要的组件,启用渐变和阴影等全局选项,并使用我们的变量、映射、函数和混合编写您自己的CSS。
引用所有Bootstrap’s Sass
导入一个样式表,您就可以使用CSS的所有功能进行比赛。
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
按需要引入
自定义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";
使用CSS变量实时构建和扩展
Bootstrap 5随着每个版本不断发展,以更好地将CSS变量用于全局主题样式、单个组件甚至实用程序。我们在:root
级别为颜色、字体样式等提供了数十个变量,可在任何地方使用。在组件和实用程序上,CSS变量的作用域是相关的类,可以很容易地进行修改。
使用CSS变量
使用我们的global:root
变量来编写新样式。CSS变量使用var(--bs variableName)
语法,可以由子元素eleme继承nts.
.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地图,可以快速轻松地进行定制。添加、删除或修改任何实用程序类从未如此简单。使实用程序响应,添加伪类变量,并为它们提供自定义名称。
快速自定义组件
将我们包含的任何实用程序类应用于我们的组件以自定义其外观,如下面的导航示例所示。从定位和sizeng到颜色以及效果,有数百个类可用。将它们与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,
)
)
);
强大JavaScript插件无须jQuery
添加可切换的隐藏元素、模态和画布外菜单、弹出窗口和工具提示,等等,所有这些都不需要jQuery。Bootstrap的JavaScript首先是HTML,这意味着大多数插件都在HTML中添加了data
属性。需要更多控制?以编程方式包含各个插件。
数据属性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模块化 and 使用可变程API.
Bootstrap插件一览表
Bootstrap有十几个插件,您可以将其放入任何项目中。一次将它们全部放入,或选择您需要的。
使Bootstrap图标进行个性化设置
Bootstrap Icons 是一个开源SVG图标库,具有1800多个字形,每个版本都添加了更多。它们设计用于任何项目,无论您是否使用Bootstrap本身。将它们用作SVG或图标字体,这两个选项都可以通过CSS实现矢量缩放和轻松定制。
使用官方Bootstrap主题打造专属体验
通过官方Bootstrap主题市场。主题作为其自己的扩展框架构建在Bootstrap上,包含丰富的新组件和插件、文档和强大的构建工具。