Bootstrap：文字排版与图片样式

Bootstrap4 文字排版

默认设置：
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

1、`<h1> - <h6>`

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式.

<div class="container"><h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1><h2>h2 Bootstrap 标题 (2rem = 32px)</h2><h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3><h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4><h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5><h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
</div>

2、Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1、.display-2、.display-3、 .display-4。

<div class="container"><h1>Display 标题</h1><p>Display 标题可以输出更大更粗的字体样式。</p><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1>
</div>

3、 `<small>`

在 Bootstrap 4 中 <small> 元素用于创建字号更小的颜色更浅的文本:

<div class="container"><h1>更小文本标题</h1><p>small 元素用于字号更小的颜色更浅的文本:</p>       <h1>h1 标题 <small>副标题</small></h1><h2>h2 标题 <small>副标题</small></h2><h3>h3 标题 <small>副标题</small></h3><h4>h4 标题 <small>副标题</small></h4><h5>h5 标题 <small>副标题</small></h5><h6>h6 标题 <small>副标题</small></h6>
</div>

4、`<mark>`

Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:

<div class="container"><h1>高亮文本</h1>    <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
</div>

5、`<abbr>`

Bootstrap 4 定义<abbr> 元素的样式为显示在文本底部的一条虚线边框:

<div class="container"><h1>Abbreviations</h1><p>The abbr element is used to mark up an abbreviation or acronym:</p><p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

6、`<dl>`

Bootstrap 4 定义<dl> 元素的样式如下:

<div class="container"><h1>Description Lists</h1>    <p>The dl element indicates a description list:</p><dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
</div>

7、`<code>`

Bootstrap 4 定义 <code> 元素的样式如下:

<div class="container"><h1>代码片段</h1><p>可以将一些代码元素放到 code 元素里面:</p><p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>

类名	描述
.font-weight-bold	加粗文本
.font-weight-normal	普通文本
.font-weight-light	更细的文本
.font-italic	斜体文本
.lead	让段落更突出
.small	指定更小文本 (为父元素的 85% )
.text-left	左对齐
.text-center	居中
.text-right	右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 `<abbr>` 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( `<ul>` 和 `<ol>` 中)。这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.pre-scrollable	使 `<pre>` 元素可滚动，代码块区域最大高度为 340px,一旦超出这个高度,就会在Y轴出现滚动条

Bootstrap 图片样式

Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角
.img-circle：添加 border-radius:50% 来让整个图片变成圆形
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框

`<img>` 类

以下类可用于任何图片中

类	描述
.img-rounded	为图片添加圆角 (IE8 不支持)
.img-circle	将图片变为圆形 (IE8 不支持)
.img-thumbnail	缩略图功能
.img-responsive	图片响应式 (将很好地扩展到父元素)