关于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>