响应式前端框架Bootstrap系列（14）列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。比如说可以用于制作API列表界面，列表组样式有以下几种：

.list-group：列表组样式定义
.list-group-item：列表组选项样式定义
.list-group-item-heading：选项标题
.list-group-item-text：选项文本

常用格式有两种：
第一种：

<ul>	<li><a></a></li>
	<li><a></a></li>
</ul>

第二种：

<div>	<a></a>	<a></a></div>

普通列表组和带链接的列表组，演示代码：

<p>普通列表组</p>
<ul class="list-group">
	<li class="list-group-item">新闻</li>
	<li class="list-group-item active">咨询</li>
	<li class="list-group-item">消息</li>
	<li class="list-group-item">下载</li>
</ul>

<p>超链接列表组</p>
<div class="list-group">
	<a href="#" class="list-group-item active">新闻</a>
	<a href="#" class="list-group-item">咨询</a>
	<a href="#" class="list-group-item">消息</a>
	<a href="#" class="list-group-item">下载</a>
</div>

效果图：

列表组+徽章效果，演示代码：

<p>徽章列表组</p>
<ul class="list-group" style="list-style: none;">
	<li>
		<a href="#" class="list-group-item active">新闻<span class="badge">新</span></a>
	</li>
	<li>
		<a href="#" class="list-group-item">咨询<span class="badge">新</span></a>
	</li>
	<li>
		<a href="#" class="list-group-item">消息</a>
	</li>
	<li>
		<a href="#" class="list-group-item">下载</a>
	</li>
</ul>

效果图：

板块列表组，演示代码：

<p>版块列表组</p>
<div class="list-group">
	<a class="list-group-item active">
		<h4 class="list-group-item-heading">移动业务</h4>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">
			双11优惠套餐
		</h4>
		<p class="list-group-item-text">
			充值50送10元
		</p>
		<span class="badge danger" style="margin-top: -30px; background-color: #cb4747;">还剩186名额</span>
	</a>
	<a href="javascript:void(0);" class="list-group-item">
		<h4 class="list-group-item-heading">
          	商务套餐
        </h4>
		<p class="list-group-item-text">
			充值80送20元
		</p>
		<span class="badge" style="margin-top: -30px; background-color: #cb4747;">还剩97名额</span>
	</a>
</div>

效果图：