文字排版
1. Bootstrap 4 默认设置
font-size 为 16px，line-height 为 1.5。所有的 < p >元素 margin-top: 0 、 margin-bottom: 16px。
2. < h1 > ~ < h6 >样式
知识点：h1大小为40px
h2大小为32px
h3大小为28px
h4大小为24px
h5大小为20px
h6大小为16px
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.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">
<h1>h1大小为40px</h1>
<h2>h2大小为32px</h2>
<h3>h3大小为28px</h3>
<h4>h4大小为24px</h4>
<h5>h5大小为20px</h5>
<h6>h6大小为16px</h6>
</div>
</body>
</html>
运行结果：
3. 标题类：Display
知识点：1. 可以用四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
2. Display 标题可以输出更大更粗的字体样式。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.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">
<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>
</body>
</html>
运行结果：
4. < small > 、< mark > 、< abbr >
知识点：1. < small > 元素用于创建字号更小的颜色更浅的文本
2. < mark > 为黄色背景及有一定的内边距
3. < abbr > 为显示在文本底部的一条虚线边框
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.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">
<!-- small -->
<h1>h1 标题 <small>副标题</small></h1>
<h2>h2 标题 <small>副标题</small></h2>
<h3>h3 标题 <small>副标题</small></h3>
<h4>h4 标题 <small>副标题</small></h4>
<h5>h5 标题 <small>副标题</small></h5>
<h6>h6 标题 <small>副标题</small></h6>
<!-- mark -->
<p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
<!-- abbr -->
<p>每天一<abbr title="蔷薇科植物">苹果</abbr>，疾病远离我。 </p>
</div>
</body>
</html>
运行结果：
5. < blockquote > 、< dl >
知识点：1. < blockquote > ：标记长的引用
2. 对于引用的内容可以在 < blockquote > 上添加 .blockquote 类
3. < dl > 标签定义了定义列表；< dt >定义列表中的项目；< dd > 定义列表中的项目。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.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 -->
<blockquote class="blockquote">
<p>业精于勤，荒于嬉；行成于思，毁于随。</p>
<footer class="blockquote-footer">韩愈</footer>
</blockquote>
<!-- dl -->
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
</body>
</html>
运行结果：
6. < code >、< kbd >、< pre >
知识点：1. < code >：代码片段
2. < kbd >：用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。
3. < pre >：被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。常用来表示计算机的源代码。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.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">
<!-- code -->
<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
<!-- kbd -->
<p>用快捷键<kbd>ctrl + c</kbd>进行复制</p>
<!-- pre -->
<pre>
What's your name ?
My name is
Han MeiMei.
</pre>
</div>
</body>
</html>
运行结果：
7. 排版类
知识点：1. .font-weight-bold / .font-weight-normal / .font-weight-light / font-italic 加粗文本 / 普通文本 / 更细的文本 / 斜体文本
2. .text-left / .text-center / .text-right 左对齐 / 居中 / 右对齐
3. .text-justify / .text-nowrap 设定文本对齐,段落中超出屏幕部分文字自动换行 / 段落中超出屏幕部分不换行
4. .text-lowercase / uppercase / capitalize 设定文本小写 / 大写 / 单词首字母大写
5. .small 指定更小文本 (为父元素的 85% )
6. .lead 让段落更突出
7. .initialism 显示在 < abbr > 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
8. .list-unstyled 移除默认的列表样式，列表项 ( < ul > 和 < ol > )中左对齐。 这个类仅适用于直接子列表项(如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
9. .list-inline 将所有列表项放置同一行
10. .pre-scrollable 使 < pre > 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.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">
<p class="font-weight-bold">加粗文本</p>
<p class="font-weight-normal">正常文本</p>
<p class="font-weight-light">更细的文本</p>
<p class="font-italic">斜体文本</p>
<hr >
<p class="text-left">左对齐</p>
<p class="text-right">右对齐</p>
<p class="text-center">居中对齐文本</p>
<p class="text-justify">设定文本对齐,段落中超出屏幕部分文字自动换行</p>
<p class="text-nowrap">段落中超出屏幕部分不换行</p>
<hr >
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<hr >
<p>This is a regular paragraph.</p>
<p class="small">This paragraph is smaller.</p>
<hr >
<p>This is a regular paragraph.</p>
<p class="lead">This paragraph stands out.</p>
<hr >
<p>每天一<abbr title="蔷薇科植物">苹果</abbr>，疾病远离我。(normal abbr) </p>
<p>每天一<abbr title="蔷薇科植物" class="initialism">苹果</abbr>，疾病远离我。(slightly smaller abbr)</p>
<hr >
<ul class="list-unstyled">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<hr >
<ul class="list-inline">
<li class="list-inline-item">Coffee</li>
<li class="list-inline-item">Tea</li>
<li class="list-inline-item">Milk</li>
</ul>
<hr >
<pre>What's your name ?
My name is
Han MeiMei.
</pre>
<pre class="pre-scrollable">What's your name ?
My name is
Han MeiMei
</pre>
</div>
</body>
</html>
运行结果：
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
