Bootstrap-Personal diary two

1,bootstrap文字排版

Bootstrap4默认：

font-size 为 16px

line-height 为 1.5

font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif

所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)

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

3，Display 标题类

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

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>

5，<mark>

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

</div>

6，Bootstrap4 颜色

一些有代表意义的颜色类：

.text-muted, .text-primary, .text-success,

 .text-info, .text-warning, .text-danger, 

.text-secondary, .text-white, .text-dark，.text-light:

<div class="container">
      <h2>代表指定意义的文本颜色</h2>
      <p class="text-muted">柔和的文本。</p>
      <p class="text-primary">重要的文本。</p>
      <p class="text-success">执行成功的文本。</p>
      <p class="text-info">代表一些提示信息的文本。</p>
      <p class="text-warning">警告文本。</p>
      <p class="text-danger">危险操作文本。</p>
      <p class="text-secondary">副标题。</p>
      <p class="text-dark">深灰色文字。</p>
      <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
      <p class="text-white">白色文本（白色背景上看不清楚）。</p>

</div>

背景颜色

提供背景颜色的类有:

 .bg-primary, .bg-success, .bg-info, 

.bg-warning, .bg-danger, .bg-secondary, .bg-dark ， .bg-light

<div class="container">
          <h2>背景颜色</h2>
          <p class="bg-primary text-white">重要的背景颜色。</p>
          <p class="bg-success text-white">执行成功背景颜色。</p>
          <p class="bg-info text-white">信息提示背景颜色。</p>
          <p class="bg-warning text-white">警告背景颜色</p>
          <p class="bg-danger text-white">危险背景颜色。</p>
          <p class="bg-secondary text-white">副标题背景颜色。</p>
          <p class="bg-dark text-white">深灰背景颜色。</p>
          <p class="bg-light text-dark">浅灰背景颜色。</p>

</div>