设为首页收藏本站

切换到窄版

鱼C论坛»论坛 › 技术交流 › Web开发 › Bootstrap5笔记(2)上

发新帖

查看: 503|回复: 1

[学习笔记] 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>

复制代码

效果：

登录/注册后可看大图

未完待续...

评分

参与人数 1	荣誉 +1	收起理由
琅琊王朝	+ 1	捧个场

查看全部评分

本帖被以下淘专辑推荐:

· 歌者的学习笔记|主题: 16, 订阅: 0

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

回复

使用道具举报

发表于 2023-6-24 21:42:49 | 显示全部楼层

这？挺简单

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

回复支持反对

使用道具举报

发新帖

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

GMT+8, 2024-5-1 18:13

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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