标签：
Bootstrap学习
1：Bootstrap（1）包含了丰富的web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。（2）自带了13个jQery插件，这些插件为bootstrap中的组件赋予了生命。其中包括：模式对话框、标签页、滚动条、弹出框等。
2 :栅格系统（布局）
下面就介绍以下Bootstrap栅格系统的工作原理：
“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。
代码介绍：
1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。
2..col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。
3：排版
1：提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。
2：在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。
3：小号，着重，斜体，对齐class ：<p>Left aligned text.</p>
强调class：<p>Mae n magna.</p>
代表着各种不同的颜色
引用选项
命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。
<blockquote>
<p>生命的意义不仅限于生存，云在青天水在瓶。</p>
<small>本文来自于：<cite title="http:www.hehehe.com">来源链接</cite></small>
</blockquote>
4：表格
鼠标悬停
利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。
<table class="table table-hover">
5：按钮
1、选项
使用上面列出的class可以快速创建一个带有样式的按钮。
6：下拉菜单
将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码
首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表
紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。
第四个li标签中有个divider其实是一个分割线的样式类。
7：导航
Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。
标签页注意.nav-tabs类需要.nav基类。：
1. <h1 class="page-header">标签页</h1>
2. <ul class="nav nav-tabs">
3. <li class="active"><a href="#">主页</a></li>
4. <li><a href="#">属性</a></li>
5. <li><a href="#">信息</a></li>
6. </ul>
标签：
原文地址：http://my.oschina.net/lizy/blog/509905
