栅格系统示例

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

偏移列

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3

嵌套列

Level 1 column
Level 2
Level 2

流式栅格系统案例

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

流式栅格的偏移

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6

流式嵌套布局

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6

表格默认样式

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

表格间隔颜色效果

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

表格加边框和圆角和跨行跨列效果

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

表格每行的鼠标悬浮事件

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

表格每个单元格的内补(padding)减半可使表格更紧凑

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

表格给行添加颜色

# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm

表单默认样式

标题 这是BootStrap的实例.

表单输入框圆角效果

表单排成一行

表单排成多行

表单的下拉框


扩展表单前缀与后缀

@

.00

扩展表单前缀与后缀组合在一起

$ .00

扩展表单加按钮

扩展表单下拉菜单

扩展表单分段式下拉菜组

扩展表单搜索表单

表单输入框布局

表单丰富多彩的颜色

Something may have gone wrong
Please correct the error
Username is taken
Woohoo!

按钮默认样式

按钮 class="" 描述
btn 带渐变的标准灰色按钮
btn btn-primary 提供额外的视觉感, 可在一系列的按钮中指出主要操作
btn btn-info 默认样式的替代样式
btn btn-success 表示成功或积极的动作
btn btn-warning 提醒应该谨慎采取这个动作
btn btn-danger 表示这个动作危险或存在危险
btn btn-inverse 备用的暗灰色按钮,不依赖于语义和用途
btn btn-link 简化一个按钮, 使它看起来像一个链接,同时保持按钮的行为

按钮大小

变成块级(Block)按钮

图片默认

140x140 140x140 140x140

图标案例

图标案例按钮组中下拉菜单

图标案例导航

图标案例表单域

下拉菜单的子菜单

单一按钮组

多维按钮组

垂直按钮组

各种颜色的下拉框

各种颜色的分裂式按钮下拉菜单

向上弹出式菜单

基本标签页

基本pills

堆叠式排列的标签页

堆叠式排列的pills

标签页带下拉框

超强导航条

反色超强导航条

面包屑

分页条居左

分页条居中

分页条居右

翻页

标签

标签 标记
默认样式 <span class="label">Default</span>
成功 <span class="label label-success">Success</span>
警告 <span class="label label-warning">Warning</span>
重要 <span class="label label-important">Important</span>
信息 <span class="label label-info">Info</span>
反色 <span class="label label-inverse">Inverse</span>

徽章

名称 案例 标记
默认样式 1 <span class="badge">1</span>
成功 2 <span class="badge badge-success">2</span>
警告 4 <span class="badge badge-warning">4</span>
重要 6 <span class="badge badge-important">6</span>
信息 8 <span class="badge badge-info">8</span>
反色 10 <span class="badge badge-inverse">10</span>

警告提示

Warning! Best check yo self, you're not looking too good.

错误或危险提示

Oh snap! Change a few things up and try submitting again.

成功提示

Well done! You successfully read this important alert message.

警告提示

Heads up! This alert needs your attention, but it's not super important.

进度条基本样式

进度条动画样式

进度条堆叠样式

进度条更多颜色的选择

进度条更多动画的选择