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>

更多排版

Bootstrap 图片样式

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

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

<img> 类

以下类可用于任何图片中