bootstrap

1、网格结构：

栅格系统中的列是通过指定1到12的值来表示其跨越的范围 所以不会有col-**-15 最大也就是12

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

<div class="col-sm-10 col-md-8"> 
这个应该是说：
屏幕大于(≥992px) ，使用col-md-* 而不是col-sm-*
如果屏幕大于(≥768px)，小于<=992px，使用col-sm-* 而不是col-md-*

对不同的屏幕大小实现了自己的布局。这样的改进才真正实现了响应式布局。

比如下面的代码

div class="row"

  div class="col-xs-12 col-sm-6 col-md-8" 手机小屏幕占据全部栏栅，ipad中屏幕占据6个栏栅，电脑桌面占8个栏栅/div

  div class="col-sm-6 col-md-4"手机小屏幕换行显示，ipad中屏幕占据6个栏栅，电脑桌面占4个栏栅/div

 

偏移列：在.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

　　　　　　为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。

<div class="col-xs-6 col-md-offset-3">  </div> 

2、排版：

内联子标题：<h1>我是标题1 h1. <small>我是副标题1 <small>h1</samll></small></h1> 

缩写：<abbr title="World Wide Web">WWW</abbr>

列表：有序列表、无序列表、定义列表

• 有序列表：有序列表是指以数字或其他有序字符开头的列表。
• 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class.list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
• 定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。

响应式表格：

<div class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
</tr>
</tbody>
</table>
</div>

表单：垂直表单（默认）、内联表单、水平表单