前端必知必会-Bootstrap 5 文本/排版

于 2024-10-02 09:00:00 发布
阅读量276 收藏 10
点赞数 6
文章标签： 前端 bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24018193/article/details/142614724
版权

文章目录

Bootstrap 5 文本/排版

Bootstrap 5 默认设置

Bootstrap 5 使用默认字体大小 1rem（默认为 16px），行高为 1.5。

此外，所有 <p> 元素的上边距为 0，下边距为 1rem（默认为 16px）。

<h1> - <h6>

Bootstrap 5 使用更粗的字体粗细和响应式字体大小来设置 HTML 标题（<h1> 至 <h6>）的样式。

示例
在这里插入图片描述

您还可以在其他元素上使用 .h1 到 .h6 类，让它们表现为标题：

示例

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

显示标题

显示标题用于比普通标题更突出（字体更大，字体更细），有六个类可供选择：.display-1 到 .display-6：

示例
显示 1 显示 2 显示 3 显示 4 显示 5 显示 6

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Display Headings</h1>
  <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</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>

</body>
</html>

<small>

在 Bootstrap 5 中，HTML <small> 元素（和 .small 类）用于在任何标题中创建较小的辅助文本：

示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Smaller, Secondary Text</h1>
  <p>The small element (and the .small class) is used to create a smaller, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>

</body>
</html>

<mark>

Bootstrap 5 将使用黄色背景颜色和一些填充来设置 <mark> 和 .mark 的样式：

示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Highlight Text</h1>    
  <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>
</div>

</body>
</html>

<abbr>

Bootstrap 5 将使用虚线边框底部和悬停时带有问号的光标来设置 HTML <abbr> 元素的样式：

示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

</body>
</html>

<blockquote>

在引用来自其他来源的内容块时，将 .blockquote 类添加到 <blockquote>。命名来源时，例如“来自 WWF 网站”，请使用 .blockquote-footer 类：

示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

</body>
</html>

<dl>

Bootstrap 5 将按以下方式设置 HTML <dl> 元素的样式：
在这里插入图片描述

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

</body>
</html>

<code>

Bootstrap 5 将按以下方式设置 HTML <code> 元素的样式：

示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

</body>
</html>

<kbd>

Bootstrap 5 将按以下方式设置 HTML <kbd> 元素的样式：

示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

</body>
</html>

<pre>

Bootstrap 5 将按以下方式设置 HTML <pre> 元素的样式：

示例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

更多排版类

可以添加以下 Bootstrap 5 类以进一步设置 HTML 元素的样式：

类描述
.lead使段落突出
.text-start表示左对齐文本
.text-break防止长文本破坏布局
.text-center表示居中对齐文本
.text-decoration-none删除链接的下划线
.text-end表示右对齐文本
.text-nowrap表示不换行文本
.text-lowercase表示小写文本
.text-uppercase表示大写文本
.text-capitalize表示大写文本
.initialism以略小的字体显示 <abbr> 元素内的文本
.list-unstyled删除列表项的默认列表样式和左边距（适用于 <ul> 和 <ol>）。此类仅适用于直接子列表项（要从任何嵌套列表中删除默认列表样式，请将此类也应用于任何嵌套列表）
.list-inline将所有列表项放在一行上（与每个 <li> 元素上的 .list-inline-item 一起使用）

总结

本文介绍了Bootstrap 5 文本/排版的使用，如有问题欢迎私信和评论

