03Bootstrap5文字排版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5文字排版</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--
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)。
-->
<!--Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式-->
<div class="container mt-3">
    <p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p>
    <h1>h1 Bootstrap 标题</h1>
    <h2>h2 Bootstrap 标题</h2>
    <h3>h3 Bootstrap 标题</h3>
    <h4>h4 Bootstrap 标题</h4>
    <h5>h5 Bootstrap 标题</h5>
    <h6>h6 Bootstrap 标题</h6>
</div>

<!--通过.h1到.h6类设置元素样式-->
<div class="container mt-3">
    <p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p>
    <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。
Display 标题可以输出更大更粗的字体样式。
-->
<div class="container mt-3">
    <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>
    <h1 class="display-5">Display 5</h1>
    <h1 class="display-6">Display 6</h1>
</div>

<!--
<small>
在 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>副标题</small></h6>
</div>

<!--
<mark>
Bootstrap 5 定义 <mark> 标签及 .marked 类为黄色背景及有一定的内边距:
-->
<div class="container">
    <h1>高亮文本</h1>
    <p>使用 mark 元素来
        <mark>高亮</mark>
        文本。
    </p>
</div>

<!--
<abbr>
Bootstrap 5 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
-->
<div class="container">
    <h1>Abbreviations</h1>
    <p><abbr>元素的样式为显示在文本底部的一条虚线边框:</p>
    <p>The <abbr title="abbr设置了文本底部的虚线">WHO</abbr> was founded in 1948.</p>
</div>

<!--
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :
-->
<div class="container">
    <h1>Blockquotes</h1>
    <p>blockquote用于包裹一个引用的内容</p>
    <blockquote class="blockquote">
        <p>
            春江潮水连海平，海上明月共潮生。<br>
            滟滟随波千万里，何处春江无月明！<br>
            江流宛转绕芳甸，月照花林皆似霰；<br>
            空里流霜不觉飞，汀上白沙看不见。<br>
            江天一色无纤尘，皎皎空中孤月轮。<br>
            江畔何人初见月？江月何年初照人？<br>
            人生代代无穷已，江月年年望相似。<br>
            不知江月待何人，但见长江送流水。<br>
            白云一片去悠悠，青枫浦上不胜愁。<br>
            谁家今夜扁舟子？何处相思明月楼？<br>
            可怜楼上月裴回，应照离人妆镜台。<br>
            玉户帘中卷不去，捣衣砧上拂还来。<br>
            此时相望不相闻，愿逐月华流照君。<br>
            鸿雁长飞光不度，鱼龙潜跃水成文。<br>
            昨夜闲潭梦落花，可怜春半不还家。<br>
            江水流春去欲尽，江潭落月复西斜。<br>
            斜月沉沉藏海雾，碣石潇湘无限路。<br>
            不知乘月几人归，落月摇情满江树。<br>
        </p>
        <footer class="blockquote-footer">张若虚</footer>
    </blockquote>
</div>

<!--
<dl>
Bootstrap 5 定义 HTML <dl> 元素的样式如下:
-->
<div class="container">
    <h1>描述列表</h1>
    <p>dl 元素表示一个描述列表：</p>
    <dl>
        <dt>李白</dt>
        <dd>中国诗人</dd>
        <dt>你好</dt>
        <dd>一句问候语</dd>
    </dl>
</div>
<!--
html中:
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>

<code>
Bootstrap 5 定义 HTML <code> 元素的样式,颜色为红色
如下:
-->
<div class="container">
    <h1>代码片段</h1>
    <p>可以将一些代码元素放到 code 元素里面:</p>
    <p>
        以下 HTML 元素:
        <code>span</code>,
        <code>section</code>
        , 和
        <code>div</code>
        用于定义部分文档内容。
    </p>
</div>

<!--
<kbd>
Bootstrap 5 定义 HTML <kbd> 元素的样式如下:
-->
<div class="container">
    <h1>Keyboard Inputs</h1>
    <p>要指示通常通过键盘打印，请使用kbd元素:</p>
    <p>使用 <kbd>ctrl + p</kbd> 打开 “打印” 对话框。</p>
</div>

<!--
-----------------更多排版类文本标签------------
.lead              让段落更突出
.small             指定更小文本 (为父元素的 85% )
.text-left         左对齐
.text-center       居中
.text-right            右对齐
.text-justify      设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap       段落中超出屏幕部分不换行
.text-lowercase        设定文本小写
.text-uppercase        设定文本大写
.text-capitalize   设定单词首字母大写
.initialism            显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled     移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline       将所有列表项放置同一行
-->
</body>
</html>

html5 字体间距 html5段落字体大小_javascript