引导 4 |排版
排版是 Bootstrap 的一个特性,用于设置文本内容的样式和格式。它用于创建自定义标题、内嵌副标题、列表、段落、对齐、添加更多面向设计的字体样式等等。引导程序支持字体堆栈、标题和链接样式的全局设置,用于各种类型的操作系统和设备的网络应用程序,以提供最佳的用户界面。 排版可以用来创建:
- 标题
- 副标题
- 文本和段落字体颜色、字体类型和对齐方式
- 列表
- 其他内嵌元素
在引导程序中实现排版功能的标签和类:
- 显示标题:用于创建更好的标题(更大的字体大小和更轻的字体粗细)。显示标题中有四个类别。显示器-1,。显示器-2,。显示器-3 和。显示器-4。
- 引导:用于使一个段落突出,即视觉效果更好。
- 标记:用于突出文本内容。
- 初始值设定项:用于以略小的文本大小渲染缩写。
- blockquote: 用于引用文本内容。
- 区块报价-页脚:用于添加页脚详细信息,用于标识报价来源。
- 文本居中:用于将文本对齐居中。
- 列表-内联:用于使列表的元素内联。
- text-truncate: 用于通过用省略号截断来缩短较长的文本。
- 文本静音:用于文本颜色,文本静音淡化文本,即文本变灰。
- 文字-大写:用于将文字转换为大写。
- 文字-小写:用于将文字转换为小写。
- text-大写:用于将文本转换为每个单词的第一个字母大写,其他字母小写。
- 。字体粗细加粗:设置字体粗细为加粗。它用于显示文本的重要性。
- 。字体粗细加粗:设置字体粗细为深加粗。它用于显示文本的重要性。
- 。字体-斜体:将字体样式设置为斜体。
- 。字体-粗细-轻:它将字体粗细设置为轻。
- 。字体-重量-较轻:设置较轻的字体重量。
- 。字体-粗细-正常:设置正常字体大小和粗细。
- 。导语:它让段落脱颖而出。
- 。小:用于创建二级副标题。
- 。text-left: 设置文本的左对齐方式。
- 。text-*-left: 它设置所有屏幕上文本的左对齐方式(小、中、大或 xlarge)。
- 。text-break: 它将长字符串文本拆分为短文本子字符串。
示例 1: 本示例使用标题类显示标题。
超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Typography example
</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Heading Lists</h1>
<h1 class="display-1">GeeksforGeeks</h1>
<h1 class="display-2">GeeksforGeeks</h1>
<h1 class="display-3">GeeksforGeeks</h1>
<h1 class="display-4">GeeksforGeeks</h1>
</div>
</body>
</html>
输出:
示例 2: 本示例使用<标记>标签来显示文本的重要性。
超文本标记语言
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Typography example
</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<p>A <mark>computer science</mark> portal for geeks</p>
</div>
</body>
</html>
输出:
支持的浏览器:
- 谷歌 Chrome
- 微软公司出品的 web 浏览器
- 火狐浏览器
- 歌剧
- 旅行队
版权属于:月萌API www.moonapi.com,转载请注明出处