03Bootstrap5文字排版

最新推荐文章于 2024-10-02 09:00:00 发布
最新推荐文章于 2024-10-02 09:00:00 发布
阅读量584 收藏 1
点赞数
分类专栏： Bootstrap5 文章标签： html html5 javascript Bootstrap5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/121801947
版权

03Bootstrap5文字排版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5文字排版</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--
Bootstrap 5 默认设置
Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
-->
<!--Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式-->
<div class="container mt-3">
    <p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p>
    <h1>h1 Bootstrap 标题</h1>
    <h2>h2 Bootstrap 标题</h2>
    <h3>h3 Bootstrap 标题</h3>
    <h4>h4 Bootstrap 标题</h4>
    <h5>h5 Bootstrap 标题</h5>
    <h6>h6 Bootstrap 标题</h6>
</div>

<!--通过.h1到.h6类设置元素样式-->
<div class="container mt-3">
    <p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p>
    <p class="h1">h1 Bootstrap 标题</p>
    <p class="h2">h2 Bootstrap 标题</p>
    <p class="h3">h3 Bootstrap 标题</p>
    <p class="h4">h4 Bootstrap 标题 </p>
    <p class="h5">h5 Bootstrap 标题</p>
    <p class="h6">h6 Bootstrap 标题</p>
</div>

<!--
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式:
.display-1, .display-2, .display-3, .display-4。
Display 标题可以输出更大更粗的字体样式。
-->
<div class="container mt-3">
    <h1>Display 标题</h1>
    <p>Display 标题可以输出更大更粗的字体样式。</p>
    <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>

<!--
<small>
在 Bootstrap 5 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:
-->
<div class="container">
    <h1>更小文本标题</h1>
    <p>small 元素用于字号更小的颜色更浅的文本:</p>
    <h1>h1 标题 <small>副标题</small></h1>
    <h2>h2 标题 <small>副标题</small></h2>
    <h3>h3 标题 <small>副标题</small></h3>
    <h4>h4 标题 <small>副标题</small></h4>
    <h5>h5 标题 <small>副标题</small></h5>
    <h6>h6 标题 <small>副标题</small></h6>
</div>

<!--
<mark>
Bootstrap 5 定义 <mark> 标签及 .marked 类为黄色背景及有一定的内边距:
-->
<div class="container">
    <h1>高亮文本</h1>
    <p>使用 mark 元素来
        <mark>高亮</mark>
        文本。
    </p>
</div>

<!--
<abbr>
Bootstrap 5 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
-->
<div class="container">
    <h1>Abbreviations</h1>
    <p>&lt;abbr>元素的样式为显示在文本底部的一条虚线边框:</p>
    <p>The <abbr title="abbr设置了文本底部的虚线">WHO</abbr> was founded in 1948.</p>
</div>

<!--
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :
-->
<div class="container">
    <h1>Blockquotes</h1>
    <p>blockquote用于包裹一个引用的内容</p>
    <blockquote class="blockquote">
        <p>
            春江潮水连海平，海上明月共潮生。<br>
            滟滟随波千万里，何处春江无月明！<br>
            江流宛转绕芳甸，月照花林皆似霰；<br>
            空里流霜不觉飞，汀上白沙看不见。<br>
            江天一色无纤尘，皎皎空中孤月轮。<br>
            江畔何人初见月？江月何年初照人？<br>
            人生代代无穷已，江月年年望相似。<br>
            不知江月待何人，但见长江送流水。<br>
            白云一片去悠悠，青枫浦上不胜愁。<br>
            谁家今夜扁舟子？何处相思明月楼？<br>
            可怜楼上月裴回，应照离人妆镜台。<br>
            玉户帘中卷不去，捣衣砧上拂还来。<br>
            此时相望不相闻，愿逐月华流照君。<br>
            鸿雁长飞光不度，鱼龙潜跃水成文。<br>
            昨夜闲潭梦落花，可怜春半不还家。<br>
            江水流春去欲尽，江潭落月复西斜。<br>
            斜月沉沉藏海雾，碣石潇湘无限路。<br>
            不知乘月几人归，落月摇情满江树。<br>
        </p>
        <footer class="blockquote-footer">张若虚</footer>
    </blockquote>
</div>

<!--
<dl>
Bootstrap 5 定义 HTML <dl> 元素的样式如下:
-->
<div class="container">
    <h1>描述列表</h1>
    <p>dl 元素表示一个描述列表：</p>
    <dl>
        <dt>李白</dt>
        <dd>中国诗人</dd>
        <dt>你好</dt>
        <dd>一句问候语</dd>
    </dl>
</div>
<!--
html中:
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>

<code>
Bootstrap 5 定义 HTML <code> 元素的样式,颜色为红色
如下:
-->
<div class="container">
    <h1>代码片段</h1>
    <p>可以将一些代码元素放到 code 元素里面:</p>
    <p>
        以下 HTML 元素:
        <code>span</code>,
        <code>section</code>
        , 和
        <code>div</code>
        用于定义部分文档内容。
    </p>
</div>

<!--
<kbd>
Bootstrap 5 定义 HTML <kbd> 元素的样式如下:
-->
<div class="container">
    <h1>Keyboard Inputs</h1>
    <p>要指示通常通过键盘打印，请使用kbd元素:</p>
    <p>使用 <kbd>ctrl + p</kbd> 打开 “打印” 对话框。</p>
</div>

<!--
-----------------更多排版类文本标签------------
.lead              让段落更突出
.small             指定更小文本 (为父元素的 85% )
.text-left         左对齐
.text-center       居中
.text-right            右对齐
.text-justify      设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap       段落中超出屏幕部分不换行
.text-lowercase        设定文本小写
.text-uppercase        设定文本大写
.text-capitalize   设定单词首字母大写
.initialism            显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled     移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline       将所有列表项放置同一行
-->
</body>
</html>

