本文将介绍列表组。列表组件用于以列表方式呈现复杂的和自定义的内容。创设一个基本的列表组的步调如下:

 向元素ul 添加class list-group

永利开户送38元体验金,向li添加class list-group-item

上边包车型大巴演示演示了这一点:

永利开户送38元体验金 1

HTML

<ul class="list-group">      <li class="list-group-item">免费注册域名</li>      <li class="list-group-item">免费Windows空间托管</li>      <li class="list-group-item">托管的数量</li>      <li class="list-group-item">24*7 支持</li>     <li class="list-group-item">每年更新成本</li>  </ul>

向列表组中增添徽章

大家能够向自由的列表项加多徽章组件,它会活动定位到右边手。只供给在li成分中增多span class=badge就可以。下边包车型客车演示演示了那或多或少:

永利开户送38元体验金 2

HTML

<h2>添加徽章</h2>  <ul class="list-group">      <li class="list-group-item">免费注册域名</li>      <li class="list-group-item">免费windows空间托管</li>      <li class="list-group-item">托管的数量</li>      <li class="list-group-item">24*7 支持</li>      <li class="list-group-item">每年更新成本</li>       <li class="list-group-item">          新          24*7 支持      </li>      <li class="list-group-item">每年更新成本</li>      <li class="list-group-item">          新          折扣优惠      </li>  </ul>

向列表组增加链接

通过用锚标签取代列表项,我们得以向列表组加多链接。大家须要使用div取代ul成分。上边包车型大巴言传身教和功力演示了那或多或少:

先看成效:

永利开户送38元体验金 3

HTML

<h4>列表组中的链接</h4>  <div>      <a href="#" class="list-group-item">免费域名注册</a>      <a href="#" class="list-group-item">24*7支持</a>      <a href="#" class="list-group-item">免费window空间托管</a>      <a href="#" class="list-group-item">图像的数量</a>      <a href="#" class="list-group-item">每年更新成本</a>  </div>

向列表组加多自定义内容

大家得以向地点增多链接的列表大四的html内容。上边包车型大巴演示演示了那点:

效果:

永利开户送38元体验金 4

html

<h4>列表组中的自定义内容</h4>  <ul class="list-group">      <li class="list-group-item active">          <h4 class="list-group-item-heading">入门网站包</h4>          <p>你将通过网页进行免费域名注册</p>      </li>      <li class="list-group-item">          <h4 class="list-group-item-heading">24*7 支持</h4>          <p>我们提供24*7 支持</p>      </li>      <li class="list-group-item">          <h4 class="list-group-item-heading">商务网站包          </h4>      </li>      <li class="list-group-item">托管的数量</li>  </ul>

本节完。


相关文章