bootstrap——css样式（二、排版）

1、标题

HTML 中的所有标题标签，h1到h6 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<label class="h1">h1. Bootstrap heading</label>
<label class="h2">h2. Bootstrap heading</label>
<label class="h3">h3. Bootstrap heading</label>
<label class="h4">h4. Bootstrap heading</label>
<label class="h5">h5. Bootstrap heading</label>
<label class="h6">h6. Bootstrap heading</label>

.h1到.h6只是有标题的样式，但是还是内联元素，不换行

---

2、副标题

在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

副标题跟在主题后面，字体稍微小一些，颜色是灰色的

---

3、页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 body 元素和所有段落元素。另外，p（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

---

4、中心内容

通过添加 .lead 类可以让段落突出显示。

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

---

5、文本
1）被删除的文本

<del>This line of text is meant to be treated as deleted text.</del>

2）无用文本

<s>This line of text is meant to be treated as no longer accurate.</s>

3）插入文本

<ins>This line of text is meant to be treated as an addition to the document.</ins>

表现形式就是带下划线
4）带下划线的文本

<u>This line of text will render as underlined</u>

5）小号文本
还可以为行内元素赋予 .small 类以代替任何 元素。

<small>This line of text is meant to be treated as fine print.</small>

6）着重

<strong>rendered as bold text</strong>

7）斜体

<em>rendered as italicized text</em>

在 HTML5 中可以放心使用 和 标签。 用于高亮单词或短语，不带有任何着重的意味；而 标签主要用于发言、技术词汇等。

---

6、对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

---

7、缩略语
1）基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要为 abbr 元素设置 title属性。

<abbr title="attribute">attr</abbr>

2）首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

---

8、地址

<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>

---

9、引用
将任何 HTML 元素包裹在

中即可表现为引用样式。对于直接引用，我们建议用 p 标签。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

---

10、列表
1）无序列表

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

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

2）有序列表

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

3）无样式列表
.list-unstyled
移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）

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

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

4）内联列表
.list-inline
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。同时ul会产生padding-left：-5px

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

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

5）描述
带有描述的短语列表。

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

6）水平排列的描述
.dl-horizontal 可以让 dl 内的短语及其描述排在一行。开始是像 dl 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

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