Bootstrap5笔记(2)上

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

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

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

x

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

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

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

下半部分：https://fishc.com.cn/thread-229907-1-1.html

Bootstrap 的 css 对 h1~h6 的标签样式进行了设定。

一个最基础的代码：

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

效果：

登录/注册后可看大图

Bootstrap5 还提供了 class 属性的 h1~h6。新代码：

    <p class="h1">假h1</p>
    <p class="h2">假h2</p>
    <p class="h3">假h3</p>
    <p class="h4">假h4</p>
    <p class="h5">假h5</p>
    <p class="h6">假h6</p>

效果（不知道为啥 macOS 里不行）

登录/注册后可看大图

另外，在 h1~h6 里面套上 small 标签可以做到变小那么一丢丢；

    <h1>h1
        <small>h1</small>
    </h1>
    <h2>h2
        <small>h2</small>
    </h2>
    <h3>h3
        <small>h3</small>
    </h3>
    <h4>h4
        <small>h4</small>
    </h4>
    <h5>h5
        <small>h5</small>
    </h5>
    <h6>h6
        <small>h6</small>
    </h6>

效果：

登录/注册后可看大图

未完待续...

琅琊王朝 · 发表于 2023-6-24 21:42:49

这？挺简单

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

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

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

评分

本帖被以下淘专辑推荐: