全球最流行的前端开源工具包
支持 Sass 变量和 mixin、响应式网格系统、丰富的预定义组件和强大的 JavaScript 插件
构建响应式、移动优先的网站从未如此简单
使用 Sass 变量、映射、Mixin 和函数来快速自定义，充分利用 Bootstrap 的底层架构。
基于 Flexbox 构建的强大响应式网格系统，支持 6 个断点和 12 列布局。
包含按钮、卡片、导航栏、模态框、轮播等数十个即用型组件。
无需 jQuery 的现代 JavaScript 插件，支持懒加载、动画、表单验证等。
超过 1000 个实用工具类，用于控制间距、颜色、排版、边框、阴影等。
紧跟 Bootstrap 官方版本更新，第一时间提供中文文档和资源下载。
103+ 免费在线前端开发工具，无需注册，即开即用
JS/CSS/HTML 美化压缩
REM/VW/em/百分比换算
渐变/阴影/圆角/颜色
Flexbox/Grid/面板布局
px/rem/em/vw 互转
模板/表单/导航生成
Meta/Open Graph 生成
随机/Hash/文本/编码
通过 CDN 引入 Bootstrap，只需两行代码即可开始使用
<!-- 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">
# 安装 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 源码和文档。
通过 Sass 变量和映射自定义 Bootstrap 主题，覆盖默认颜色、间距等。
// 自定义主题颜色 $primary: #7952b3; $enable-rounded: true; // 导入 Bootstrap @import "bootstrap/scss/bootstrap";
Bootstrap.top 中文生态工具和资源
超过 2000 个高质量开源 SVG 图标，中文文档与示例，快速检索和自定义
精选中文示例项目，涵盖后台管理、落地页、电商等多种场景
中文技术文章、版本更新解读、最佳实践与开发技巧
精选 Bootstrap 中文技术文章和最佳实践
手把手教你集成 Bootstrap 5.3 深色模式，从基础配置到自定义主题色和部署优化。
深入讲解手风琴和下拉菜单的核心用法、高级技巧和响应式优化方案。
掌握 Bootstrap 5 中 CSS Grid 布局模式，对比 Flexbox 并学习混合布局策略。
从零基础到 Bootstrap 专家的系统学习路径
了解 Bootstrap、安装配置、布局系统和内容排版。预计 1-2 周。
深入学习所有核心组件：按钮、卡片、导航、表单等。预计 2-3 周。
工具类、深色模式、Sass 自定义和实战项目。预计 2-4 周。
Bootstrap 开发者最常遇到的问题
本网站使用 Cookie 来提升您的浏览体验。隐私政策