Bootstrap对段落和文本的设置(与段落-和文本相关的类)

news2024/10/6 4:03:42

目录

  • 01-利用lead类突出显示段落文本
  • 02-为段落添加强调样式
  • 03-给段落文字添加鼠标停留时的说明语
  • 04-添加引用信息
  • 05-文本对齐(左对齐、居中对齐、右对齐、两端对齐)
  • 06-阻止文本换行
  • 07-以省略号显示溢出的文本内容
  • 08-转换文本内容中字母的大小写
  • 09-设置文本字体的粗细和斜体
  • 10-取消超链接的下划修饰线
  • 11-颜色相关样式
    • 11-1-文本颜色
    • 11-2-设置背景颜色

01-利用lead类突出显示段落文本

Bootstrap 中的 .lead 类专门用于突出显示段落文本。这个类会增加段落文本的字体大小和行高,使其更加突出和易于阅读。

使用 .lead 类是一个很方便的方式来使文本在页面中更加引人注目。它会自动应用适当的字体大小和行高,以提高可读性。

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>lead类样式</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
    <h1>《山中问答》</h1>
    <h3><small>李白〔唐〕</small></h3>
    <p>问余何意栖碧山,</p>
    <p>笑而不答心自闲。</p>
    <p class="lead">桃花流水窅然去,</p>
    <p>别有天地非人间。</p>
</body> 
</html>

运行效果如下:
在这里插入图片描述

02-为段落添加强调样式

式例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加强调样式</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
    <h2>强调文本</h2>
    <p><&nbsp;mark&nbsp;>标签:<mark>标记的重点内容</mark></p>
    <p><&nbsp;del&nbsp;>标签:<del>删除的文本</del></p>
    <p><&nbsp;s&nbsp;>标签:<s>不再准确的文本</s></p>
    <p><&nbsp;ins&nbsp;>标签:<ins>对文档的补充文本</ins></p>
    <p><&nbsp;u&nbsp;>标签:<u>添加下划线的文本</u></p>
    <p><&nbsp;strong&nbsp;>标签:<strong>粗体文本</strong></p>
    <p><&nbsp;em&nbsp;>标签:<em>斜体文本</em></p>
</body>
</html>

运行结果如下:
在这里插入图片描述
问:HTML的ins标签和u标签有什么区别,感觉都是下划线呀。
答:HTML中的 <ins><u> 标签都可以用于在文本中添加下划线,但它们有不同的语义和用途。

  1. <ins> 标签(Inserted Text):

    • <ins> 标签通常用于表示文档中插入的新文本或内容。它的主要作用是强调文本的添加或变化,通常与文档版本控制或协同编辑相关。
    • <ins> 标签的默认样式通常是带有下划线的文本,但浏览器可以根据CSS进行自定义样式。

    示例:

    <p>这是一些<ins>新添加的文本</ins></p>
    
  2. <u> 标签(Underline Text):

    • <u> 标签用于在文本中添加下划线,但它的语义并不强调文本的插入或变化。它通常用于强调文本内容,而不涉及文本的历史或变更情况。
    • <u> 标签的使用在HTML5中被废弃,不再建议使用,因为下划线的样式应该通过CSS来控制,而不是通过HTML标签。

    示例:

    <p>这个文本中的一部分<u>被强调了</u></p>
    

总的来说,如果你想要强调文本的添加或变化,并且希望与文档版本控制相关,可以使用 <ins> 标签。如果只是想在文本中添加下划线以强调某些内容,最好不要使用 <u> 标签,而是使用CSS来控制下划线的样式。这有助于分离内容(HTML)和样式(CSS),使你的文档更具可维护性。

03-给段落文字添加鼠标停留时的说明语

利用标签<abbr>可以实现当鼠标停留在文字上时显示说明语的效果。
示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>缩略语效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2>乌衣巷</h2>
<p>朱雀桥边野草花,<abbr title="乌衣巷位于南京市秦淮区秦淮河上文德桥旁的南岸。">乌衣巷</abbr>口夕阳斜。</p>
<p> 旧时王谢堂前燕,飞入寻常百姓家。</p>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述
在这里插入图片描述

04-添加引用信息

