目錄： 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,今晚就學習到這兒...