Bootstrap 5

全球最流行的前端开源工具包

支持 Sass 变量和 mixin、响应式网格系统、丰富的预定义组件和强大的 JavaScript 插件

开始学习示例博客图标

当前版本 v5.3.3 从 v4 迁移 npm install [email protected]

28M+

月均 npm 下载量

170K+

GitHub Stars

12%

全球网站使用率

20+

预置组件

为什么选择 Bootstrap？

构建响应式、移动优先的网站从未如此简单

Sass 变量和 Mixin

使用 Sass 变量、映射、Mixin 和函数来快速自定义，充分利用 Bootstrap 的底层架构。

响应式网格系统

基于 Flexbox 构建的强大响应式网格系统，支持 6 个断点和 12 列布局。

丰富的预建组件

包含按钮、卡片、导航栏、模态框、轮播等数十个即用型组件。

JavaScript 插件

无需 jQuery 的现代 JavaScript 插件，支持懒加载、动画、表单验证等。

实用工具类

超过 1000 个实用工具类，用于控制间距、颜色、排版、边框、阴影等。

持续更新

紧跟 Bootstrap 官方版本更新，第一时间提供中文文档和资源下载。

快速上手

通过 CDN 引入 Bootstrap，只需两行代码即可开始使用

CDN 引入（推荐）

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

npm 安装

# 安装 Bootstrap
npm install [email protected]

# 安装 Bootstrap Icons
npm install bootstrap-icons

# 在 JS 中导入
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import 'bootstrap-icons/font/bootstrap-icons.css'

下载源码

从 GitHub 下载 Bootstrap 源码，包含 Sass 源文件、JavaScript 源码和文档。

下载 v5.3.3 源码 GitHub

使用 Sass 自定义

通过 Sass 变量和映射自定义 Bootstrap 主题，覆盖默认颜色、间距等。

// 自定义主题颜色
$primary: #7952b3;
$enable-rounded: true;

// 导入 Bootstrap
@import "bootstrap/scss/bootstrap";

查看完整文档

生态资源

Bootstrap.top 中文生态工具和资源

2,000+ 图标

Bootstrap 图标库

超过 2000 个高质量开源 SVG 图标，中文文档与示例，快速检索和自定义

浏览图标

6 个示例

Bootstrap 示例

精选中文示例项目，涵盖后台管理、落地页、电商等多种场景

查看示例

6 篇文章

Bootstrap 中文博客

中文技术文章、版本更新解读、最佳实践与开发技巧

阅读文章

在线工具

实用的前端开发工具，助力高效开发

调色板工具

输入主色自动生成 Bootstrap 完整主题色板，在线预览并复制 CSS 变量。

使用工具

CSS 渐变生成器

在线可视化 CSS 渐变工具，支持线性/径向渐变，实时预览并复制代码。