在这里插入图片描述

夏至xz
关注
专栏目录
Bootstrap：文字排版与图片样式，面试学习，web前端自学
mm627mm的博客
03-18 876
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》[外链图片转存中…(img-M0ZGZuWi-1710760027319)]
Bootstrap：文字排版与图片样式
2401_84094979的博客
04-19 627
默认设置：Bootstrap 4 默认的font-size为 16px,为 1.5。默认的为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的元素。
春江花月夜
weixin_30677073的博客
09-05 243
作者：张若虚 春江潮水连海平，海上明月共潮生。 滟滟随波千万里，何处春江无月明！ 江流宛转绕芳甸，月照花林皆似霰; 空里流霜不觉飞，汀上白沙看不见。 江天一色无纤尘，皎皎空中孤月轮。 江畔何人初见月？江月何年初照人？ 人生代代无穷已，江月年年只相似。 不知江月待何人，但见长江送流水。 白云一片去悠悠，青枫浦上不胜愁。 谁家今夜扁舟子？何处相思明月楼？ 可怜楼上月徘...
前端必知必会-Bootstrap 5 文本/排版
最新发布
qq_24018193的博客
10-02 1054
本文介绍了Bootstrap 5 文本/排版的使用，如有问题欢迎私信和评论。
BootStrap笔记-文字排版
IT1995的博客
01-17 330
如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- bootstra
Bootstrap笔记(七) 排版 - 文字篇
XI_MILU的博客
08-19 426
排版 - 文字 文字对齐 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, init
一天学会Bootstrap，BootStrop常用样式--js--组件---（一）
San_Chi的博客
09-09 372
Bootstrap Bootstrap简介and概述 Bootstrap 是由 Twitter的 Mark Otto和 Jacob Thornton 开发的； Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品；【GitHub：托管代码的网站】 Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架（半成品）。其预定义一套CSS样式和与样式对应的j...
Bootstrap4 文字排版
01-19
Bootstrap4 文字排版 Bootstrap 4 默认设置 Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。 默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。 此外，所有的 元素 ...
全面解析Bootstrap排版使用方法（文字样式）
09-03
在Bootstrap中，排版是设计的基础，而文字样式则是排版中不可或缺的一部分。本文将详细介绍如何在Bootstrap中设置和使用文字样式。 首先，Bootstrap对全局的文本样式进行了统一设定。默认情况下，段落的字号设定为...
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
09-02
在Bootstrap3.0中，表单元素的排版是构建高效且美观的用户界面的关键部分。Bootstrap提供了强大的栅格系统和预定义的类，使得创建响应式和整齐的表单变得简单。本教程将深入探讨如何使用Bootstrap3.0来实现文字与...
Bootstrap页面文字搜索特效代码
03-20
Bootstrap提供了一个现成的`form-group`类和`input-group`类，可以方便地创建具有适当边距和排版的输入元素。对于搜索框，我们可以使用`form-control`类来定义输入框的样式，并添加`type="search"`属性，使其看起来...
bootstrap所有js.css
12-06
这个是我收集全的bootstrap的js,css比另一份更全,下载这个
BootStrap入门到实战：BootStrap全局CSS样式（二）- 文本排版和样式设置、 HTML5特殊文本标签的应用
林林一928的博客
05-17 1144
在使用Bootstrap框架时，可以通过结合使用这些HTML标签和Bootstrap的样式类，来增强页面的视觉效果和用户体验。例如，可以使用Bootstrap的排版和颜色类与这些标签结合，以创建更吸引人的代码示例、用户输入提示、代码块展示等。该内容并不直接属于Bootstrap框架的具体内容，而是HTML5中的一些标签元素，它们用于表示特定类型的文本内容，如代码、键盘输入、预格式化文本等。内容涵盖了标题、副标题、文本对齐、大小写转换、文本修饰以及缩略语等方面的样式设置。通过这几个类可以改变文本的大小写。
BootStrapCSS样式和JS插件
weixin_42867975的博客
07-22 329
BootStrapCSS样式和JS插件 文章目录 一、全局CSS样式： 1、按钮 2、图片： 3、表格 4、表单 二、组件和插件 ...
bootstrap5 text左对齐右对齐
苦苦思索的吃瓜群众博客
09-15 3480
bootstrap5 text左对齐右对齐 在bootstrap4中 text左/右对齐 <h1 class="text-right">右对齐</h1> <h1 class="text-left">左对齐</h1> <h1 class="text-center">居中</h1> 看了下官网在bootstrap5中就不起作用了 换成text-start和text-end了 <p class="text-start
Bootstrap 5：字体粗细及斜体
听海边涛声
08-28 284
Bootstrap 5：字体粗细及斜体
Bootstrap5 文字排版讲解
qq_65552364的博客
05-23 5469
一、文本对齐方式 使用文本对齐类能够轻松地将文本重新对齐到组件。对于左侧、居中和右侧对齐，同时也可以搭配断点实现响应式布局 左侧对齐 text-start 居中对齐 text-center 右侧对齐 text-end ...
学习 Bootstrap 5 之 Text
qq_37354060的博客
01-22 2238
学习 Bootstrap 5 之 文本文本 (Text) 文本 (Text) Bootstrap 5 官方文档
Bootstrap 4：精通文字排版与标题样式
以下是关于Bootstrap 4 文字排版的关键知识点： 1. **默认样式**： - **字体大小**：Bootstrap 4 的基础字体大小设为 16px，通过 `font-size: 1rem` 实现，其中 1rem 相当于浏览器视口宽度的 16像素。 - **行高**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏至xz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值