使用 Bootstrap 构建快速,响应式网站
功能强大、可扩展且功能丰富的前端工具包。使用 Sass 构建和定制,利用预构建的网格系统和组件,并通过强大的 JavaScript 插件将项目变为现实.
npm i bootstrap@5.3.2
功能强大、可扩展且功能丰富的前端工具包。使用 Sass 构建和定制,利用预构建的网格系统和组件,并通过强大的 JavaScript 插件将项目变为现实.
npm i bootstrap@5.3.2
通过 npm、RubyGems、Composer 或 Meteor 安装 Bootstrap 的源 Sass 和 JavaScript 文件. 包管理的安装不包括文档或完整的构建脚本. 您还可以使用示例存储库中的任何演示来快速启动 Bootstrap 项目.
npm install bootstrap@5.3.2
gem install bootstrap -v 5.3.2
请阅读我们的安装文档 以获取更多信息和其他包管理器.
当您只需要包含 Bootstrap 编译的 CSS 或 JS 时,可以使用jsDelivr。通过我们简单的快速入门查看实际情况,或浏览示例以快速启动您的下一个项目。您还可以选择分别包含 Popper 和我们的 JS .
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-s1swLUYcLBqAXHj7nWZcBD03oDfaVT4TaOQEaQGnSa65SsyckDHTlfGcB8+LOLkz" crossorigin="anonymous"></script>
Bootstrap 利用 Sass 来实现模块化和可定制的架构。仅导入您需要的组件,启用渐变和阴影等全局选项,并使用我们的变量、映射、函数和 mixins 编写您自己的 CSS.
导入一个样式表,您就可以开始使用我们 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 结合使用的更多信息.
Bootstrap 5 随着每个版本的发布而不断发展,以更好地利用 CSS 变量来构建全局主题样式、单个组件甚至实用程序。我们在 :root
级别提供了数十个颜色、字体样式等变量,可在任何地方使用。在组件和实用程序上,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);
}
覆盖全局、组件或实用程序类变量以按照您的喜好自定义 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;
}
Bootstrap 5 中的新增功能,我们的实用程序现在由我们的Utility 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 的实用程序(utility) API 修改我们包含的任何实用程序或为任何项目创建您自己的自定义实用程序。首先导入 Bootstrap,然后使用 Sass map函数来修改、添加或删除实用程序.
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
添加可切换的隐藏元素、模式和画布外菜单、弹出框和工具提示等等,所有这些都无需 jQuery。Bootstrap 的 JavaScript 是 HTML 优先的,这意味着大多数插件都添加了 HTML 中的data
属性。需要更多控制?以编程方式包含单个插件。
当你可以编写 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><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 Icons 是一个开源 SVG 图标库,拥有超过 1,800 个字形,每个版本都会添加更多字形。它们被设计为适用于任何项目,无论您是否使用 Bootstrap 本身。将它们用作 SVG 或图标字体 - 这两个选项都可以让您通过 CSS 进行矢量缩放和轻松自定义.
使用官方 Bootstrap 主题市场的高级主题将 Bootstrap 提升到一个新的水平。主题构建在 Bootstrap 上作为自己的扩展框架,包含丰富的新组件和插件、文档以及强大的构建工具.