Bootstrap：文字排版与图片样式

痛定思痛。 2022-09-01 14:57 311阅读 0赞

#### 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>` 为黄色背景及有一定的内边距:

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

##### 更多排版 #####

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

#### Bootstrap 图片样式 ####

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

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

##### `<img>` 类 #####

以下类可用于任何图片中

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