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

Bootstrap5笔记(2)下

本帖最后由 歌者文明清理员 于 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>

效果:

https://t3.wodetu.cn/2023/06/20/0614f2e900b95392a5135c3976de93dc.png

根据相关资料分析,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

{:10_256:}{:10_256:}好速度
页: [1]
查看完整版本: Bootstrap5笔记(2)下