bootstrap4--页面基本设置

默认设置

标题设置

文本样式标签

文本样式类

文本字体设置

文本对齐方式设置

文本换行设置

文本大小写设置

列表样式设置

文本颜色

文本字体颜色

文本背景色

使用bootstrap排版特性，可以创建标题、段落、列表以及其他内联元素。

默认设置

●font-size：16px

●line-height：1.5

●font-family："Helvetica Neue", Helvetica, Arial, sans-serif

●<p>标签：margin-top:0 margin-bottom:16px

标题设置

在html5中我们已经学过，标题可以使用h1-h6样式进行设置，bootstrap中也是亦然。除此之外，bootstrap中还提供了4个Display类来控制标题样式：.display-1，.display-2，.display-3，.display-4，相对来说，display标题可以输出更大更粗的字体样式。

除了主标题，bootstrap还可以设置内联子标题，只需要在元素两旁添加<small>或者添加.small class就可以得到一个与主标题并排的字号更小颜色更浅的文本

●标题：<h1></h1>，<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>

●标题类：.display-1，.display-2，.display-3，.display-4

●内联子标题：<small></small> / .small

内联子标题通常会与.text-muted样式一起使用，作用是使字体颜色变浅

测试代码：

    <div class="container"><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><h1>h1 主标题1 <small>副标题1</small></h1><h2>h2 主标题2 <small>副标题2</small></h2><h3>h3 主标题3 <small class="text-muted">副标题3</small></h3><h4>h4 主标题4 <small class="text-muted">副标题4</small></h4><h5>h5 主标题5 <small>副标题5</small></h5><h6>h6 主标题6 <small>副标题6</small></h6></div>

网页效果：

文本样式标签

许多样式我们在之前的html5中有见过，并且之前也介绍和演示过，这里就不多加赘述。对于效果不同和新的标签在这里简单介绍一下：

●<mark></mark>：高亮效果。效果为黄色背景以及有一定的内边距

●<abbr></abbr>：文本底部虚线边框效果

●<blockquote></blockquote>：引用内容(引用块，长引用)

引用内容块中常使用.blockquote-footer样式设置底部备注来源

●<code></code>：定义单行代码或者单个单词

●<pre></pre>：显示多行代码

特殊符号需要进行手动转义，例如：'<' -- '&lt' '>'--'&gt'

●<kbd></kbd>：键盘输入文本

测试代码：

    <div class="container"><!-- 高亮文本 --><p>文本<mark>高亮</mark>文本</p><!-- 文本底部虚线边框 --><p>文本<abbr title="">底部虚线边框</abbr>文本</p><!-- 引用内容 --><blockquote class="blockquote"><p>床前明月光，疑是地上霜</p><footer class="blockquote-footer">李白</footer></blockquote><!-- 单行代码元素 --><p>这段文本使用<code>p</code>标签</p><!-- 多行代码 --><pre>&lt;p&gt;&lt;h1&gt;content&lt;/h1&gt;&lt;/p&gt;</pre><!-- 键盘输入文本 --><p>键盘输入<kbd>ctrl+c</kbd>复制文本</p></div>

网页效果：

文本样式类

文本字体设置

●.font-weight-bold：加粗文本

●.font-weight-normal：普通文本

●.font-weight-light：更细的文本

●.small：指定更小文本(设置为父元素的85%)

●.font-italic：斜体文本

●.lead：突出段落

测试代码：

    <div class="container"><!-- 加粗文本 --><p class="font-weight-bold">加粗文本</p><!-- 普通文本 --><p class="font-weight-normal">普通文本</p><!-- 更细文本 --><p class="font-weight-light">更细文本</p><!-- 更小文本 --><p class="small">更小文本</p><!-- 斜体文本 --><p class="font-italic">斜体文本</p><!-- 突出段落 --><p class="lead">突出段落</p></div>

网页效果：

文本对齐方式设置

●.text-left：左对齐

●.text-center：居中对齐

●.text-right：右对齐

这个对齐方式很简单，所以这里就不做测试查看效果。

文本换行设置

●.text-justify：超出部分自动换行

●.text-nowrap：超出部分不换行

超出部分不会进行隐藏，一般我们可以通过.text-truncate类对超出部分用省略号代替

我们可以设置一个div块，分别设置是否换行查看效果，下例中设置div块边框样式为实线一个像素，宽度为100个像素：

    <div class="container"> <!-- 超出部分自动换行 --><div class="text-justify">超出部分自动换行</div><!-- 超出部分不换行 --><div class="text-nowrap">超出部分不换行</div><!-- 超出部分省略号代替 --><div class="text-nowrap text-truncate">超出部分不换行</div></div>

网页效果：

文本大小写设置

在bootstrap中，自带css类设置英文字母转大小写：

●.text-lowercase：文本转小写

●.text-uppercase：文本转大写

●.text-capitalize：单词首字母大写

●.initialism：设置<abb>元素内文本以小号字体展示，且将小写字母转大写

测试代码：

        <!-- 文本小写 --><p class="text-lowercase">AaBbCc</p><!-- 文本大写 --><p class="text-uppercase">AaBbCc</p><!-- 单词首字母大写 --><p class="text-capitalize">aaaaaaa</p><!-- <abbr>元素中文本设置 --><p>文本<abbr title="" class="initialism">aaaaa</abbr>文本</p>

网页效果：

列表样式设置

●.list-unstyled：移除默认样式

●.list-inline：列表项置于同一行

需要注意的是，.list-unstyled移除默认样式仅适用于直接子列表项，如果需要移除嵌套列表项，需要在嵌套列表项中使用此样式。测试代码：

        <!-- 移除默认列表样式 --><ul class="list-unstyled"><li>列表项1</li><li>列表项2</li><li><ol><li>子列表项1</li><li>子列表项2</li><li>子列表项3</li></ol></li></ul><!-- 将所有列表项放置同一行 --><ul class="list-inline"><li class="list-inline-item">列表项1</li><li class="list-inline-item">列表项2</li><li class="list-inline-item">列表项3</li></ul>

网页效果：

文本颜色

文本字体颜色

在css中我们有学过颜色的设置，bootstrap4中，提供了一些有代表意义的颜色类：

●.text-muted：柔和文本颜色

●.text-primary：重要文本颜色

●.text-success：成功文本颜色

●.text-info：提示信息文本颜色

●.text-warning：警告文本颜色

●.text-danger：危险文本颜色

●.text-body：body文本颜色

●.text-secondary：副标题文本颜色

●.text-white：白色文本

●.text-light：浅灰色文本

●.text-dark：深灰色文本

●.text-black：黑色文本

文本背景色

提供背景色的类如下，大部分与文本字体颜色设置类相同：

●.bg-primary：重要的背景色

●.bg-success：执行成功背景色

●.bg-info：信息提示背景色

●.bg-warning：警告背景色

●.bg-danger：危险背景色

●.bg-secondary：副标题背景色

●.bg-dark：深灰背景色

●.bg-light：浅灰背景色

需要注意的是，背景颜色不会设置文本颜色，如果需要设置文本颜色，需要与上述.text-*类共同使用。

颜色如下：