Skip to main content

Examples示例

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

Snippets片段

Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more.用于构建基于现有组件和实用程序的站点和应用程序的通用模式,包括自定义CSS等。

Headers标题

Display your branding, navigation, search, and more with these header components使用这些标题组件显示您的品牌、导航、搜索等

Heroes

Set the stage on your homepage with heroes that feature clear calls to action.在你的主页上设置一个有着明确行动号召的英雄的舞台。

Features

Explain the features, benefits, or other details in your marketing content.解释营销内容中的功能、优点或其他细节。

Sidebars侧栏

Common navigation patterns ideal for offcanvas or multi-column layouts.通用导航模式是非画布或多列布局的理想选择。

Footers页脚

Finish every page strong with an awesome footer, big or small.用一个很棒的页脚完成每一页,无论大小。

Dropdowns下拉菜单

Enhance your dropdowns with filters, icons, custom styles, and more.使用过滤器、图标、自定义样式等增强下拉列表。

List groups列表组

Extend list groups with utilities and custom styles for any content.使用实用程序和自定义样式扩展列表组以用于任何内容。

Modals模态框

Transform modals to serve any purpose, from feature tours to dialogs.将模态转换为任何用途,从功能浏览到对话框。

Custom Components自定义组件

Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.全新的组件和模板帮助人们快速开始使用Bootstrap,并演示添加到框架中的最佳实践。

Album照片集

Simple one-page template for photo galleries, portfolios, and more.用于照片库、公文包等的简单单页模板。

Pricing定价

Example pricing page built with Cards and featuring a custom header and footer.示例定价页面使用卡片构建,具有自定义页眉和页脚。

Checkout签出

Custom checkout form showing our form components and their validation features.显示表单组件及其验证功能的自定义签出表单。

Product产品

Lean product-focused marketing page with extensive grid and image work.以精益产品为中心的营销页面,具有广泛的网格和图像工作。

Cover封面

A one-page template for building simple and beautiful home pages.一个单页模板,用于构建简单美观的主页。

Carousel旋转木马

Customize the navbar and carousel, then add some new components.自定义导航栏和旋转木马,然后添加一些新组件。

Blog博客

Magazine like blog template with header, navigation, featured content.类似杂志的博客模板,带有标题、导航和特色内容。

Dashboard仪表板

Basic admin dashboard shell with fixed sidebar and navbar.基本管理仪表板外壳,带有固定的侧栏和导航栏。

Sign-in

Custom form layout and design for a simple sign in form.用于简单登录表单的自定义表单布局和设计。

Sticky footer粘性页脚

Attach a footer to the bottom of the viewport when page content is short.当页面内容较短时,将页脚附加到视口底部。

Sticky footer navbar粘性页脚导航栏

Attach a footer to the bottom of the viewport with a fixed top navbar.使用固定顶部导航栏将页脚附着到视口底部。

Jumbotron超大屏

Use utilities to recreate and enhance Bootstrap 4's jumbotron.使用实用程序重新创建和增强Bootstrap4的超大屏。

Framework框架

Examples that focus on implementing uses of built-in components provided by Bootstrap.重点介绍如何使用Bootstrap提供的内置组件的示例。

Starter template初学者模板

Nothing but the basics: compiled CSS and JavaScript.除了基本的:编译的CSS和JavaScript。

Grid网格

Multiple examples of grid layouts with all four tiers, nesting, and more.多个网格布局示例,包括所有四层、嵌套等。

Cheatsheet备忘单

Kitchen sink of Bootstrap components.Bootstrap组件的厨房水槽。

Cheatsheet RTL

Kitchen sink of Bootstrap components, RTL.Bootstrap组件的厨房水槽,RTL。

Taking the default navbar component and showing how it can be moved, placed, and extended.获取默认导航栏组件并显示如何移动、放置和扩展该组件。

Navbars导航栏

Demonstration of all responsive and container options for the navbar.演示导航栏的所有响应和容器选项。

Navbar static

Single navbar example of a static top navbar along with some additional content.静态顶部导航栏的单个导航栏示例以及一些附加内容。

Navbar fixed导航栏固定

Single navbar example with a fixed top navbar along with some additional content.带有固定顶部导航栏和一些附加内容的单个导航栏示例。

Navbar bottom导航栏底部

Single navbar example with a bottom navbar along with some additional content.带有底部导航栏和一些附加内容的单个导航栏示例。

Offcanvas navbar

Turn your expandable navbar into a sliding offcanvas menu (doesn't use our offcanvas component).将可扩展的导航栏转换为滑动脱离画布菜单(不使用脱离画布组件)。

RTL

See Bootstrap's RTL version in action with these modified Custom Components examples.请参阅Bootstrap的RTL版本以及这些修改过的自定义组件示例。

The RTL feature is still experimental and will probably evolve according to user feedback. RTL特性仍处于试验阶段,可能会根据用户反馈进行改进。Spotted something or have an improvement to suggest? 发现了什么或有改进建议?Open an issue, we'd love to get your insights.,我们很想了解您的见解。

Album RTL

Simple one-page template for photo galleries, portfolios, and more.用于照片库、公文包等的简单单页模板。

Checkout RTL

Custom checkout form showing our form components and their validation features.显示表单组件及其验证功能的自定义签出表单。

Carousel RTL

Customize the navbar and carousel, then add some new components.自定义导航栏和旋转木马,然后添加一些新组件。

Blog RTL

Magazine like blog template with header, navigation, featured content.类似杂志的博客模板,带有标题、导航和特色内容。

Dashboard RTL

Basic admin dashboard shell with fixed sidebar and navbar.基本管理仪表板外壳,带有固定的侧栏和导航栏。

Integrations整合

Integrations with external libraries.与外部库的集成。

Masonry

Combine the powers of the Bootstrap grid and the Masonry layout.结合Bootstrap网格和砌体布局的功能。


Go further with Bootstrap Themes

Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

Browse themes
Bootstrap Themes