怎樣創(chuàng)建一個(gè)最簡(jiǎn)單的列表組弧腥？
使用 <ul> 設(shè)置 .list-group 類庞溜，其中 <li> 設(shè)置 .list-group-itme 類破讨，即可列表組。
<ul class="list-group">
<li class="list-group-item">Pictures</li>
......
</ul>
01.PNG
怎樣給列表項(xiàng)設(shè)置鏈接尔苦，并呈現(xiàn)出激活狀態(tài)涩馆？
- 使用
<div>代替<ul>作為列表組 - 使用
<a>代替<li>作為列表項(xiàng) - 激活項(xiàng)可以設(shè)置
.active類
<!-- 帶鏈接的列表組 -->
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item active">Pictures</a>
<a href="#" class="list-group-item">Documents</a>
......
</div>
</div>
給列表項(xiàng)設(shè)置鏈接，并激活
怎樣給列表項(xiàng)設(shè)置圖標(biāo)允坚？
列表項(xiàng)文本的前面或者后面添加一個(gè) <span> 元素魂那，設(shè)置圖標(biāo)類
<!-- 帶鏈接、帶圖標(biāo)的列表組 -->
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="glyphicon glyphicon-camera"></span> Pictures
</a>
<a href="#" class="list-group-item">
<span class="glyphicon glyphicon-file"></span> Documents
</a>
...........
</div>
</div>
設(shè)置圖標(biāo)
怎樣給列表項(xiàng)設(shè)置徽章稠项？
列表項(xiàng)的文本前面或者后面添加一個(gè) <span> 元素涯雅，并設(shè)置 .badge 類
<div class="list-group">
<a href="#" class="list-group-item active">
<span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>
</a>
......
</div>
設(shè)置徽章
自定義列表組包含哪些組件？
在 .list-group-item 內(nèi)可以添加任何 HTML 內(nèi)容展运，通常情況下包含
- 標(biāo)題：
<h1>設(shè)置.list-group-item-heading - 內(nèi)容：
<p>設(shè)置.list-group-item-text
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">What is HTML?</h4>
<p class="list-group-item-text">HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</p>
</a>
<a href="#" class="list-group-item active">
.......
</a>
......
</div>
03.PNG
怎樣為列表組設(shè)置情景樣式活逆？
為每個(gè)列表項(xiàng)也可以設(shè)置上下文樣式，例如 .list-group-item-success
<div class="bs-example">
<h2>沒有活動(dòng)的列表項(xiàng)</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-success">200 OK: The server successfully processed the request.</li>
......
</ul>
</div>
<div class="bs-example">
<h2>有活動(dòng)的列表項(xiàng)</h2>
<div class="list-group">
......
<a href="#" class="list-group-item list-group-item-info active">100 Continue: The client should continue with its request.</a>
......
</div>
</div>
04.PNG
