实例精选

以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。

Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.

Bootstrap 框架的基本用法

Starter template example

入门级模板

只有基本的东西:引入了预编译版的 CSS 和 JavaScript 文件,页面只包含了一个 container 元素。

Bootstrap theme example

Bootstrap 主题

加载可选的 Bootstrap 主题,获得增强的视觉体验。

 
Multiple grids example

栅格

多个关于栅格布局方面的实例,涉及到层级(tier)、嵌套(nesting)等等。

Jumbotron example

Jumbotron

Build around the jumbotron with a navbar and some basic grid columns.

 
Narrow jumbotron example

Narrow jumbotron

Build a more custom page by narrowing the default container and jumbotron.

导航条实例

Navbar example

导航条

包含导航条和一起附加内容的超级基础的模板。

Static top navbar example

静态导航条

包含一个静态导航条以及一些附加内容的超级基础的模板。

 
Fixed navbar example

固定位置的导航条

这是一个超简单的页面,拥有一个固定在顶部的导航条和一些演示内容。

自定义组件

A one-page template example

封面图

一个简单、漂亮的首页。

Carousel example

Carousel

Customize the navbar and carousel, then add some new components.

 
Blog layout example

博客页面

简单的两列式博客布局,还包含了自定义的导航、页头、分类等元素。

Dashboard example

控制台

包含基本结构的后台管理模板,还有固定的侧边栏和导航条。

 
Sign-in page example

登录页

自定义的表单布局以及经过简单设计的登录表单。

Justified nav example

Justified nav

Create a custom navbar with justified links. Heads up! Not too Safari friendly.

 
Sticky footer example

Sticky footer

Attach a footer to the bottom of the viewport when the content is shorter than it.

Sticky footer with navbar example

Sticky footer with navbar

Attach a footer to the bottom of the viewport with a fixed navbar at the top.

实现性案例

Non-responsive example

非响应式 Bootstrap 布局

Easily disable the responsiveness of Bootstrap per our docs.

Off-canvas navigation example

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.