Bootstrap入门之段落、列表和表格

什么是BootStrap？
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。

自定义JQuery插件，完整的类库，基于Less等。

BootStrap3的支持情况

下面是bootstrap应用方法的简单介绍。

标题h1，h2……h6  副标题<small>
段落：
1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实

他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family
粗体：
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，

加粗文本，而且对行高和margin也做相应的处理。
除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理

斜体：
斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。

文本的对齐风格：

  ☑   .text-left：左对齐

  ☑   .text-center：居中对齐

  ☑   .text-right：右对齐

  ☑   .text-justify：两端对齐

列表：
嵌套列表
<ol>
    <li>有序列表</li>
    <li>
    有序列表
        <ol>
        <li>有序列表(2)

</li>
        <li>有序列表(2)</li>
        </ol>
    </li>
    <li>有序列表</li>
</ol>
“.list-unstyled”,这样就可以去除默认的列表样式的风格。
“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
code风格：

<div>Bootstrap的代码风格有三种：
  <code>&lt;code&gt;</code>
  <code>&lt;pre&gt;</code>
  <code>&lt;kbd&gt;</code>
</div>

pre风格：

<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>

kbd风格：

<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)

使用“&gt;”来替代。
<pre>中“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条

Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

 .table：基础表格

 .table-striped：斑马线表格

 .table-bordered：带边框的表格

 .table-hover：鼠标悬停高亮的表格

 .table-condensed：紧凑型表格

 .table-responsive：响应式表格   .table包裹在.table-responsive中即可创建响应式表格，当屏幕小于768px时，表格下方会出现滚轮效果等