通常在<footer>标签中使用类blockquote和标签<cite>,实现添加引用信息。
HTML示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加引用</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<blockquote>
    <p>公子王孙逐后尘,绿珠垂泪滴罗巾。</p>
    <p>侯门一入深如海,从此萧郎是路人。</p>
    <footer class="blockquote-footer">—选自崔郊 的<cite>《赠去婢》</cite></footer>
</blockquote>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述
从上面的运行效果可以看出:
<cite>标签有使文本倾斜的效果。

05-文本对齐(左对齐、居中对齐、右对齐、两端对齐)

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本对齐方式</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">文本对齐方式</h3>
<div class="text-left border">每一寸土都有人奔赴</div>
<div class="text-center border">每一寸天都以生死来守护</div>
<div class="text-right border">每一寸心 都将人间正道浇铸</div>
</body>
</html>

运行效果如下:
在这里插入图片描述
注意:以上对齐方式还可以结合网格系统的断点来设置不同大小设备上的对齐方式。

06-阻止文本换行

如果元素中的文本超出了元素本身的宽度,默认情况下会自行换行。有时候我们不想让它自行换行,那么可以使用类text-nowrap来阻止换行。
示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本换行</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>文本换行效果</h3>
<div class="border border-primary mb-5" style="width: 15rem;">
    宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。
</div>
<h4>阻止文本换行</h4>
<div class="text-nowrap border border-primary" style="width: 15rem;">
   雨打梨花深闭门。忘了青春,误了青春。赏心乐事共谁论。
</div>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述

07-以省略号显示溢出的文本内容

限定div的宽度,然后使用类text-truncate,当文本内容溢出时,将以省略号显示。
示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省略溢出的文本内容</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>省略溢出的文本内容</h3>
<div class="border border-primary mb-5 text-truncate" style="width: 15rem;">
    少年听雨歌楼上,红烛昏罗帐。壮年听雨客舟中,江阔云低断雁叫西风。
</div>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述

08-转换文本内容中字母的大小写

如果在文本中包括字母,那么可以通过下面的三个类来进行大小写的转换。
text-uppercase—将字母转换为大写。
text-lowercase–将字母转换为小写。
text-capitalize—将每一个单词的第一个字母转换为大写,其它字母转换为小写。
示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字母转换大小写</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<h3>字母转换大小写</h3>
<p>原文:in a CALM SEA every man is A PILOT </p>
<p class="text-uppercase">转换成大写:in a calm sea every man is a pilot </p>
<p class="text-lowercase">转换成小写:IN A CALM SEA EVERY MAN IS A PILOT </p>
<p class="text-capitalize">转换每个单词的首字母为大写:in a calm sea every man is a pilot </p>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述

09-设置文本字体的粗细和斜体

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体的粗细和斜体效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<h3>字体的粗细和斜体效果</h3>
<p class="font-weight-light">惜霜蟾照夜云天,朦胧影画勾阑(font-weight-light)</p>
<p class="font-weight-lighter">惜霜蟾照夜云天,朦胧影画勾阑(font-weight-lighter)</p>
<p class="font-weight-normal">惜霜蟾照夜云天,朦胧影画勾阑(font-weight-normal)</p>
<p class="font-weight-bold">独惜霜蟾照夜云天,朦胧影画勾阑(font-weight-bold)</p>
<p class="font-weight-bolder">惜霜蟾照夜云天,朦胧影画勾阑(font-weight-bolder)</p>
<p class="font-italic">惜霜蟾照夜云天,朦胧影画勾阑(font-italic)</p>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述

10-取消超链接的下划修饰线

我们如果一个文本如果有超链接,那么通常在鼠标放上去的时候,会有下划线的效果。但是我们可以用类text-decoration-none取消这个下划修饰线的效果。
示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>删除链接下划修饰线</h4>
<div class="text-muted">
    <p><a href="#">独出前门望野田,月明荞麦花如雪。——白居易《村夜》</a></p>
    <p><a href="#" class="text-decoration-none">独出前门望野田,月明荞麦花如雪。——白居易《村夜》</a></p>
</div>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述
在这里插入图片描述

11-颜色相关样式

11-1-文本颜色

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置文本颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置文本颜色</h3>
<p class="text-primary">.text-primary——蓝色</p>
<p class="text-secondary">.text-secondary——灰色</p>
<p class="text-success">.text-success——浅绿色</p>
<p class="text-danger">.text-danger——浅红色</p>
<p class="text-warning">.text-warning——浅黄色</p>
<p class="text-info">.text-info——浅蓝色</p>
<p class="text-light bg-dark">.text-light——浅灰色(白色背景上看不清楚)</p>
<p class="text-dark">.text-dark——深灰色</p>
<p class="text-muted">.text-muted——灰色</p>
<p class="text-white bg-dark">.text-white——白色(白色背景上看不清楚)</p>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述

