跳到主要内容

示例

基于 Bootstrap 5.3 构建的常用页面、组件与模板示例,全部已在本地镜像并汉化。

起步模板

在 Webpack、Parcel、Vite 等常用 JS 框架中使用 Bootstrap 的可运行示例。

CDN 起步模板

通过 jsDelivr CDN 直接引入 Bootstrap 编译后的 CSS 和 JavaScript。

Sass 与 JS

使用 npm 导入并编译 Bootstrap 的 Sass(含 Autoprefixer 和 Stylelint),同时使用官方打包的 JavaScript。

Sass 与 ESM JS

使用 npm 导入并编译 Bootstrap 的 Sass,并通过 ESM shim 编译源码 JavaScript。

Parcel

使用 Parcel 打包 Bootstrap 的 Sass 与 JavaScript。

React Bootstrap

在 React 项目中使用 Bootstrap 组件与样式的社区方案。

Vite

使用 Vite 打包 Bootstrap 的 Sass 与 JavaScript。

Vue

在 Vue 项目中使用 Bootstrap 的组件与样式。

Webpack

使用 Webpack 打包 Bootstrap 的 Sass 与 JavaScript。

代码片段

在现有组件和工具类基础上,结合自定义 CSS 构建网站与应用的常用模式。

页眉

展示品牌标识、导航、搜索等页眉组件。

主视觉

通过主视觉区块突出展示营销信息或关键内容。

功能特性

用图标、标题和文案展示产品功能特性。

侧边栏

展示可折叠的侧边栏导航与内容布局。

页脚

页脚的各种布局与内容组合。

列表组

列表组组件与自定义内容示例。

徽章

徽章组件的大小、颜色与用法示例。

按钮

按钮组件的颜色、尺寸与状态示例。

巨幕

用巨幕区块突出展示重点内容。

自定义组件

全新的组件与模板,帮助你快速上手 Bootstrap,并演示在框架之上扩展的最佳实践。

相册

适合相册、作品集等场景的单页模板。

定价

定价表模板,展示不同套餐与功能对比。

结账

结账页面模板,包含表单与订单摘要。

商品

商品详情页面模板。

封面

全屏封面页模板。

轮播

轮播组件的完整示例。

博客

博客首页与文章列表模板。

仪表盘

后台仪表盘模板,包含图表与数据面板。

框架

重点演示 Bootstrap 内置组件的实现与用法。

起步模板

只有基础 CSS 与 JavaScript 的起步模板。

网格

网格系统的多种布局示例。

速查表

常用 HTML 元素与 Bootstrap 类的速查表示例。

基于默认导航栏组件,展示如何移动、放置和扩展它。

导航栏

导航栏的响应式布局与容器选项示例。

RTL

通过各类别中经过调整的示例,查看 Bootstrap 的 RTL 从右到左版本。

RTL 仍在试验阶段 并将根据反馈进行改进。发现了什么或者有改进建议吗?

请提出一个问题。

集成

与外部库的集成示例。

瀑布流布局

结合 Bootstrap 网格与 Masonry 布局的瀑布流示例。