Bootstrap-排版
基本的HTML模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap的HTML标准模板</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--你自己的样式文件 --> <link href="css/your-style.css" rel="stylesheet"> <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
bootstrap不支持IE兼容模式，在IE运行最新的渲染模式
<meta name="viewport" content="width=device-width, initial-scale=1">
初始化移动浏览显示
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
全局样式
Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式
排版
1、标题：
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：
在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式
2、段落：
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
1、全局文本字号为14px(font-size)。
2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜色为深灰色（#333）；
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）
可以根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中，排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量：
@font-size-base: 14px;
@line-height-base: 1.428571429; // 20/14
$font-size-base: 14px !default;
$line-height-base: 1.428571429 !default; // 20/14
3、强调内容、加粗、斜体
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理<p class="lead"></p>
除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
<b></b><strong></strong>
<em></em><i></i>
4、强调相关类
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
5、对齐风格
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
☑ .text-left：左对齐
☑ .text-center：居中对齐
☑ .text-right：右对齐
☑ .text-justify：两端对齐
6.列表
在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap根据平时的使用情形提供了六种形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去点列表class="list-unstyled"
☑ 内联列表
通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
☑ 描述列表
☑ 水平描述列表
只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果
<dl> <dt>北京</dt> <dd>北京是中国的首都</dd> <dt>上海</dt> <dd>东方的巴黎</dd> </dl>
7、代码
在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容
只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
8、表格
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
主要包括：
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
<h1>基础表格</h1> <table class="table"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> <h1>斑马线表格</h1> <table class="table table-striped"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> <h1>带边框的表格</h1> <table class="table table-bordered"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> <h1>鼠标悬浮高亮的表格</h1> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> <h1>紧凑型表格</h1> <table class="table table-condensed"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> <h1>响应式表格</h1> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> </div>
Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色
除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。
注意要实现悬浮状态，需要在<table>标签上加入table-hover类。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