11-2-设置背景颜色

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置背景颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>设置背景颜色</h3>
<p class="bg-primary text-white">.bg-primary——蓝色背景</p>
<p class="bg-secondary text-white">.bg-secondary——灰色背景</p>
<p class="bg-success text-white">.bg-success——浅绿色背景</p>
<p class="bg-danger text-white">.bg-danger——浅红色背景</p>
<p class="bg-warning text-white">.bg-warning——浅黄色背景</p>
<p class="bg-info text-white">.bg-info——浅蓝色背景</p>
<p class="bg-light">.bg-light——浅灰色背景</p>
<p class="bg-dark text-white">.bg-dark——深灰色背景</p>
<p class="bg-white">.bg-white——白色背景</p>
</body>
</html>

运行效果如下图所示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1066403.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

The Sandbox 与 TB Media Global 达成合作

这家总部位于泰国的公司以开发原创、适合家庭观看的内容而闻名&#xff0c;将在 The Sandbox 中推出新的虚拟体验。 备受赞誉的 IP 开发公司 T&B Media Global 正式加入 The Sandbox 元宇宙。该公司以专注于故事讲述艺术而闻名。这次合作不仅为虚拟世界带来了新的维度&…

java常见API----indexof

API indexof API toUpperCase()用法及实例&#xff1a; package daysreplace;import java.util.Locale;public class IndexofApiTest {public static void main(String[] args) {String str "nanyanghhhhh";String bigStr "KKKKAAAAHHHH";System.…

4.物联网射频识别,RFID开发【智能门禁项目】

补充&#xff1a;学习路径 一。项目介绍及需求分析 1.酒店智能门禁使用场景介绍 1.客人入住 客人在前台办理入住手续&#xff0c;前台管理员通过门禁管理系统为客户开一张门禁卡 客户持卡到相应客房&#xff0c;用IC 卡刷卡开门 客人过了入住时间后&#xff0c;卡自动失效&a…

第十课 贪心

文章目录 第十课 贪心lc 322.零钱兑换--中等题目描述代码展示 lc860.柠檬水找零--简单题目描述代码展示 lc455.分发饼干--简单题目描述代码展示 lc122.买卖股票的最佳时机II--中等题目描述代码展示 lc45.跳跃游戏II--中等题目描述代码展示 lc1665.完成所有任务的最少初始能量--…

WPF中样式静态、动态资源、资源字典

1、绑定静态资源后&#xff0c;样式不会发生改变 绑定动态资源后&#xff0c;资源样式发生改变&#xff0c;控件也会改变 2、资源字典

为什么越来越多的人转行网络安全?

为什么越来越多的人转行网络安全&#xff1f; 目前&#xff0c;我国互联网已经从前期的爆发增长进入稳定发展阶段&#xff0c;同时每年大量计算机相关专业的毕业生进入就业赛道&#xff0c;导致IT行业逐渐趋于饱和状态&#xff0c;甚至出现裁员现象&#xff0c;去年很多大厂都…

《DevOps 精要:业务视角》- 读书笔记(二)

DevOps 精要:业务视角&#xff08;二&#xff09; 第2章 基础2.1 精益生产2.1.1 关键事实2.1.2 挑战 2.2 敏捷2.2.1 关键事实2.2.2 挑战 第2章 基础 2.1 精益生产 2.1.1 关键事实 正如1.2节提到的&#xff0c;DevOps非常依赖于精益生产的原则与实践。有些人甚至相信&#xf…

软件测试(功能、工具、接口、性能、自动化、测开)详解

一、软件测试功能测试 测试用例编写是软件测试的基本技能&#xff1b;也有很多人认为测试用例是软件测试的核心&#xff1b;软件测试中最重要的是设计和生成有效的测试用例&#xff1b;测试用例是测试工作的指导&#xff0c;是软件测试的必须遵守的准则。 黑盒测试常见测试用例…

【1++的Linux】之文件(一)

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的Linux】 文章目录 一&#xff0c;初识文件二&#xff0c;文件接口 一&#xff0c;初识文件 文件就是文件内容属性。因此对文件的操作无非就是对文件内容的操作和对文件属性的操作。 我们访问…

