Bootstrap5笔记(2)下

歌者文明清理员 · 发表于 2023-6-20 23:30:21

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

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

x

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

墙裂建议订阅一下Bootstrap5官方教程

源地址：https://fishc.com.cn/thread-229745-1-1.html

上半部分：https://fishc.com.cn/thread-229905-1-1.html

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-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

不二如是 · 发表于 2023-6-21 09:34:32

好速度

账号		自动登录	找回密码
密码			立即注册

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

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

本帖被以下淘专辑推荐: