标签：
目录
Bootstrap使用的某些html元素和css属性需要将页面设置为html5文档类型。
1 <doctype html> 2 <html lang="zh-cn"> 3 ...... 4 ...... 5 </html>
为了确保适当的绘制和屏幕缩放，需要在head之中添加viewport元数据标签.
1 <meta name=‘viewport‘ content=‘width=device-width, initial-scale=1‘>
|
布局容器 |
.container |
固定宽度并支持响应式布局的容器
|
栅栏系统必须包含在一个容器中。这两种容器不能嵌套 |
|
.container-fluid
|
100%宽度，占据全部viewport的容器 |
|
|
超小屏幕(<768px) |
小屏幕(>768px) |
中等屏幕(>992px) |
大屏幕(>1200px) |
|
栅格系统行为 |
总是水平排列 |
开始时堆叠在一起，当大于这些阈值时将变为水平排列C |
||
|
.container最大宽度 |
None(自动) |
750px |
970px |
1170px |
|
类前缀 |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
|
列数 |
12 |
|||
|
最大列宽 |
自动 |
~62px |
~81px |
~97px |
|
槽(gutter)宽 |
30px(每列左右均有15px) |
|||
|
可嵌套 |
是 |
|||
|
偏移 |
是。使用.col-md-offset-*类可以将列向右侧偏移，这是通过使用*选择器为当前元素增加了左侧的margin。 |
|||
|
列排序 |
是。通过使用.col-md-push-*和.col-md-pull-*类可以改变column的顺序。 |
|||
Bootstrap将全局font-size设置为14px，line-height设置为1.428。<p>元素被设置等于1/2行高（即10px）的底部外边距（margin）。
通过添加.lead类可以让段落突出显示。
|
文本样式 |
<mark> |
高亮显示文本 |
|
<del> |
给文本添加删除线 |
|
|
<s> |
同上 |
|
|
<u> |
给文本添加下划线 |
|
|
<ins> |
同上 |
|
|
<small>或.small |
将文本设为父容器文本大小的85% |
|
|
<strong> |
用加粗强调文本 |
|
|
<em> |
用斜体强调文本 |
|
|
.text-left（right,center,justify,nowrap） |
文本对齐 |
|
|
.text-lowercase（uppercase, capitalize） |
改变大小写 |
|
|
<abbr> |
缩略语 |
|
|
|
|
|
列表（ul，ol，dl） |
.list-unstyled |
移除了默认的list-style样式和左侧外边距，这只针对直接子元素。 |
|
.list-inline |
通过设置display: inline-block并添加少量的内补将所有元素放在同一行 |
|
|
.dl-horizontal |
让<dl>内的短语及其描述排在一行 |
|
代码 |
<code> |
内联代码 |
|
<kbd> |
标记用户通过键盘输入的内容 |
|
|
<pre> |
代码块 |
|
|
<var> |
标记变量 |
|
|
<samp> |
标记程序输出的内容 |
|
表格 |
.table |
给表格添加少量的内补和水平方向的分隔线 |
|
.table .table-striped |
给<tbody>内的每一行增加斑马条纹样式 |
|
|
.table .table-bordered |
为表格和其中的每个单元格增加边框 |
|
|
.table .table-hover |
让<tbody>中的每一行对鼠标悬停做出响应 |
|
|
.table .table-condensed |
单元格内补减半，表格更加紧凑 |
|
|
.active（success, info, warning, danger） |
可设置于tr或td |
所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度为width: 100%。将label元素和前面提到的元素包裹在.form-group中可以获得好的排列。
1 <form> 2 <div class="form-group"> 3 <label for="exampleInputEmail1">Email address</label> 4 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 5 </div> 6 <div class="form-group"> 7 <label for="exampleInputPassword1">Password</label> 8 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 9 </div> 10 <div class="form-group"> 11 <label for="exampleInputFile">File input</label> 12 <input type="file" id="exampleInputFile"> 13 <p class="help-block">Example block-level help text here.</p> 14 </div> 15 <div class="checkbox"> 16 <label> 17 <input type="checkbox"> Check me out 18 </label> 19 </div> 20 <button type="submit" class="btn btn-default">Submit</button> 21 </form>
为<form>元素添加.form-inline类可使其内容左对齐并表现为inline-block级别的控件。此时，必须为每个输入空间设置label标签，也可以为label标签设置.sr-only类将其隐藏。
1 <form class="form-inline"> 2 <div class="form-group"> 3 <label class="sr-only" for="exampleInputEmail3">Email address</label> 4 <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> 5 </div> 6 <div class="form-group"> 7 <label class="sr-only" for="exampleInputPassword3">Password</label> 8 <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 9 </div> 10 <div class="checkbox"> 11 <label> 12 <input type="checkbox"> Remember me 13 </label> 14 </div> 15 <button type="submit" class="btn btn-default">Sign in</button> 16 </form>
1 <form class="form-horizontal"> 2 <div class="form-group"> 3 <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 4 <div class="col-sm-10"> 5 <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 6 </div> 7 </div> 8 <div class="form-group"> 9 <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 10 <div class="col-sm-10"> 11 <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 12 </div> 13 </div> 14 <div class="form-group"> 15 <div class="col-sm-offset-2 col-sm-10"> 16 <div class="checkbox"> 17 <label> 18 <input type="checkbox"> Remember me 19 </label> 20 </div> 21 </div> 22 </div> 23 <div class="form-group"> 24 <div class="col-sm-offset-2 col-sm-10"> 25 <button type="submit" class="btn btn-default">Sign in</button> 26 </div> 27 </div> 28 </form>
为<a>、<button>、<input>元素添加按钮类即可以使用bootstrap提供的样式。如果<a>元素被作为按钮使用并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role=”button”属性。导航和导航条组件只支持<button>元素。
1 <a class="btn btn-default" href="#" role="button">Link</a> 2 <button class="btn btn-default" type="submit">Button</button> 3 <input class="btn btn-default" type="button" value="Input"> 4 <input class="btn btn-default" type="submit" value="Submit">
1 <!-- Standard button --> 2 <button type="button" class="btn btn-default">（默认样式）Default</button> 3 4 <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> 5 <button type="button" class="btn btn-primary">（首选项）Primary</button> 6 7 <!-- Indicates a successful or positive action --> 8 <button type="button" class="btn btn-success">（成功）Success</button> 9 10 <!-- Contextual button for informational alert messages --> 11 <button type="button" class="btn btn-info">（一般信息）Info</button> 12 13 <!-- Indicates caution should be taken with this action --> 14 <button type="button" class="btn btn-warning">（警告）Warning</button> 15 16 <!-- Indicates a dangerous or potentially negative action --> 17 <button type="button" class="btn btn-danger">（危险）Danger</button> 18 19 <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> 20 <button type="button" class="btn btn-link">（链接）Link</button>
1 <p> 2 <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> 3 <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> 4 </p> 5 <p> 6 <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> 7 <button type="button" class="btn btn-default">（默认尺寸）Default button</button> 8 </p> 9 <p> 10 <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> 11 <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button> 12 </p> 13 <p> 14 <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> 15 <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> 16 </p>
通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级元素。
1 <button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button> 2 <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
1 <img src="..." alt="..." class="img-rounded"> 2 <img src="..." alt="..." class="img-circle"> 3 <img src="..." alt="..." class="img-thumbnail">
1 <p class="text-muted">...</p> 2 <p class="text-primary">...</p> 3 <p class="text-success">...</p> 4 <p class="text-info">...</p> 5 <p class="text-warning">...</p> 6 <p class="text-danger">...</p>
1 <p class="bg-primary">...</p> 2 <p class="bg-success">...</p> 3 <p class="bg-info">...</p> 4 <p class="bg-warning">...</p> 5 <p class="bg-danger">...</p>
1 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
1 <span class="caret"></span>
标签：
原文地址：http://www.cnblogs.com/xianglongsdu/p/4731958.html
