基础排版

1.标题

 　　Bootstrap为传统的标题素h1-h6重新定义了标准的样式，使得在所有浏览器下显示效果都一样，定义规则如下：

　　标题元素的用法和平时的用法一致，Bootstrap还定义了6个class样式(.h1~.h6)，以便在非标题元素下使用相同的样式，唯一的不同是class样式没有定义margin-top和margin-bottom。

<h1>Bootstrap权威指南</h1>
<h2>Bootstrap权威指南</h2>
<h3>Bootstrap权威指南</h3>

<span class="h1">Bootstrap权威指南</span><br />
<span class="h2">Bootstrap权威指南</span><br />
<span class="h3">Bootstrap权威指南</span><br />

2.页面主题

 　　默认情况下，Bootstrap为全局设置的字体大小font-size为14像素，间距line-height为字体大小的1.428倍(即20像素)。该设置应用于body元素和所有的段落上。

// 源码275行
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333;
  background-color: #fff;
}

　　另外，p元素内的段落会有一个额外的margin-bottom，大小是行间距的一半(默认是10px)

// 源码464行
p {  margin: 0 0 10px; }

　　如果想让一个段落突出显示，可以使用.lead样式，其作用主要是增大字体大小、粗细、行间距和margin-bottom。

<p class="lead">...</p>

.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 200;
  line-height: 1.4;
}
@media (min-width: 768px) {                     /*大中型浏览器字体稍大*/
  .lead {    font-size: 21px;  }
}

3.强调文本

 　　Bootstrap将默认的文本强调元素进行了轻量化级实现，这些元素分别是：small、strong、em、cite。

// 源码56行
b,strong {  font-weight: bold;                  /* 粗体 */}
// 源码478行
small,.small {  font-size: 85%;                 /* 标准字体的85% */}
cite {  font-style: normal;                     /* 正常字体*/}

　　同样的原理，Bootstrap也为对其方式定义了简单而又明了的4个样式以便使用：

<p class="text-left">JavaScript编程精解</p>
<p class="text-center">JavaScript设计模式</p>
<p class="text-right">JavaScript启示录</p>
<p class="text-justify">Backbone应用开发实战</p>

4.缩略语

 　　Bootstrap在元素上实现了缩略词的功能，即鼠标以偶定到缩略词上市，就显示声明在title里的属性值。效果为：缩略词下面有虚横线，鼠标移动到缩略词上时有手型图标。其源码如下所示：

// 源码621行
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999999;
}
.initialism {
  font-size: 90%;  text-transform: uppercase;
}

　　从源码可以看出，有两种方式可以使用，一种是直接使用abbr，另外一种是应用initialism样式以是字体稍微缩小一点。

<abbr title="JavaScript设计模式是一本专门讲解设计模式的专业书籍">JavaScript设计模式</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

5.地址元素

 　　Bootstrap为地址元素address定义了一个简单通用的样式，其主要是行间距和底部的margin。

// 源码682行
address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.428571429;
}

　　用法：

<address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr>
    (123) 456-7890
</address>
<address>
    <strong>汤姆大叔</strong><br>
    <a href="mailto:#">tomxu@outlook.com</a>
</address>

6.引用

 　　在<blockquote>元素里进行引用，可以引用任意HTML内容，但一般推荐使用<p>。

<blockquote>
        <p>不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。</p>
</blockquote>

　　另外，Bootstrap还提供了一个.pull-right样式用于右对齐，以使用不同的排版方式：

<blockquote class="pull-right">
        <p>不愤不启,不悱不发。举一隅,不以三隅反,则吾不复也。</p>
        <small>出自 <cite title="论语•述而">论语</cite></small>
 </blockquote>

　　引用元素的主要样式：

// 源码630行
blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}
/* 此处省略部分代码 */
.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  text-align: right;
  border-right: 5px solid #eee; /* 右边显示的竖线 */
  border-left: 0;
}

7.列表

　　Bootstrap提供了6种形式的列表，分别是：普通列表、有序列表、去点列表、内联列表、描述列表和水平列表：

1.普通列表

<ul>
  <li>...</li>
</ul>

　　Bootstrap只是在原有普通列表上做了一些细微的优化，源码如下：

// 源码566行
ul,ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,ol ul,ul ol,ol ol {
  margin-bottom: 0;
}

2. 有序列表

　　ol看起来不原来的默认样式显示的柔和了一些。

<ol>
  <li>...</li>
</ol>

3.去点列表

<ul class="list-unstyled">
     <li>...</li>
     <li>
         <ul>
             <li>...</li>
             <li>
                 <ul>
                     <li>...</li>
                     <li>...</li>
                 </ul>
             </li>
         </ul>
     </li>
</ul>

// 源码577行
.list-unstyled {
  padding-left: 0;
  list-style: none;
}

4.内联列表

　　Bootstrap定义了一个list-lnline样式用于实现内联列表，也就是将列表项水平显示。

// 源码581行
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}
.list-inline > li:first-child {  padding-left: 0;}

5.定义列表

// 源码593行
dl {  margin-top: 0;  margin-bottom: 20px;}
dt,dd {  line-height: 1.428571429;}
dt {  font-weight: bold;}
dd {  margin-left: 0;}

6.水平定义列表

　　Bootstrap提供了一个dl-horizontal样式，通过在dl元素上应用该class，实现列表水平显示：

 

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

 

  // 源码607行
@media (min-width: 768px) {     /*这种样式只能在平板电脑或更大的浏览器上才能用 */
  .dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;            /* 超过160像素就自动隐藏 */
    white-space: nowrap;
  }
  .dl-horizontal dd {    margin-left: 180px;  }
}