Bootstrap——排版（标题、段落、强调、缩略语、引用）

标题

1、在Bootstrap4中，主要对标题样式做了如下规定：

（1）重设上下外边距，margin-top值为0，margin-bottom:0.5rem。

（2）固定所有标题行高为line-height:1.2，font-weight:500。

（3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem，三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。

2、rem：

（1）em是相对长度单位。相对于当前对象内文本的字体尺寸。

（2）rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

（3）Bootstrap 4 默认的HTML font-size 为 16px

3、<h1>~<h6>标题描述具体如下表所示：

例1：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><h1>一级标题</h1><h2>一级标题</h2><h3>一级标题</h3><h4>一级标题</h4><h5>一级标题</h5><h6>一级标题</h6></body>
</html>

结果图：

使用类名来实现标题效果：

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="h1">一级标题</div><div class="h2">二级标题</div><div class="h3">三级标题</div><div class="h4">四级标题</div><div class="h5">五级标题</div><div class="h6">六级标题</div></body>
</html>

结果图：

4、设置副标题

在Bootstrap中使用<small>标签来实现副标题效果。font-size是父元素的80%。

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><h1>一级标题<small>副标题</small></h1><h2>二级标题<small>副标题</small></h2><h3>三级标题<small>副标题</small></h3><h4>四级标题<small>副标题</small></h4><h5>五级标题<small>副标题</small></h5><h6>六级标题<small>副标题</small></h6></body>
</html>

结果图：

如果想要将传统的标题元素设计得更加美观、醒目，来迎合网页内容。这时可以使用Bootstrap中提供的一系列display类来设置标题样式。

例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body><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>
</body></html>

结果图：

段落

在Bootstrap 4中，段落标签<p>的样式如下：

p {

margin-top: 0;

margin-bottom: 1rem;

}

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><h2>《江汉临眺》</h2><h3>王维</h3><p>楚塞三湘接，荆门九派通。</p><p>江流天地外，山色有无中。</p><p>郡邑浮前浦，波澜动远空。</p><p>襄阳好风日，留醉与山翁。</p></body>
</html>

结果图：

可以在段落元素上应用.lead类样式，主要作用是可以将段落突出显示，被突出的段落文本字体被放大。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body><h2>《江汉临眺》</h2><h3>王维</h3><p>楚塞三湘接，荆门九派通。</p><p>江流天地外，山色有无中。</p><p class="lead">郡邑浮前浦，波澜动远空。</p><p>襄阳好风日，留醉与山翁。</p>
</body></html>

结果图：

强调：

HTML5定义了若干个标签强调的标签，有<mark>、<del>、<s>、<ins>、<u>、<strong>、<em>等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式

<b>和<strong>默认情况下是加粗字体。前者是给其包裹的文本设置为bold粗体效果。而后者表示加强字符的语气，使用bold粗体来起到强调的作用。

<del>和<s>都可以实现删除效果，但是<del>更具有语义化，能更形象的描述删除意思。

<strong>和<em>具有强调作用，有利于SEO。

<ins>和<u>都可以实现下画线效果，但是前者通常与<del>一起使用。用来定义已经被插入文档中的文本，而后者表示为文本添加下划线。

<footer>和<cite>通常表示所包含的文本对某个参考文献的引用，区别在于后者引用的文本将以斜体显示。

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body><p>使用mark标记<mark>高亮</mark>的文本</p><p><del>使用del标记,此行文本应视为已删除的文本</del></p><p><s>使用s标记,此行文本已被视为不在准确</s></p><p><ins>使用ins标记,此行文本应被视为文档的补充。</ins></p><p><u>使用u标记,此行文本应带有下划线</u></p><p><strong>使用strong标记,此行以粗体显示。</strong></p><p><em>使用em标记,此行以斜体显示。</em></p>
</body></html>

结果图：

缩略语：

缩略语是指在页面中使用缩写的形式表示，当鼠标指针悬停在缩写词上时会显示全部的内容，HTML5提供的<abbr>标签用来实现缩略语。为了突出显示缩略语，可以为<abbr>标签添加.initialism类，.initialism类使字体大小缩小10%，并设置字母全部大写。

例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr>称为超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的资源连接为一个逻辑整体。</p></body>
</html>

结果图：

引用

如果需要在文档中引用其他来源的内容块时，可以引用块标签<blockqupte>。在引用块中，还可以嵌入<cite>、<footer>标签。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><blockquote class="blockquote"><p>天空没有翅膀的痕迹,而我已经飞过,思念是翅膀飞过的痕迹。人生的意义不在于留下什么,只要你经历过,就是最大的美好,这不是无能,而是一种超然。</p><footer class="blockquote-footer text-right">泰戈尔<cite>《流萤集》</cite></footer></blockquote></div></body>
</html>

结果图：

Bootstrap——排版（标题、段落、强调、缩略语、引用）相关推荐

Bootstrap排版之标题
Bootstrap排版之标题 1.定义标题样式 2.运行效果 3.定义 4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bott ...
Bootstrap笔记(五) 排版 - 标题
排版 - 标题主标题副标题加强标题主标题 Bootstrap支援 <h1> ~ <h6>等HTML标题元素,也提供 .h1 ~ .h6 类别用来设定标题1 ~ 标题6 ...
Bootstrap 排版
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默 ...
latex如何更改某一段落的字体_latex 段落编号 latex 引用段落
latex 段落编号 latex 引用段落以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! latex (Ctex)中想让 ...
Markdown语法(一)标题段落分割线
前言:由于笔者刚刚开始接触博客,所以每次写博客时候对于markdown的编辑语法并不熟悉.虽然CSDN在线编辑右边栏会出现帮助文档,但是很多时候也比较有限.所以笔者在这里特地开个系列专栏记录下,以备以 ...
Bootstrap ——排版、表格、表单、图片、button 学习博客（二）
Bootstrap中的排版 1. 排版标题部分文本部分对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
bootstrap表格标题Caption位于表格下方的原因
Env bootstrap.min 5.0.0 jquery.min 3.5.1 flask 1.1.2 chrome 87.0.4280.141(正式版本) (64 位) 问题描述表格标题烂位于表 ...
html标题副标题,HTML基础标签:标题段落空格链接图像强调
HTML基础标签:标题段落空格链接图像强调 HTML 标题 HTML标题(Heading)是通过 - 标签来定义的. h是英文header标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构.写作 ...
批量修改word文档标题段落的样式
我经常从猪队友那里或者互联网上拿到这样的word文档:文档的内容有很多明显的标题段落,但是文档的编辑者并没有将这些标题段落应用样式,使文档有很好的大纲结构,以便于快速跳转到所需的文档内容,也给文档标题 ...

Bootstrap——排版（标题、段落、强调、缩略语、引用）

Bootstrap——排版（标题、段落、强调、缩略语、引用）相关推荐

最新文章

热门文章