目錄： 1. 清單組
2. 面闆
1.清單組
1.1 總結
1.2 示例效果截圖
1.3 示例代碼
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
<ul class="list-group"> 22
<li class="list-group-item"> 23
網絡讓人足不出戶就可以感受更遠更大的世界，但網絡沒想到的是，有些人還真不出門了。 24
</li> 25
<li class="list-group-item"> 26
20年後，當我們這輩生出來的熊孩子絞盡腦汁也想不出一個可用的使用者名時，他們就再也調皮不起來了。 27
</li> 28
<li class="list-group-item"> 29
人會陷入負螺旋，比如暴飲暴食，生活無規律，絕望；但同樣，人也可以陷入正螺旋，試着休整後保持環境整潔、勤于運動、工 30
作上心、注意形象，慢慢地會有很多人稱贊、喜歡你，你也會越享受變好的感覺，進而一切更可控、更有動力，甚至毫不費力。不說人脈，自我才是最值得經營的。 31
</li> 32
</ul> 33
</div> 34
</div> 35
36
<div class="panel panel-info"> 37
<div class="panel-heading"> 38
清單組添加徽章 39
</div> 40
<div class="panel-body"> 41
<ul class="list-group"> 42
<li class="list-group-item"> 43
<span class="badge">10000</span> 44
你媳婦兒的消息 45
</li> 46
<li class="list-group-item"> 47
你老媽子的消息 48
<span class="badge">99</span> 49
</li> 50
<li class="list-group-item"> 51
你老情人的消息 52
<span class="badge">99999999999</span> 53
</li> 54
</ul> 55
</div> 56
</div> 57
58
<div class="panel panel-danger"> 59
<div class="panel-heading"> 60
連結清單組 61
</div> 62
<div class="panel-body"> 63
<div class="list-group"> 64
<a class="list-group-item" href="#">www.baidu.com</a> 65
<a class="list-group-item active" href="#">www.google.com</a> 66
<a class="list-group-item" href="#">www.36kr.com</a> 67
</div> 68
</div> 69
</div> 70
71
<div class="panel panel-primary"> 72
<div class="panel-heading"> 73
按鈕清單組（注意不能用.btn類） 74
</div> 75
<div class="panel-body"> 76
<div class="list-group"> 77
<button type="button" class="list-group-item">btn1</button> 78
<button type="button" class="list-group-item">btn1</button> 79
</div> 80
</div> 81
</div> 82
83
<div class="panel panel-success"> 84
<div class="panel-heading"> 85
清單組條目禁用 86
</div> 87
<div class="panel-body"> 88
<div class="list-group"> 89
<a class="list-group-item disabled" href="#">禁用</a> 90
</div> 91
</div> 92
</div> 93
94
<div class="panel panel-warning"> 95
<div class="panel-heading"> 96
情境清單組 97
</div> 98
<div class="panel-body"> 99
<ul class="list-group"> 100
<li class="list-group-item list-group-item-danger"> 101
借了同學的公交卡，不小心落在了校門口的小食店裡，出門去拿，走到半路下雨了困在半路，雨小了冒雨走，鞋子濕了，在回來 102
路上手又一滑，公交卡掉進了下水道…FML 103
</li> 104
<li class="list-group-item list-group-item-info"> 105
一樹一影幾孤舟 一灣皺水披星霜 三兩稚兒笑我愚 個中風霜我唯知 忽聞胡笳亂晚寒 快馬無馬欲加鞭 遁至星海化惡鬼 俗塵光色我清靜 106
</li> 107
<li class="list-group-item list-group-item-success"> 108
自從我用了智能行動電話之後，我的智能、移動和電話都在減少。 109
</li> 110
<li class="list-group-item list-group-item-warning"> 111
感覺那種 情深不移 生死相随的愛情 隻存在小說裡，反正我是沒見到也沒聽到過是要是見過 告訴我 好期待 112
</li> 113
</ul> 114
</div> 115
</div> 116
117
<div class="panel panel-success"> 118
<div class="panel-heading"> 119
自定義清單組 120
</div> 121
<div class="panel-body"> 122
<div class="list-group"> 123
<a class="list-group-item" href="#"> 124
<h3 class="list-group-item-heading">哪有什麼職場瓶頸？隻是你沒做這3步而已</h3> 125
<p class="list-group-item-text">比起跳槽，更有效的升職方法是......</p> 126
</a> 127
128
<a class="list-group-item active" href="#"> 129
<h3 class="list-group-item-heading">蘋果秋季釋出會定檔9月12日，你想知道的一切“劇透”都在這裡了</h3> 130
<p class="list-group-item-text">今天蘋果官方終于宣布，于9月12日在Apple Park舉行秋季釋出會，随着新機iPhone 131
8釋出的臨近，相關的“劇透”也越來越密集，果粉們一定很好奇，新一代iPhone顔值到底怎樣？科技到底有多“黑”？你想知 132
道的一切“劇透”都在這裡了！</p> 133
</a> 134
<a class="list-group-item" href="#"> 135
<h3 class="list-group-item-heading">Uber離職潮暫停：新招募火狐浏覽器創始人負責産品</h3> 136
<p class="list-group-item-text">在科羅沙執掌大權後，Uber的人才離職潮是否能夠宣告終止，是否能夠招募到一批優秀 137
人才加盟這家全世界最值錢的非上市公司，這将值得關注。</p> 138
</a> 139
</div> 140
</div> 141
</div> 142
</body> 143
</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-success"> 17
<div class="panel-heading"> 18
panel-heading 19
</div> 20
<div class="panel-body"> 21
panel-body 22
</div> 23
<div class="panel-footer"> 24
panel-footer 25
</div> 26
</div> 27
</body> 28
</html>