排版
Bootstrap4 采用了一些简单易用的自定义排版元素，让用户可以对标题、正文、表格等等能够自由定义。下面就一起来看看具体内容吧。
Bootstrap4 默认设置
Bootstrap4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
标题
Bootstrap4 中定义了所有的 HTML 标题（h1 到 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>
尝试一下
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h1>Display 标题</h1>
<p>Display 标题可以输出更大更粗的字体样式。</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>
</body>
</html>
尝试一下 |
发表于 2024-12-2 09:50
|