6.4 Bootstrap排版相关样式
Bootstrap的排版相关的样式很多都是直接借用了HTML 5元素,或者说Bootstrap可以和HTML元素结合使用以达到最佳效果。
6.4.1 标题元素和样式
如果要实现标题效果,既可直接使用<h1>到<h6>这样的HTML 元素,也可使用Bootstrap提供的.h1到.h6这样的CSS样式。
例如如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 标题相关样式 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<h1>HTML的一级标题</h1>
<h2>HTML的二级标题</h2>
<h5>HTML的五级标题</h5>
<hr/>
<div class="h1">Bootstrap的一级标题</div>
<div class="h2">Bootstrap的二级标题</div>
<div class="h5">Bootstrap的五级标题</div>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
使用HTML的<h1>到<h6>标签和使用Bootstrap的.h1到.h6样式的效果基本是相同的。
如果要在标题内使用小标题,可使用HTML的<small>标签或Bootstrap的.small样式来实现。small效果中的line-height变成1,字体大小在h1到h3中变成主标题的65%,在h4到h6中变成主标题的75%。
例如如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 标题相关样式 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<h1>HTML的一级标题
<span class="small">小标题</span>
</h1>
<h2>HTML的二级标题
<span class="small">小标题</span>
</h2>
<h5>HTML的五级标题
<span class="small">小标题</span>
</h5>
<hr/>
<div class="h1">Bootstrap的一级标题
<small>小标题</small>
</div>
<div class="h2">Bootstrap的二级标题
<small>小标题</small>
</div>
<div class="h5">Bootstrap的五级标题
<small>小标题</small>
</div>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|