Bootstarp5第三弹

五、文字排版

<.h1>-<.h6>

<div class="container">
    <h1>文字排版</h1>
    <h2>文字排版</h2>
    <h3>文字排版</h3>
    <h4>文字排版</h4>
    <h5>文字排版</h5>
    <h6>文字排版</h6>
</div>

Display标题类

相比于h，字体更大更粗一些

<div class="display-1">display1</div>
<div class="display-2">display2</div>
<div class="display-3">display3</div>
<div class="display-4">display4</div>

small

相比于h，字体更小更浅一些

<h1>
    标题
    <small>副标题</small>
</h1>

mark

有一个浅黄色底色

<mark>高亮文本</mark>

abbr

在文本底部有一条虚线边框

<abbr title="hello">world</abbr>

blockquote

作为后缀名，例如，“-xxx”

<blockquote>
    <footer class="blockquote-footer">STDU</footer>
</blockquote>

dl

dt

dd

<dl>
    <dt>饮料</dt>
        <dd>咖啡</dd>
   <dt>零食</dt>
    <dd>薯片</dd>
</dl>

code

将代码元素放置到code元素里面,会用红色字体将代码元素标注出来

<code>span</code>
<code>div</code>

kbd

将按键标注出来，呈现处黑底白字

复制键<kbd>Ctrl+c</kbd>

pre

淡化文本内容

<pre>prepare</pre>

其他排版

.lead	<!--让段落更突出-->

.small	<!--指定更小文本 (为父元素的 85% )-->

.text-start	<!--左对齐-->

.text-center	<!--居中-->

.text-end	<!--右对齐-->

.text-justify	<!--设定文本对齐,段落中超出屏幕部分文字自动换行-->

.text-nowrap	<!--段落中超出屏幕部分不换行-->

.text-lowercase	<!--设定文本小写-->

.text-uppercase	<!--设定文本大写-->

.text-capitalize	<!--设定单词首字母大写-->

.initialism	<!--显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母-->

.list-unstyled	<!--移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)-->

.list-inline	<!--将所有列表项放置同一行-->