目录：
1.页头
2.缩略图
3.警告框
都比较简单，就是直接上示例，强强代码熟悉一下即可。
1.页头
1.1效果截图
1.2 代码示例
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
</head>
13
<body style="margin: 60px">
14
15
<div class="panel panel-info">
16
<div class="panel-heading">
17
页头
18
</div>
19
20
<div class="panel-body">
21
<div class="page-header">
22
<h1>h1大页头 <small>大页头的小可爱</small></h1>
23
</div>
24
25
</div>
26
</div>
27
</body>
28
</html>
2 缩略图
2.1 效果截图
2.2 代码示例
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 60px">
15
16
<div class="panel panel-warning">
17
<div class="panel-heading">
18
常规缩略图
19
</div>
20
21
<div class="panel-body">
22
<div class="row">
23
<div class="col-xs-6 col-md-3">
24
<a href="#" class="thumbnail">
25
<img src="img/img.jpg" width="100%">
26
27
</a>
28
</div>
29
30
<div class="col-xs-6 col-md-3">
31
<a href="#" class="thumbnail">
32
<img src="img/img.jpg" width="100%">
33
</a>
34
</div>
35
36
<div class="col-xs-6 col-md-3">
37
<a href="#" class="thumbnail">
38
<img src="img/img.jpg" width="100%">
39
</a>
40
</div>
41
<div class="col-xs-6 col-md-3">
42
<a href="#" class="thumbnail">
43
<img src="img/img.jpg" width="100%">
44
</a>
45
</div>
46
</div>
47
</div>
48
49
</div>
50
51
<div class="panel panel-success">
52
<div class="panel-heading">
53
自定义内容缩略图
54
</div>
55
56
<div class="panel-body">
57
<div class="row">
58
<div class="col-xs-6 col-md-4">
59
60
<div class="thumbnail">
61
<img src="img/jiuzhaigou.png" style="height:auto;width: 100%">
62
<div class="caption">
63
<h3>九寨沟</h3>
64
<p>五花海位于三条沟的日则沟中段，孔雀河上游，由于海底的钙华沉积，各种色泽艳丽的藻类以及岸边五彩斑斓的林
65
木倒影，使得五花海呈现出鹅黄、藏青、墨绿，宝蓝等各种颜色</p>
66
<p><button class=" btn btn-info">了解更多</button> </p>
67
68
</div>
69
</div>
70
</div>
71
72
<div class="col-xs-6 col-md-4">
73
<div class="thumbnail">
74
<img src="img/lasa.png" style="height:auto;width: 100%">
75
<div class="caption">
76
<h3>拉萨</h3>
77
<p>海拔3650米的藏传佛教圣地，吸引着来自全球各地的旅客，磨破了脚皮也无法制止前行者的虔诚之心。</p>
78
<p><button class=" btn btn-info">了解更多</button> </p>
79
80
</div>
81
</div>
82
</div>
83
84
<div class="col-xs-6 col-md-4">
85
<div class="thumbnail">
86
<img src="img/wuzhen.png" style="height:auto;width: 100%">
87
<div class="caption">
88
<h3>乌镇</h3>
89
<p>近在眼前的五一假期马上就要到了，如果你还没选好出远门的目的地，又没有请好该请的假期，那不如去北京、上
90
海周边的古镇逛一逛。这个季节的天气是我最喜欢的，北方还没有进入酷暑，伴随着春风夏雨，而烟雨蒙蒙的江南水乡，更有我最最向往的雨天味道。</p>
91
<p><button class=" btn btn-info">了解更多</button> </p>
92
93
</div>
94
</div>
95
</div>
96
</div>
97
</div>
98
99
</div>
100
</body>
101
</html>
3.警告框
3.1 效果截图
3.2 示例代码
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 60px">
15
16
<div class="panel panel-warning">
17
<div class="panel-heading">
18
警告框颜色
19
</div>
20
<div class="panel-body">
21
<div class="alert alert-warning"><strong>warning</strong> alert！</div>
22
<div class="alert alert-danger"> <strong>danger</strong> alert！</div>
23
<div class="alert alert-info"><strong>info</strong> alert！</div>
24
<div class="alert alert-success"> <strong>success</strong> alert！</div>
25
</div>
26
</div>
27
28
<div class="panel panel-danger">
29
<div class="panel-heading">
30
可关闭的警告框
31
</div>
32
<div class="panel-body">
33
<div class="alert alert-warning alert-dismissible">
34
35
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
36
<span aria-hidden="true">×</span>
37
</button>
38
<strong>warning</strong> dismissible alert！</div>
39
</div>
40
</div>
41
42
<div class="panel panel-success">
43
<div class="panel-heading">
44
警告框中的链接
45
</div>
46
<div class="panel-body">
47
<div class="alert alert-danger alert-dismissible">
48
49
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
50
<span aria-hidden="true">×</span>
51
</button>
52
<strong>danger</strong> link alert！
53
<a href="#" class="alert-link">http://www.baidu.com</a>
54
</div>
55
</div>
56
</div>
57
</body>
58
</html>
ok,今晚就学习到这儿...