编程岁月
关注
Bootstrap4_tutorials_in_hindi_urdu:每个讲座的完整源代码下载并享受！-bootstrap source code
03-25
5. **CSS类**：Bootstrap 4使用了大量的预定义CSS类，使得添加样式变得简单，比如文本对齐、颜色、边距和填充等。 6. **JavaScript插件**：除了基本的HTML和CSS，Bootstrap还包含了一些基于jQuery的JavaScript插件...
基于bootstrap的Markdown网页文本编辑器插件
09-01
Bootstrap Markdown网页文本编辑器插件是一种用于Web应用的交互式编辑工具，它允许用户使用Markdown语法来编写文本，同时提供了一个美观、响应式的用户界面，该界面基于流行的前端框架Bootstrap。Bootstrap是一个...
Bootstrap学习笔记之排版-表单-网格系统
静坐听雨，无问西东
02-24 635
笔记为慕课网bootstrap基础编程学习笔记,课程链接参考:玩转Bootstrap基础1.常用模板:模板代码:&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;!--声明文档兼容模式，表示使用IE浏览
前端样式选择1-bootstrap学习笔记
格物致知
04-05 311
根据http://www.runoob.com/bootstrap/bootstrap-tutorial.html的教程，记录下学习的过程。 关键是熟悉或了解一些html标签的样式类，以便需要时，快速找到解决方案。 文中大部分图片来自于runoob网站,放在一起比较方便找到适合的样式 学习bootstrap的想法： [color=red]1.非前端程序员而言，比较常用有bootst...
Bootstrap
weixin_54327001的博客
07-06 257
Bootstrap 读音 / bu:tstræp/ˈ ，是一个非常受欢迎的前端框架 最流行的 HTML 、 CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先的项目。(v3.x) 响应式页面：页面布局会随着屏幕尺寸的变化而自动调整布局，作用是适配各个屏幕。 Bootstrap 是功能强大、可扩展，且功能丰富的前端工具包。（ v5.x ） Bootstrap 底层是使用 Sass 构建，支持定制（ Sass 、 Color 、 CSS variable .... ）。
前端基础必看面试题目
webicketang的博客
12-29 293
Doctype作用？标准模式与兼容模式各有什么区别? （1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点...
JQ-6 Bootstrap入门到实战；Bootstrap的（优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；项目实践
qq_54075517的博客
07-25 1270
Bootstrap入门到实战；Bootstrap的（优缺点、安装教程、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；小项目实践
Bootstrap全部知识点总结
weixin_60941411的博客
09-21 2199
bootstrap知识点总结（大全）
CSS前端经典面试题及解析——小白入门必备
2401_84092809的博客
04-19 728
前端校招精编面试解析大全点击这里免费获取完整版pdf查看自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
bootstrap是前端的一项非常好的技术，与Element有相同之处，可以加速前端项目的开发，后端也需要进行了解
hariya的博客
11-18 787
validate: jquery的一个插件;依赖jquery使用，Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点：导入jQuery文件 1.3 校验规则 默认校验规则核心代码： 二、Bootstrap 2.1 Bootstrap概述 Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Boot
Bootstrap文档
12-14
在文档中，首先会介绍Bootstrap的基础概念，包括其网格系统、排版样式、导航菜单、按钮、表单、图像和媒体对象等基本组件。这些组件都是构建现代网页的基石，理解它们的使用方法和属性设置对于高效开发至关重要。 ...
前端静态模板-手机摄影网站模板-学生作业毕设实训素材.zip
04-07
5. **图片优化**: 鉴于摄影网站通常包含大量图片，图片优化是必不可少的。这可能包括使用适当的图像格式（如WebP或JPEG）、压缩图片以减少文件大小、懒加载技术延迟非视口内的图片加载，以及使用CSS背景图片和data ...
TM-0343_企业网站网页源码欧美前端模板.zip
08-01
5. **框架和库**：前端模板可能使用了流行的技术框架如Bootstrap或Foundation，以及jQuery等JavaScript库，以提高开发效率和兼容性。 6. **SEO 优化**：对于企业网站，搜索引擎优化（SEO）是重要的考虑因素。模板...
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 193
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 454
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 2871
Webpack 打包后文件过大，如何优化？
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 738
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
06-12
这个命令的作用是在Keystone中创建初始用户、服务和端点，以及设置管理员和服务用户的凭据。在运行此命令之前，您需要确保已经安装了Keystone，并且具有管理员权限。 该命令需要指定以下参数： - `--bootstrap-password`：用于设置管理员用户的密码。 - `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于设置Keystone的区域ID。 下面是运行此命令的示例： ``` sudo keystone-manage bootstrap --bootstrap-password cqu2022 \ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne ``` 请注意，在运行此命令后，您将创建一个具有管理员角色的用户，并设置了管理员和服务用户的凭据。同时，您还将创建服务和端点以供其他OpenStack服务使用。如果您需要创建更多的用户、服务和端点，请参考Keystone的文档以获取更多信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

编程岁月

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

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

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

打赏作者

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

抵扣说明：

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

余额充值