鱼C论坛

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

[学习笔记] Bootstrap5笔记(2)下

[复制链接]
发表于 2023-6-20 23:30:21 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 歌者文明清理员 于 2023-6-20 23:33 编辑



Bootstrap5 的 class 除了 h1~h6,还有 display-1~display-6。

源码:
    <h1 class="display-1">h1</h1>
    <h1 class="display-2">h1</h1>
    <h1 class="display-3">h1</h1>
    <h1 class="display-4">h1</h1>
    <h1 class="display-5">h1</h1>
    <h1 class="display-6">h1</h1>

效果:


                               
登录/注册后可看大图


根据相关资料分析,rem 应该是 Bootstrap5 的一种计量单位,比 h1~h6 的大小都大得多。

不信的话你改掉:
<h1>h1</h1>
    <h1 class="display-2">h1</h1>
    <h1 class="display-3">h1</h1>
    <h1 class="display-4">h1</h1>
    <h1 class="display-5">h1</h1>
    <h1 class="display-6">h1</h1>

发现没有!h1 和 display-6 一样大!

px(像素)和 rem 的换算:

rem = px / 16


Bootstrap 里的字体:

类或标签字体大小
.display-15rem
.display-24.5rem
.display-34rem
.display-43.5rem
.display-53rem
.h1,h1,.display-62.5rem
.h2,h22rem
.h3,h31.75rem
.h4,h41.5rem
.h5,h51.25rem
.h6,h61rem

本帖被以下淘专辑推荐:

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

使用道具 举报

发表于 2023-6-21 09:34:32 | 显示全部楼层
好速度
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-12-22 13:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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