Bootstrap笔记(五) 排版 - 标题

最新推荐文章于 2024-06-02 17:21:14 发布
最新推荐文章于 2024-06-02 17:21:14 发布
阅读量202 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XI_MILU/article/details/119759298
版权

排版 - 标题

主标题

Bootstrap支援 <h1> ~ <h6>等HTML标题元素，也提供 .h1 ~ .h6 类别用来设定标题1 ~ 标题6 (两种写法效果相同) ，其中h1标题的字体最大，h6字体最小。

範例1: 使用HTML标题元素

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>主標題</title>
</head>
<body>
    <div class="container">
        <h1>(標題1)靜夜思</h1>
        <h2>(標題2)靜夜思</h2>
        <h3>(標題3)靜夜思</h3>
        <h4>(標題4)靜夜思</h4>
        <h5>(標題5)靜夜思</h5>
        <h6>(標題6)靜夜思</h6>
    </div>
</body>
</html>

範例2: 使用Bootstrap类别

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>主標題</title>
</head>
<body>
    <div class="container">
        <div class="h1">(標題1)靜夜思</div>
        <div class="h2">(標題2)靜夜思</div>
        <div class="h3">(標題3)靜夜思</div>
        <div class="h4">(標題4)靜夜思</div>
        <div class="h5">(標題5)靜夜思</div>
        <div class="h6">(標題6)靜夜思</div>
    </div>
</body>
</html>

主标题

副标题

可以使用<samll>元素或 .small 类别来设定副标题，他会以较小的字体显示(字体大小为父元素的85%)。

範例:

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>副標題</title>
</head>
<body>
    <div class="container">
        <h1>(標題1)靜夜思<small>作者:李白</small></h1>
        <h2>(標題2)靜夜思<small>作者:李白</small></h2>
        <!-- .text-muted类别会让文字颜色较浅 -->
        <h1>(標題1)靜夜思<small class="text-muted">作者:李白</small></h1>
        <h2>(標題2)靜夜思<small class="text-muted">作者:李白</small></h2>
    </div>
</body>
</html>

副标题

加强标题

若要让标题更加突出，可以加上 .display-1 ~ .display-6 类别，他们的字体大小分别为 5rem、4.5rem、4rem、3.5rem、3rem、2.5rem。

範例:

<!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">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>加強標題</title>
</head>
<body>
    <div class="container">
    	<!-- 这些标题都使用h1元素，只是套用不同的display类别 -->
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <h1 class="display-5">Display 5</h1>
        <h1 class="display-6">Display 6</h1>
    </div>
</body>
</html>

加强标题

