目录： 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,今晚就学习到这儿...