鱼C论坛

 找回密码
 立即注册
查看: 864|回复: 1

[技术交流] 02 - 文本样式之「标题类」

[复制链接]
发表于 2023-6-15 17:04:56 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2023-6-15 18:26 编辑

0_0.png

标题是网页中比较醒目的文字,通常使用 <h1>~<h6> 标签来表示,Bootstrap 对这些标题标签的默认样式进行了覆盖。

我们输入最基础的:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个BootStrap5程序</title>
    <!-- 必须引入 -->
    <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
    <h1>h1 一级标题</h1>
    <h2>h2 二级标题</h2>
    <h3>h3 三级标题</h3>
    <h4>h4 四级标题</h4>
    <h5>h5 五级标题</h5>
    <h6>h6 六级标题</h6>
    <!-- 必须引入 -->
    <script src="js/bootstrap.js"></script>
</body>

</html>
效果:

2023-06-15_11-20-51.png

Bootstrap还提供了.h1、.h2、.h3、.h4、.h5、.h6 这 6 个类来设置字体大小,它们分别对应各级标题的字体大小。

有时网页中还会用到副标题,Bootstrap 中的副标题是在标题标签中使用 <small> 标签来表示的。

保持上面代码主结构不变,只修改 body 元素的内容:
    <h1>h1 一级标题
        <small>我是h1的副标题</small>
    </h1>
    <h2>h2 二级标题
        <small>我是h2的副标题</small>
    </h2>
    <h6>h6 六级标题</h6>
效果:

2023-06-15_12-14-05.png

如果希望标题更加突出,可以使用一系列的 display 类来设置标题样式:
    <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>
效果:

2023-06-15_17-01-00.png

display 类会让标题显得更大,.display-6的字体大小是 2.5rem,相当于一级标题字体的大小,每增加一级,字体大小增加 0.5 rem。

rem 和 px 的换算:

|  px  |     rem       |
------------------------
|  12  | 12/16 = .75   |
|  14  | 14/16 = .875  |
|  16  | 16/16 = 1     |
|  18  | 18/16 = 1.125 |
|  20  | 20/16 = 1.25  |
|  24  | 24/16 = 1.5   |
|  30  | 30/16 = 1.875 |
|  36  | 36/16 = 2.25  |
|  42  | 42/16 = 2.625 |
|  48  | 48/16 = 3     |  

用哪个单位没有明确要求,鱼油们根据自己的偏好使用即可。

要注意的就是:
游客,如果您要查看本帖隐藏内容请回复


Bootstrap 标题类的字体大小:

类或标签 字体大小
.display-1 5rem
.display-2 4.5rem
.display-3 4rem
.display-4 3.5rem
.display-5 3rem
.h1,h1,.display-6 2.5rem
.h2,h2 2rem
.h3,h3 1.75rem
.h4,h4 1.5rem
.h5,h5 1.25rem
.h6,h6 1rem


这位鱼油,如果喜欢本帖子,请订阅>>> 专辑 <<<(不喜欢更要订阅


官方 Web 课程:

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-6-15 21:05:40 | 显示全部楼层
Bootstrap的标题,设置窗口变大,标题竟然也变大了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 20:37

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表