XI_MILU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap5学习笔记
weixin_48778425的博客
10-20 1025
一、布局 1.1 网格 先div.container，再div.row + div.col，例如col-6，col-md-2代表当宽度大于md≥768px才生效 1.2 列 掌握垂直对齐 + 水平对齐 + offset列偏移 + 独立列的示例（演示图片+环绕文字） 1.3 列填充 写在row上，gx-5 水平方向，gy-5 垂直方向间隙，g-5 水平垂直同时都有列间隙，g-0 是无间隙 二、页面内容 2.1 排版 标题 + 显示标题（比h1-h6还大）+ 内联文本元素（下划线，删除线，斜体等）+ 列
【Bootstrap】学习笔记（二）——CSS布局
ZhShy
01-18 749
排版 标题： h1~h6标签 样式类：h1~h6 小标题：标题内嵌.small；字号更小，颜色更小 段落： p标签：字体14px 行高1.428 1/2行高的底部外边距（10px） 中心内容：.lead样式类；更大更粗行高更高的段落文本 mark标签 用于突出高亮文本 文本 小号文本 small标签可以设置文本为父元素字体大小的85% 段落文本小号文本 del和s标签 删除线 del：删...
bootstrap使用笔记
qq_45911550的博客
11-01 168
1、栅格系统 1、 2、列嵌套 3、列偏移 4、列排序 5、响应式工具
bootstrap5-学习笔记1-容器+布局+按钮+工具
陆沙的博客
06-02 862
bs5
Bootstrap5 学习笔记（二）
qq_33365152的博客
09-30 63
Bootstrap5 学习笔记（二）
bootstrap模板paper-m开发笔记
最新发布
06-10
Bootstrap模板“Paper-M”开发笔记 Bootstrap是一款广受欢迎的开源前端框架，用于快速构建响应式、移动优先的网站。Paper-M是基于Bootstrap的一个主题模板，它以简洁、清新的纸张风格为设计灵感，提供了丰富的组件...
bootstrap模板ntion-model-for-netwo开发笔记
06-07
在“bootstrap模板ntion-model-for-netwo开发笔记”中，我们可以推测这是一个关于如何利用Bootstrap框架来创建网络监控或网络入侵检测系统用户界面的项目。 首先，Bootstrap的核心组件包括网格系统、排版工具、导航...
整理关于Bootstrap排版的慕课笔记
08-30
总的来说，Bootstrap的排版系统为开发者提供了标准化和一致性的界面设计工具，无论是标题、副标题还是普通文本，都有相应的预设样式和便捷的类名供使用。这极大地提高了开发效率，同时也保证了网页在不同设备上的...
Bootstrap3学习笔记(二)之排版
09-02
在本文中，我们将深入探讨Bootstrap3的排版元素，包括标题、段落、文本对齐、文本格式化以及颜色样式。 首先，Bootstrap3对HTML的标题标签（`<h1>`到`<h6>`）进行了样式调整，以提供更统一和美观的视觉效果。同时，...
Bootstrap 排版h1~h6标题
歪脖先生的博客
03-05 1973
标题HTML中定义的所有标题标签，从 &lt;h1&gt; 到 &lt;h6&gt;，在Bootstrap中都是可用的。并且，Bootstrap 还为它们定义了样式，&lt;h1&gt; 是 36px高，&lt;h6&gt; 是 12px 高。效果如图 3‑1所示：图3-1 标题样式...
bootStrap常用样式：标题和段落、列表、代码、表格
aqzengkuasheng的博客
02-19 2114
标题和段落 常用样式 常用样式 1.标题 bootStrap对h1~h6的标题效果进行了覆盖 提供了对应的类名，为非标题元素提供了样式 .h1~.h6 副标题提供了samll标签或者 .samll类名 2.段落 >通过.lead来突出强调内容 <small>小号字 <b>或<strong>加粗 <i><em>:斜体 3.强调 定义了一套类名，这里称其为强调类名，这些强调类都是
Bootstrap排版之标题
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 1692
Bootstrap排版之标题 1.定义标题样式 2.运行效果 3.定义 4.运行效果，表面上看是差不多的，但其实你看这两个的源代码，第二种样式是没有定义margin-top和 marging-bottom，第一种标签则定义了margin-top和margi
bootstrap(响应式，进度条，标题栏，字体图标，分页等等)
docwangsir的博客
11-10 1478
有HTML，css,js基础去学bootstrap十分的容易，做如下笔记： var 文本样式= { 标题样式：[.h1,.h2,.h3], 加深加重：[&lt;mark&gt;&lt;/mark&gt;&lt;strong&gt;&lt;/strong&gt;], 删除线：[&lt;del&gt;&lt;/del&gt;], 下划线：[&lt;ins&gt;&lt;/ins&
BootStrap中的标题和段落
实践求真知
01-20 757
一 标题（一） 1 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;标题（一）&lt;/title&gt; &lt;link rel="stylesheet" href="https://cdn.bootcss.c
Bootstrap-标题样式
wendZzoo的博客
12-18 1409
Bootstrap重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px； h4~h6重置后的值都是10px。 所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。 固定不同级别标题字体大小， h1=36px， h2=30px， h3=24px， h4=18px， h5=14px， h6=12p...
学习Bootstrap（二）——全局样式，标题
cody_cat的博客
12-27 673
一. 全局样式Bootstrap框架并不一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下： 移除body的margin声明 设置body的背景色为白色 为排版设置了基本的字体、字号和行高 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式 styl
Bootstrap学习笔记
qq_51861704的博客
05-17 413
1：背景 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如W.
Bootstrap　　d-inline-flex　
05-27
Bootstrap是一个流行的前端框架，提供了丰富的CSS和JavaScript组件，用于快速构建响应式和移动设备优先的网站和应用程序。 d-inline-flex是Bootstrap框架中的一个CSS类名，用于将元素设置为内联弹性盒子。内联弹性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值