BootStrap4内容系列之文字排版
目录
- 官方地址
- 其他文档地址
- 标题系列
- 标题HTML元素
- 标题类
- display标题类
- 小号字体
- 段落突出
- 内联元素
- 缩略语
- 大小写转换
- 字体系列
- 斜体
- 加粗系列
- 等宽
- 不换行和内容溢出处理
- 不换行
- 换行
- 内容裁剪
- 单词换行
- 无下划线
- 文本对齐系列
- 响应式对齐
- 块引用
- 块引用对齐
- 列表
- 无序和无序列表
- list-unstyled
- list-inline
- 描述列表
- 水平的描述列表
- 整体代码
官方地址
https://getbootstrap.com/docs/4.4/content/typography/
其他文档地址
- 菜鸟教程
- https://www.runoob.com/bootstrap4/bootstrap4-typography.html
- bs4.vx.link
- http://bs4.vx.link/pages/content.html
标题系列
标题HTML元素
<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 1h1>
<h1 class="display-2">Display 2h1>
<h1 class="display-3">Display 3h1>
<h1 class="display-4">Display 4h1>
div>
小号字体
.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>
内联元素
<div class="container">
<h1>内联元素h1>
<p>You can use the mark tag to
<mark>highlightmark>
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 underlinedu>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>
缩略语
.initialism
<div class="container">
<p><abbr title="attribute">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>
div>
大小写转换
.text-lowercase.text-uppercase.text-capitalize
<div class="container">
<h1>大小写转换h1>
<p class="text-lowercase">TEXT-LOWERCASEp>
<p class="text-uppercase">text-uppercasep>
<p class="text-capitalize">text-capitalizep>
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 monospacep>
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>
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
div>
div>
<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 breakh1>
<p class="text-break">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>
div>
无下划线
.text-decoration-none
<div class="container">
<h1>无下划线h1>
<a href="#" class="text-decoration-none">Non-underlined linka>
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-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 Titlecite>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 Titlecite>footer>
blockquote>
div>
列表
无序和无序列表
无序
<ul>
<li>Lorem ipsum dolor sit ametli>
<li>Consectetur adipiscing elitli>
<li>Integer molestie lorem at massali>
<li>Facilisis in pretium nisl aliquetli>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis nequeli>
<li>Purus sodales ultriciesli>
<li>Vestibulum laoreet porttitor semli>
<li>Ac tristique libero volutpat atli>
ul>
li>
<li>Faucibus porta lacus fringilla velli>
<li>Aenean sit amet erat nuncli>
<li>Eget porttitor loremli>
ul>
有序
<ol>
<li>Lorem ipsum dolor sit ametli>
<li>Consectetur adipiscing elitli>
<li>Integer molestie lorem at massali>
<li>Facilisis in pretium nisl aliquetli>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis nequeli>
<li>Purus sodales ultriciesli>
<li>Vestibulum laoreet porttitor semli>
<li>Ac tristique libero volutpat atli>
ul>
li>
<li>Faucibus porta lacus fringilla velli>
<li>Aenean sit amet erat nuncli>
<li>Eget porttitor loremli>
ol>
list-unstyled
.list-unstyled
适用于ul or ol
<div class="container">
<h1>list-unstyledh1>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit ametli>
<li>Consectetur adipiscing elitli>
<li>Integer molestie lorem at massali>
<li>Facilisis in pretium nisl aliquetli>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis nequeli>
<li>Purus sodales ultriciesli>
<li>Vestibulum laoreet porttitor semli>
<li>Ac tristique libero volutpat atli>
ul>
li>
<li>Faucibus porta lacus fringilla velli>
<li>Aenean sit amet erat nuncli>
<li>Eget porttitor loremli>
ul>
div>
list-inline
.list-inline
.list-inline-item
<div class="container">
<h1>list-inlineh1>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsumli>
<li class="list-inline-item">Phasellus iaculisli>
<li class="list-inline-item">Nulla volutpatli>
ul>
div>
描述列表
<dl>
<dt>Description listsdt>
<dd>A description list is perfect for defining terms.dd>
<dt>Euismoddt>
<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 portadt>
<dd>Etiam porta sem malesuada magna mollis euismod.dd>
<dt>Truncated term is truncateddt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.dd>
dl>
水平的描述列表
<div class="container">
<h1>水平对齐的描述列表dlh1>
<dl class="row">
<dt class="col-sm-3">Description listsdt>
<dd class="col-sm-9">A description list is perfect for defining terms.dd>
<dt class="col-sm-3">Euismoddt>
<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 portadt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncateddt>
<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">Nestingdt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition listdt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.dd>
dl>
dd>
dl>
div>
整体代码
<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 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 1h1>
<h1 class="display-2">Display 2h1>
<h1 class="display-3">Display 3h1>
<h1 class="display-4">Display 4h1>
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>highlightmark>
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 underlinedu>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">attrabbr>p>
<p><abbr title="HyperText Markup Language" class="initialism">HTMLabbr>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 monospacep>
div>
<div class="container">
<h1>无下划线h1>
<a href="#" class="text-decoration-none">Non-underlined linka>
div>
<div class="container">
<h1>大小写转换h1>
<p class="text-lowercase">TEXT-LOWERCASEp>
<p class="text-uppercase">text-uppercasep>
<p class="text-capitalize">text-capitalizep>
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>
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
div>
div>
<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 breakh1>
<p class="text-break">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>
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 Titlecite>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 Titlecite>footer>
blockquote>
div>
<div class="container">
<h1>list-unstyledh1>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit ametli>
<li>Consectetur adipiscing elitli>
<li>Integer molestie lorem at massali>
<li>Facilisis in pretium nisl aliquetli>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis nequeli>
<li>Purus sodales ultriciesli>
<li>Vestibulum laoreet porttitor semli>
<li>Ac tristique libero volutpat atli>
ul>
li>
<li>Faucibus porta lacus fringilla velli>
<li>Aenean sit amet erat nuncli>
<li>Eget porttitor loremli>
ul>
div>
<div class="container">
<h1>list-inlineh1>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsumli>
<li class="list-inline-item">Phasellus iaculisli>
<li class="list-inline-item">Nulla volutpatli>
ul>
div>
<div class="container">
<h1>水平对齐的描述列表dlh1>
<dl class="row">
<dt class="col-sm-3">Description listsdt>
<dd class="col-sm-9">A description list is perfect for defining terms.dd>
<dt class="col-sm-3">Euismoddt>
<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 portadt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncateddt>
<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">Nestingdt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition listdt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.dd>
dl>
dd>
dl>
div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">script>
body>
html>