跳至主要内容

示例

Quickly get a 使用我们的任何示例(从使用框架的各个部分到自定义组件和布局)快速启动项目。project started with any of our examples ranging from using parts of the framework to custom components and layouts.

Starters

在常见的JS框架(如Webpack,Parcel,Vite等)中使用Bootstrap的功能示例,您可以在StackBlitz中进行编辑。

CDN starter

通过jsDelivr CDN立即包含Bootstrap编译的CSS和JavaScript。

Edit in StackBlitz

Sass & JS

使用 npm 导入和编译 Bootstrap 的 Sass with Autoprefixer 和 Stylelint,以及我们捆绑的 JavaScript。

Edit in StackBlitz

Sass & ESM JS

使用 Autoprefixer 和 Stylelint 导入和编译 Bootstrap 的 Sass,并使用 ESM 填充程序编译我们的源 JavaScript。

Edit in StackBlitz

Webpack

导入 Bootstrap 的源代码 Sass 和 JavaScript 并将其与 Webpack 捆绑在一起。

Edit in StackBlitz

Parcel

通过 Parcel 导入并捆绑 Bootstrap 的源代码 Sass 和 JavaScript。

Edit in StackBlitz

Vite

导入 Bootstrap 的源代码 Sass 和 JavaScript 并将其与 Vite 捆绑在一起。

Edit in StackBlitz

Bootstrap Icons

使用 Stylelint、PurgeCSS 和 Bootstrap Icons Web 字体导入和编译 Bootstrap 的 Sass。

Edit in StackBlitz

Snippets

用于构建基于具有自定义 CSS 等的现有组件和实用程序构建的网站和应用的常见模式。

Headers

使用这些标题组件显示您的品牌、导航、搜索等

Heroes

在您的主页上设置具有明确号召性用语的英雄的舞台。

Features

解释营销内容中的功能、优势或其他详细信息。

Sidebars

适用于画布外或多列布局的常见导航模式。

Footers

用一个很棒的页脚(无论大小)强有力地完成每一页。

Dropdowns

使用过滤器、图标、自定义样式等增强您的下拉列表。

List groups

使用实用程序和任何内容的自定义样式扩展列表组。

Modals

转换模态以服务于任何目的,从功能游览到对话框。

Badges

使徽章与自定义内部 HTML 和新外观配合使用。

Breadcrumbs

集成自定义图标并创建步进器组件。

Buttons

使用实用程序为几乎任何用例创建自定义按钮。

Jumbotrons

创建经典Bootstrap组件的现代化版本。

Custom Components

全新的组件和模板,可帮助人们快速开始使用 Bootstrap,并演示添加到框架中的最佳实践。

Album

简单的单页模板,用于照片画廊、作品集等。

Pricing

使用卡片构建并具有自定义页眉和页脚的示例定价页面。

Checkout

显示我们的表单组件及其验证功能的自定义结帐表单。

Product

精益以产品为中心的营销页面,具有广泛的网格和图像工作。

Cover

用于构建简单美观的主页的单页模板。

Carousel

自定义导航栏和轮播,然后添加一些新组件。

Blog

杂志喜欢博客模板,带有标题,导航,特色内容。

Dashboard

带有固定侧边栏和导航栏的基本管理仪表板外壳。

Sign-in

用于简单登录表单的自定义表单布局和设计。

Sticky footer

当页面内容较短时,将页脚附加到视口底部。

Sticky footer navbar

使用固定的顶部导航栏将页脚附加到视区的底部。

Jumbotron

使用实用程序重新创建和增强 Bootstrap 4 的Jumbotron。

Framework

重点介绍如何实现 Bootstrap 提供的内置组件的使用。

Starter template

只有基础知识:编译的CSS和JavaScript。

Grid

包含所有四个层、嵌套等的网格布局的多个示例。

Cheatsheet

Kitchen sink of Bootstrap components.

Cheatsheet RTL

Kitchen sink of Bootstrap components, RTL.

采用默认导航栏组件并显示如何移动、放置和扩展它。

Navbars

演示导航栏的所有响应式和容器选项。

Navbars offcanvas

与导航栏示例相同,但使用我们的 offcanvas 组件。

Navbar static

静态顶部导航栏的单个导航栏示例以及一些其他内容。

Navbar fixed

具有固定顶部导航栏以及一些附加内容的单个导航栏示例。

Navbar bottom

具有底部导航栏以及一些其他内容的单个导航栏示例。

Offcanvas navbar

将可展开的导航栏转换为滑动的画布菜单(不使用我们的画布外组件)。

RTL

请参阅Bootstrap的RTL版本以及这些修改后的自定义组件示例。

RTL is still experimental and will evolve with feedback. Spotted something or have an improvement to suggest?

Please open an issue.

Album RTL

简单的单页模板,用于照片画廊、作品集等。

Checkout RTL

显示我们的表单组件及其验证功能的自定义结帐表单。

Carousel RTL

自定义导航栏和轮播,然后添加一些新组件。

Blog RTL

杂志喜欢博客模板,带有标题,导航,特色内容。

Dashboard RTL

带有固定侧边栏和导航栏的基本管理仪表板外壳。

Integrations

与外部库集成。

Masonry

结合Bootstrap网格和砌体布局的强大功能。