Bootstrap之排版

标题

1.  h1

.h1

<small>

强调内容

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理

粗体

粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗

斜体

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

强调相关的类

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

• .text-muted：提示，使用浅灰色（#999）
• .text-primary：主要，使用蓝色（#428bca）
• .text-success：成功，使用浅绿色(#3c763d)
• .text-info：通知信息，使用浅蓝色（#31708f）
• .text-warning：警告，使用黄色（#8a6d3b）
• .text-danger：危险，使用褐色（#a94442）

.text-muted 效果

.text-primary效果

.text-success效果

.text-info效果

.text-warning效果

.text-danger效果

文本对齐风格

Bootstrap通过定义四个类名来控制文本的对齐风格：

?   .text-left：左对齐

?   .text-center：居中对齐

?   .text-right：右对齐

?   .text-justify：两端对齐

特别声明：目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

列表

在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表

<ul>
    <li>…</li>
</ul>

有序列表

<ol>
    <li>…</li>
</ol>

定义列表

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

Bootstrap根据平时的使用情形提供了六种形式的列表：

?  普通列表

?  有序列表

?  去点列表

?  内联列表

?  描述列表

?  水平描述列表

在Bootstrap中列表也是可以嵌套的。

通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格，同时还将列表默认的左边内距也清０。

注意：类名“.list-unstyled”是添加在 ol ul 等上面的，而不是在 li 上面

Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

注意：类名“.list-inline”是添加在 ol ul 等上面的，而不是在 li 上面

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果

当标题宽度超过160px时，将会显示三个省略号

代码

一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。

你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。主要包括：

?  .table：基础表格

?  .table-striped：斑马线表格

?  .table-bordered：带边框的表格

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

?  .table-condensed：紧凑型表格

?  .table-responsive：响应式表格

注意：类名是添加在 table 上面的，而且都需要 .table 这个类。

“.table”虽然是基础表格，但也修改了默认表格的样式，主要有三个作用：

?  给表格设置了margin-bottom:20px以及设置单元内距

  ?  在thead底部设置了一个2px的浅灰实线

  ?  每个单元格顶部设置了一个1px的浅灰实线

Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

另外，不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名“table”。

来自:     http://www.imooc.com/learn/141