Bootstrap - 走看看

固定栅格系统

bootstrap默认是没有启用响应式布局特性的，栅格化后只会占用940px宽。如果通过bootstrap-responsive.css启用响应式布局则boot会根据视口的宽度从724px到1170px动态调整宽度。

流式栅格系统

由于是以百分数来设置列宽，故列和须为12才能布满整个屏幕宽。

总结对于两种类型的栅格系统都是有宽度的,在加入响应式布局前:第一种固定栅格系统固定宽度为940px，所以每列宽度也是固定的；第二种流式栅格系统是以整个屏幕的宽度为基准来计算每列宽度百分比,所以列和需为12才能充满整个宽度。在加入响应式布局后，第一种固定栅格系统会根据屏幕宽度，从724px到1170px范围中某一宽度来分配列宽。第二种流式栅格系统会由于响应式布局的加入每列的宽度会有所变化，不过12列时仍然是充满整个屏幕的。

Bootstrap默认样式

boot默认字体font-size为14px，行高line-height为20px，这一样应用到body和所有P元素，此外p元素默认会带有行高的一半高度的底部边距。

文本对齐样式

text-left:左对齐
text-center:中间对齐
text-right:右对齐

文本强调样式

muted:文本弱化
text-warning:警告样式
text-error:错误样式
text-info：信息文本
text-success:成功文本

Abbreviations(缩写)

<abbr title=’attribute’ class=’initialism’>attr</abbr>   initialism:词首字母缩略词,可以让字体变得稍小。

地址样式address

使联系信息以最接近日常的形式显示，可加<br>进行换行。
<address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>

块引用blockquote

所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。可加<small>Someone famous <cite title="Source Title">Source Title</cite></small>标示引用源 ,还可以加css样式pull-right使块引用右对齐。

ul li

移除默认样式用unstyled,列表内联用inline

1)术语
描述
   样式:
   <dl>
         <dt>...</dt>
         <dd>...</dd>
   </dl>

代码

内联代码用<code></code>
多行代码组成代码块<pre></pre>,加样式pre-scrollable限制代码块在350px高度范围。
var标签标记变量主要是加个斜体样式<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
samp标签标记控制台输出 <samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

table为默认样式
table-striped给tbody每一行增加斑马线样式，此样式依赖于nth-child选择器实现，而ie8是不支持的;
table-bordered为表格价边框
table-hover鼠标悬停样式

按钮

创建按钮可通过 <a><button><input> 来实现，虽然按钮可以通过 <a> 来实现，但是导航和导航条组件只支持 <button> 标签，且 <a> 作为按钮使用时如果不是用于链接而是用于触发一些事件的话务必加上 role=’button’ 属性。 <a class="btn btn-default" href="#">Link</a> 注意:建议使用button来实现按钮获得浏览器的兼容，且input在firefox 30+会阻止设置的line-height属性。
设置按钮的尺寸:可使用btn-lg,btn-sm,btn-xs <button class="btn btn-primary btn-lg" type="button">（大按钮）Large button</button>
通过btn-block样式可将按钮拉伸到其父元素的100%，且按钮变成块元素。
按钮禁用:一般可以通过opacity属性改变背景来呈现；可添加disable属性来实现禁用。

图片

Boot3中可通过添加.img-responsive来支持响应式布局,本质就是设置图片max-100%,height:auto,display:block来实现。可加上.center-block来实现响应式布局图片居中。
设置图片形状:img-rounded,img-circle,img-thumbnail

辅助类

设置情景背景色:bg-primary,bg-success,bg-info,bg-warning,bg-danger
关闭按钮:<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号:<span class="caret"></span>
快速浮动:pull-left,pull-right
内容块居中:center-block
清除浮动:通过为父元素添加clearfix
显示隐藏内容:.show,.hidden.其中hide来仍然可用，但是不能对屏幕阅读器起作用，3.0.1开始不建议使用，可使用.hidden,.sr-only。.invisible仅仅影响元素可见性，元素的display属性不被改变，并且此元素仍然能够影响文档留的排布。
// Classes .show { display: block !important; } .hidden { display: none !important; } .invisible { visibility: hidden; } // Usage as mixins .element { .show(); } .another-element { .hidden(); }
屏幕阅读器:.sr-only(screen reader-only)是除了屏幕阅读器外，其他设备上隐藏该元素，这个是用于屏幕阅读器的，帮助残障人士更好的访问网站。.sr-only和.sr-only-focusable联合使用可以在元素有焦点的时候再次显示出来。
文本隐藏:text-hide