栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
移动设备优先
在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等属性的原因,这两种容器类不能相互嵌套。
固定宽度
<div class="container">
...
</div>
100%宽度
<div class="container-fluid">
...
</div>
栅格系统中,浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。
“行(row)”必须包含在
.container
(固定宽度)或.container-fluid
(100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。通过“行(row)”在水平方向创建一组“列(column)”。
你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。 Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为
.row
元素设置负值 margin 从而抵消掉为.container
元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了 padding。栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .
col-xs-4
来创建。如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
.col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何.col-lg-*
不存在, 也影响大屏幕设备。
列偏移
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 a col-md-offset-2">3</div>
</div>
列嵌套
<div class="row">
<div class="col-md-9 a" style="padding: 0;">
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
</div>
<div class="col-md-3 a">3</div>
</div>
交换位置
<div class="row">
<div class="col-md-9 col-md-push-3 a">
9
</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
表格
Bootstrap 提供了一些丰富的表格样式供开发者使用。
基本格式
<table class="table ">
注:我们可以通过 Firebug 查看相应的 CSS。
条纹状表格
<table class="table table-striped">
注:表格效果需要基于基本格式.table
带边框的表格
<table class="table table-bordered">
悬停鼠标
<table class="table table-hover">
状态类
<tr class="success">
注:一共五种不同的样式可供选择。
隐藏某一行
<tr class="active sr-only">
响应式表格
在小于768px,为表格加上边框
<table class="table table-responsive">
按钮
Bootstrap 提供了很多丰富按钮供开发者使用。
可作为按钮使用的标签或元素
转化成普通按钮
<button class="btn btn-default">Button</button>
<a href="###" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="Input"/>
注意事项有三点:
虽然按钮类可以应用到
<a>
和<button>
元素上,但是,导航和导航条组件只支持<button>
元素。链接被作为按钮使用时的注意事项如果
<a>
元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置role="button"
属性。我们总结的最佳实践是:强烈建议尽可能使用
<button>
元素来获得在各个浏览器上获得相匹配的绘制效果。
预定义式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
类名 | 解释 |
---|---|
btn-default | 默认样式 |
btn-success | 成功样式 |
btn-info | 一般信息样式 |
btn-warning | 警告样式 |
btn-danger | 危险样式 |
btn-primary | 首选项样式 |
btn-link | 链接样式 |
<button class="btn btn-default">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
<button class="btn btn-info">Button</button>
<button class="btn btn-warning">Button</button>
<button class="btn btn-link">Button</button>
<button class="btn btn-danger">Button</button>
尺寸大小
从大到小的尺寸
<p>
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
块级按钮
块级换行
<button class="btn btn-block">Button</button>
激活状态
<button class="btn active">Button</button>
禁用状态
<button class="btn disabled">Button</button>