目录
官方地址
https://getbootstrap.com/docs/4.4/content/typography/
其他文档地址
- 菜鸟教程
- bs4.vx.link
标题系列
标题HTML元素
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
<!-- 标题 -->
<div class="container">
<h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
<h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
<h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
<h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
<h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
<h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
</div>
标题类
.h1.h2.h3.h4.h5.h6
<div class="container">
<p class="h1">h1 Bootstrap 标题 (2.5rem = 40px)</p>
<p class="h2">h2 Bootstrap 标题 (2rem = 32px)</p>
<p class="h3">h3 Bootstrap 标题 (1.75rem = 28px)</p>
<p class="h4">h4 Bootstrap 标题 (1.5rem = 24px)</p>
<p class="h5">h5 Bootstrap 标题 (1.25rem = 20px)</p>
<p class="h6">h6 Bootstrap 标题 (1rem = 16px)</p>
</div>
display标题类
传统的标题元素旨在最好地处理页面内容。 当你需要更突出标题时，请考虑使用超大标题 - 更大，更醒目。
.display-1.display-2.display-3.display-4
<div class="container">
<h1>Display 标题</h1>
<p>传统的标题元素旨在最好地处理页面内容。 当你需要更突出标题时，请考虑使用超大标题 - 更大，更醒目。</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>
</div>
小号字体
<small></small>.small
<div class="container">
<h1>更小文本标题</h1>
<p>small 元素用于字号更小的颜色更浅的文本，以及对应的.small类</p>
<h1>h1 标题
<small>副标题</small>
</h1>
<h2>h2 标题
<span class="small">副标题</span>
</h2>
<h3>h3 标题
<small>副标题</small>
</h3>
<h4>h4 标题
<small>副标题</small>
</h4>
<h5>h5 标题
<small>副标题</small>
</h5>
<h6>h6 标题
<small>副标题</small>
</h6>
</div>
段落突出
.lead
<div class="container">
<p class="lead">让段落更突出</p>
</div>
内联元素
<b></b><i></i><u></u><s></s><del></del><ins></ins><strong></strong><mark></mark><small></small>
<div class="container">
<h1>内联元素</h1>
<p>You can use the mark tag to
<mark>highlight</mark>
text.
</p>
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p><strong>This line rendered as bold text.</strong></p>
<p><b>This line rendered as italicized text.</b></p>
<p><i>This line rendered as italicized text.</i></p>
</div>
缩略语
<abbr title=></abbr>.initialism
<div class="container">
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</div>
大小写转换
.text-lowercase.text-uppercase.text-capitalize
<div class="container">
<h1>大小写转换</h1>
<p class="text-lowercase">TEXT-LOWERCASE</p>
<p class="text-uppercase">text-uppercase</p>
<p class="text-capitalize">text-capitalize</p>
</div>
字体系列
- 斜体
.font-italic
- 加粗
.font-weight-bold.font-weight-normal.font-weight-light
- 等宽
.text-monospace
斜体
.font-italic
<div class="container">
<h1>斜体文本</h1>
<p class="font-italic">斜体文本
</p>
</div>
加粗系列
.font-weight-bold.font-weight-bolder.font-weight-normal.font-weight-light.font-weight-lighter
<div class="container">
<h1>加粗系列</h1>
<p class="font-weight-bold">加粗文本</p>
<p class="font-weight-bolder">更粗文本</p>
<p class="font-weight-normal">正常文本</p>
<p class="font-weight-light">细文本</p>
<p class="font-weight-lighter">更细文本</p>
</div>
等宽
.text-monospace
<div class="container">
<h1>等宽字体</h1>
<p class="text-monospace">This is in monospace</p>
</div>
不换行和内容溢出处理
不换行
.text-nowrap
<div class="container">
<h1>换行和内容溢出处理</h1>
<p class="bg-primary text-white" style="width: 3em;">段落中超出屏幕部分换行</p>
<p class="text-nowrap bd-highlight" style="width: 3rem;">段落中超出屏幕部分不换行</p>
</div>
换行
.text-wrap
<p class="text-wrap bd-highlight" style="width: 3rem;">段落中超出屏幕部分换行</p>
内容裁剪
.text-truncate
对于更长的内容，你可以增加一个.text-truncate ，可以截掉多余内容 。
行内元素需要额外使用display: inline-block or display: block 来确保正常的显示效果
<div class="container">
<h1>
对于更长的内容，你可以增加一个 .text-truncate ，可以截掉多余内容 。
行内元素需要额外使用 display: inline-block or display: block 来确保正常的显示效果。
</h1>
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
</div>
单词换行
.text-break
<div class="container">
<h1>word break</h1>
<p class="text-break">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div>
无下划线
.text-decoration-none
<div class="container">
<h1>无下划线</h1>
<a href="#" class="text-decoration-none">Non-underlined link</a>
</div>
文本对齐系列
.text-left.text-right.text-center.text-justify
<div class="container">
<h1>文本对齐</h1>
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
</div>
响应式对齐
.text-[breakpoint]-[left | center | right | justify]
<div class="container">
<h1>响应式文本对齐</h1>
<p class="text-sm-left">左对齐</p>
<p class="text-md-center">居中对齐</p>
<p class="text-lg-right">右对齐</p>
<p class="text-xl-justify">两端对齐</p>
</div>
块引用
<blockquote></blockquote>.blockquote.blockquote-footer
<div class="container">
<blockquote class="blockquote">
<p class="mb-0">我们中国的最伟大最永久，而且最普遍的“艺术”是男人扮女人。</p>
<footer class="blockquote-footer">来自 <cite title="Source Title">鲁迅</cite></footer>
</blockquote>
</div>
块引用对齐
通过对齐工具类实现
<div class="container">
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<div class="container">
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
列表
无序和无序列表
无序
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
有序
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
list-unstyled
.list-unstyled
适用于ul or ol
<div class="container">
<h1>list-unstyled</h1>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
list-inline
.list-inline
.list-inline-item
<div class="container">
<h1>list-inline</h1>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
</div>
描述列表
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Truncated term is truncated</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
水平的描述列表
<div class="container">
<h1>水平对齐的描述列表dl</h1>
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
justo sit amet risus.
</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</div>
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
<title>04文字排版</title>
<style type="text/css">
.bd-highlight {
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .15);
}
</style>
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="">
标题
HTML元素
标题类
display标题类
小号字体
段落突出
内联元素
缩略语和首字母缩略语
大小写转换
字体系列
斜体系列
加粗系列
等宽字体
文本对齐
响应式对齐
换行和内容溢出处理
单词换行
无下划线
块引用
列表
有序和无序：无样式
有序和无序：内联
描述列表
水平描述列表
</pre>
<!-- 标题 -->
<div class="container">
<h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
<h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
<h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
<h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
<h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
<h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
</div>
<div class="container">
<p class="h1">h1 Bootstrap 标题 (2.5rem = 40px)</p>
<p class="h2">h2 Bootstrap 标题 (2rem = 32px)</p>
<p class="h3">h3 Bootstrap 标题 (1.75rem = 28px)</p>
<p class="h4">h4 Bootstrap 标题 (1.5rem = 24px)</p>
<p class="h5">h5 Bootstrap 标题 (1.25rem = 20px)</p>
<p class="h6">h6 Bootstrap 标题 (1rem = 16px)</p>
</div>
<div class="container">
<h1>Display 标题</h1>
<p>传统的标题元素旨在最好地处理页面内容。 当你需要更突出标题时，请考虑使用超大标题 - 更大，更醒目。</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>
</div>
<div class="container">
<h1>更小文本标题</h1>
<p>small 元素用于字号更小的颜色更浅的文本，以及对应的.small类</p>
<h1>h1 标题
<small>副标题</small>
</h1>
<h2>h2 标题
<span class="small">副标题</span>
</h2>
<h3>h3 标题
<small>副标题</small>
</h3>
<h4>h4 标题
<small>副标题</small>
</h4>
<h5>h5 标题
<small>副标题</small>
</h5>
<h6>h6 标题
<small>副标题</small>
</h6>
</div>
<div class="container">
<p class="lead">让段落更突出</p>
</div>
<div class="container">
<h1>内联元素</h1>
<p>You can use the mark tag to
<mark>highlight</mark>
text.
</p>
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p><strong>This line rendered as bold text.</strong></p>
<p><b>This line rendered as italicized text.</b></p>
<p><i>This line rendered as italicized text.</i></p>
</div>
<div class="container">
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</div>
<div class="container">
<h1>斜体文本</h1>
<p class="font-italic">斜体文本
</p>
</div>
<div class="container">
<h1>加粗系列</h1>
<p class="font-weight-bold">加粗文本</p>
<p class="font-weight-bolder">更粗文本</p>
<p class="font-weight-normal">正常文本</p>
<p class="font-weight-light">细文本</p>
<p class="font-weight-lighter">更细文本</p>
</div>
<div class="container">
<h1>等宽字体</h1>
<p class="text-monospace">This is in monospace</p>
</div>
<div class="container">
<h1>无下划线</h1>
<a href="#" class="text-decoration-none">Non-underlined link</a>
</div>
<div class="container">
<h1>大小写转换</h1>
<p class="text-lowercase">TEXT-LOWERCASE</p>
<p class="text-uppercase">text-uppercase</p>
<p class="text-capitalize">text-capitalize</p>
</div>
<div class="container">
<h1>文本对齐</h1>
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
</div>
<div class="container">
<h1>响应式文本对齐</h1>
<p class="text-sm-left">左对齐</p>
<p class="text-md-center">居中对齐</p>
<p class="text-lg-right">右对齐</p>
<p class="text-xl-justify">两端对齐</p>
</div>
<div class="container">
<h1>换行和内容溢出处理</h1>
<p class="bg-primary text-white" style="width: 3em;">段落中超出屏幕部分换行</p>
<p class="text-nowrap bd-highlight" style="width: 3rem;">段落中超出屏幕部分不换行</p>
<p class="text-wrap bd-highlight" style="width: 3rem;">段落中超出屏幕部分换行</p>
<h1>
对于更长的内容，你可以增加一个 .text-truncate ，可以截掉多余内容 。
行内元素需要额外使用 display: inline-block or display: block 来确保正常的显示效果。
</h1>
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
</div>
<div class="container">
<h1>word break</h1>
<p class="text-break">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
</div>
<div class="container">
<blockquote class="blockquote">
<p class="mb-0">我们中国的最伟大最永久，而且最普遍的“艺术”是男人扮女人。</p>
<footer class="blockquote-footer">来自 <cite title="Source Title">鲁迅</cite></footer>
</blockquote>
</div>
<div class="container">
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<div class="container">
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
<div class="container">
<h1>list-unstyled</h1>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="container">
<h1>list-inline</h1>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
</div>
<div class="container">
<h1>水平对齐的描述列表dl</h1>
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
justo sit amet risus.
</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