张量-矩阵操作函数

tf.diag(diagonal,name None),该函数返回一个给定对角值得对角tensor。 示例代码如下: import tensorflow.compat.v1 as tf tf.disable_v2_behavior()diagonal tf.constant([2,3,4,5])with tf.Session() as sess:print(sess.run(tf.diag(diagonal))) tf.diag_part(input,na…

maven的pom.xml文件显示被删除

文章目录 1.问题情况2.问题分析3.问题解决 1.问题情况 2.问题分析 这些 pom.xml 文件被 maven 视为了忽略文件。 3.问题解决 路径&#xff1a;File --> Settings --> Build&#xff0c;Execution&#xff0c;Deployment --> Build Tools --> Maven --> Ignor…

Vs - Qt - 下拉窗口示例

下列代码定义了一个窗口&#xff0c;窗口采用竖直布局&#xff1a;一个按钮及一个label。按下按钮时候&#xff0c;窗口扩张&#xff0c;显示label控件。再次按下按钮时&#xff0c;窗口收缩&#xff0c;隐藏label控件。 详细代码如下&#xff1a; #include <QApplication&g…

SAP从入门到放弃系列之QM样本确定

目录 一、样本确定概述-Sample Determination1.1、样本确定的规则1.2、规则维护方式1.2.1、物料主数据的维度1.2.2、任务清单的维度1.2.2.1、采样过程-Sampling Procedure 二、采样过程维护2.1 采样过程-Sampling Procedures概述样本类型评估模式检验点 一、样本确定概述-Sampl…

开源考试系统的安全性及防护措施分析

开源考试系统是一种基于开放源代码的在线考试及评估平台&#xff0c;它提供了灵活、可定制和易于部署的解决方案来满足不同用户的需求。然而&#xff0c;开源考试系统的安全性问题一直备受关注。因为在线考试平台涉及到大量敏感数据和用户隐私&#xff0c;所以必须采取一系列的…

chrome窗口

chrome 窗口的层次&#xff1a; 父窗口类名&#xff1a;Chrome_WidgetWin_1 有两个子窗口&#xff1a; Chrome_RenderWidgetHostHWNDIntermediate D3D Window // 用于匹配 Chrome 窗口的窗口类的前缀。 onst wchar_t kChromeWindowClassPrefix[] L"Chrome_WidgetWin_…

Node-RED系列教程-26node-red操作mqtt代理节点

安装节点&#xff1a;node-red-contrib-aedes 节点图标如下&#xff1a; 流程节点如下&#xff1a; 节点配置&#xff1a;

测试工程师思维学习

一、测试工程师应具备什么思维&#xff1f; 透过现象看本质&#xff0c;拒绝“一叶障目” 01、质疑和系统思维 02、创新思维 03、全局思维 04、风险驱动和组合思维 05、用户为中心和比较思维 06、BT思维和架构扩展性思维 二、测试工程师应避免的思维 01、同化现象 02、定位效…

零基础转行网络工程师,过来人给的一些建议

最近收到好多同学的一些提问&#xff0c;零基础没经验&#xff0c;能不能转行到网络工程师&#xff1f;薪资能有多少&#xff1f;发展前景怎么样&#xff1f; 应该有不少朋友都有这个疑问&#xff0c;那么&#xff0c;今天我尽量给大家做出一个详细的解答&#xff0c;希望能有…

怎么把图片压缩小一点?4个简单的压缩办法

怎么把图片压缩小一点&#xff1f;因为图片太大而带来的不良影响可说是非常的多&#xff0c;例如因为图片体积太大导致电脑中的存储空间越来越小&#xff0c;使得电脑使用起来越来越慢&#xff1b;当我们打开一张体积非常大的图片时无法开&#xff0c;甚至一度让电脑卡死&#…

[SWPUCTF 2021 新生赛]easy_sql - 联合注入||报错注入||sqlmap

这题可以直接参考&#xff1a;[NISACTF 2022]join-us - 报错注入&无列名注入 网站标题提示&#xff0c;参数是wllm ?wllm1   得到&#xff1a;Your Login name:xxx Your Password:yyy 解法一&#xff1a;手注 1、先尝试普通注入?wllm-1union select 1,2,3--   得…