WEB前端网页设计-Bootstrap5 文字排版

目录

Bootstrap 5 默认设置

Display 标题类

<小>

<标记>

<缩写>

<块引用>

<分>

<代码>

<前>

更多排版类

---

Bootstrap 5 默认设置

Bootstrap 5 默认的 font-size 为 16px， line-height 为 1.5。

默认的 font-family 为 “Helvetica Neue”， Helvetica， Arial， sans-serif。

此外，所有的 <p> 元素 margin-top： 0 、 margin-bottom： 1rem （16px）。

---

<H1> - <H6>

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：

<  div class=“container”> <h1>h1 Bootstrap title</h1> <h2>h2 Bootstrap title</h2> <h3>  h3 Bootstrap 标题</h3> <h4>h4 Bootstrap 标题</h4> <h5>h5 Bootstrap title</h5> <h6>   h6 Bootstrap title</H6> </格>

你也可以使用 .h1 到 .h6 类来设置元素的样式：

<  div class=“container”> <p class=“h1”>h1 Bootstrap 标题</p> <p  class=“h2“>h2 Bootstrap 标题</p> <p class=”h3“>h3 Bootstrap 标题</p>  <p  class=”h4“>h4 Bootstrap 标题 </p> <p class=”h5“>h5 Bootstrap 标题</p>  <p  class=”h6“>h6 Bootstrap 标题</p> </div>

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”> 显示 2</h1> <h1 类=“显示-3”>显示 3</h1> <h1 类=“显示-4”>显示 4</h1> </格>

---

<小>

在 Bootstrap 5 中 HTML <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>副标题</小></高6> </格>

---

<标记>

Bootstrap 5 定义 <mark> 标签及 .mark 类为黄色背景及有一定的内边距：

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

---

<缩写>

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

<  div class=“container”> <h1>缩写</h1> <p>abbr 元素用于标记缩写或首字母缩略词：</p> <p><缩写title=“世界卫生组织”>WHO</abbr>成立于1948年。</人> </格>

---

<块引用>

对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 ：

<  div class=“container”> <h1>Blockquotes</h1> <p>blockquote 元素用于呈现来自其他来源的内容：</p>  < blockquote class=“blockquote”> <p>50年来，世界自然基金会一直在保护自然的未来。世界自然基金会是世界领先的保护组织，在100个国家开展工作，并得到美国1万会员和全球近2万会员的支持。</p> <footer class=“blockquote-footer”>摘自WWF的网站</footer> </blockquote>  </div>

---

<分>

Bootstrap 5 定义 HTML <dl> 元素的样式如下：

<  div class=“container”> <h1>Description Lists</h1> <p>dl 元素表示描述列表：</p>  <dl > <dt>咖啡</dt> <dd>- 黑热饮</dd> <dt>牛奶</dt>  <DD>- 白冷饮</DD> </dL>  </div>

---

<代码>

Bootstrap 5 定义 HTML <code> 元素的样式如下：

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

<kbd>

Bootstrap 5 定义 HTML <kbd> 元素的样式如下：

<  div class=“container”> <h1>键盘输入</h1> <p>要指示通常通过键盘输入的输入，请使用 kbd 元素：</p> <p>使用  <kbd>ctrl + p</kbd> 打开“打印”对话框。</人> </格>

---

<前>

Bootstrap 5 定义 HTML <pre> 元素的样式如下：

<  div class=“container”> <h1>多个代码行</h1> <p>对于多行代码，请使用 pre 元素：</p> <pre> pre 元素中的文本
以固定宽度显示
字体，并保留
空格和
换行符。</前></格>

---

更多排版类

下表提供了 Bootstrap5 更多排版类的实例：

类名	描述
。铅	让段落更突出
。小	指定更小文本 (为父元素的 85% )
.text-start	左对齐
.文本中心	居中
.text-end	右对齐
.text-justing（文本对齐）	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-小写	设定文本小写
.text-大写	设定文本大写
.text-capitalize	设定单词首字母大写
。首字母缩略词	显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled	移除默认的列表样式，列表项中左对齐 （ <ul> 和 <ol> 中）。这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行