0%

6.4 Bootstrap排版相关样式 6.4.1 标题元素和样式

发表于 更新于 分类于 ， ，

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>

原文链接: 6.4 Bootstrap排版相关样式 6.4.1 标题元素和样式