排版
标题
标题分为<h1><h2><h3><h4><h5><h6>
,对应的字体如下表所示。
标题 | h1 | h2 | h3 | h4 | h5 | h6 |
---|---|---|---|---|---|---|
字体 | 36px | 30px | 24px | 18px | 14px | 12px |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<title>排版</title>
</head>
<body>
<div style="height: 30px"></div>
<div class="container" style="background: #eee" >
<h1 class="h1">标题:title</h1>
<h2 class="h2">标题:title</h2>
<h3 class="h3">标题:title</h3>
<h4 class="h4">标题:title</h4>
<h5 class="h5">标题:title</h5>
<h6 class="h6">标题:title</h6>
</div>
</body>
</html>
在h系统的标题里面还可以内嵌两个标题标签,分别是大标题<big>
,小标题<small>
,示例如下
<div class="container" style="background: #eee" >
<h1 class="h1">标题:title<small>小标题:small</small><big>大标题:big</big></h1>
<h2 class="h2">标题:title<small>小标题:small</small><big>大标题:big</big></h2>
<h3 class="h3">标题:title<small>小标题:small</small><big>大标题:big</big></h3>
<h4 class="h4">标题:title<small>小标题:small</small><big>大标题:big</big></h4>
<h5 class="h5">标题:title<small>小标题:small</small><big>大标题:big</big></h5>
<h6 class="h6">标题:title<small>小标题:small</small><big>大标题:big</big></h6>
</div>
页面主体
Bootstrap的全局font-size是14px,相当于h5字号的大小,ine-height是1.428。
在<p>
标签内部加lead属性会使段落的字体变大加粗,效果更明显。
示例如下
<div class="container" style="background: #eee">
<p >
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p class="lead">
Nullam id dolor id nibh ultricies vehicula.
</p>
</div>
内联文本元素
删除线 | 下划线 | 斜体 | 加粗 | 标记 | 小号文本 | 大号文本 | |
---|---|---|---|---|---|---|---|
bootstrap | <s> | <ins> | <em> | <strong> | <mark> | <small> | <big> |
html | <del> | <u> | <i> | <b> |
<div class="container" style="background: #eee">
<div>
<mark><mark>标记 </mark>文本 <br/>
<del><del>删除线 </del> <br/>
<s><s>删除线 </s> <br/>
<ins><ins>下划线 </ins> <br/>
<u><u>下划线 </u> <br/>
<em><em>斜体 </em> <br/>
<i><i>斜体 </i> <br/>
<b><b>加粗 </b> <br/>
<strong><strong>加粗 </strong> <br/>
<small><small>小号文本small</small> <br/>
<big><big>大号文本big</big>
</div>
</div>