当前位置:首页 > BootStrap > 正文内容
九月8日

时间:2016-09-08 20:20

Bootstrap教程 各种列表组实例

0
分类:BootStrap | 评论:0人 | 浏览:90次   

列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。
基本实例

最简单的列表组仅仅是一个带有多个列表条目的无序列表,另外还需要设置适当的类。我们提供了一些预定义的样式,你可以根据自身的需求通过 CSS 自己定制。

○ 向元素 <ul> 添加 class .list-group。

○ 向 <li> 添加 class .list-group-item。

实例:

<ul class=”list-group”>

<li class=”list-group-item”>Cras justo odio</li>

<li class=”list-group-item”>Dapibus ac facilisis in</li>

<li class=”list-group-item”>Morbi leo risus</li>

<li class=”list-group-item”>Porta ac consectetur ac</li>

<li class=”list-group-item”>Vestibulum at eros</li>

</ul>

向列表组添加徽章

给列表组加入徽章组件,它会自动被放在右边。只需要在 < style >元素中添加 <span class=”badge” > 即可。
实例:

<ul class=”list-group”>

<li class=”list-group-item”>

<span class=”badge”>14</span>

Bootstrap构建你的响应式WordPress主题

</li>

</ul>

向列表组添加链接

用 <a > 标签代替 <li> 标签可以组成一个全部是链接的列表组(还要注意的是,我们需要将 <ul> 标签替换为<div>标签)。没必要给列表组中的每个元素都加一个父元素。
实例:

<div class=”list-group”>

<a href=”#” class=”list-group-item active”>Cras justo odio </a>

<a href=”#” class=”list-group-item”>Dapibus ac facilisis in</a>

<a href=”#” class=”list-group-item”>Morbi leo risus</a>

<a href=”#” class=”list-group-item”>Porta ac consectetur ac</a>

<a href=”#” class=”list-group-item”>Vestibulum at eros</a>

</div>

按钮

列表组中的元素也可以直接就是按钮(也同时意味着父元素必须是 <div>而不能用 <ul> 了),并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类!
实例:

<div class=”list-group”>

<button type=”button” class=”list-group-item”>Cras justo odio</button>

<button type=”button” class=”list-group-item”>Dapibus ac facilisis in</button>

<button type=”button” class=”list-group-item”>Morbi leo risus</button>

<button type=”button” class=”list-group-item”>Porta ac consectetur ac</button>

<button type=”button” class=”list-group-item”>Vestibulum at eros</button>

</div>

被禁用的条目

为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色,表现出被禁用的效果。
实例:

<div class=”list-group”>

<a href=”#” class=”list-group-item disabled”>Cras justo odio </a>

<a href=”#” class=”list-group-item”>Dapibus ac facilisis in</a>

<a href=”#” class=”list-group-item”>Morbi leo risus</a>

<a href=”#” class=”list-group-item”>Porta ac consectetur ac</a>

<a href=”#” class=”list-group-item”>Vestibulum at eros</a>

</div>

情境类

为列表中的条目添加情境类,默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态。
实例:

<ul class=”list-group”>

<li class=”list-group-item list-group-item-success”>Dapibus ac facilisis in</li>

<li class=”list-group-item list-group-item-info”>Cras sit amet nibh libero</li>

<li class=”list-group-item list-group-item-warning”>Porta ac consectetur ac</li>

<li class=”list-group-item list-group-item-danger”>Vestibulum at eros</li>

</ul>

<div class=”list-group”>

<a href=”#” class=”list-group-item list-group-item-success”>Dapibus ac facilisis in</a>

<a href=”#” class=”list-group-item list-group-item-info”>Cras sit amet nibh libero</a>

<a href=”#” class=”list-group-item list-group-item-warning”>Porta ac consectetur ac</a>

<a href=”#” class=”list-group-item list-group-item-danger”>Vestibulum at eros</a>

</div>

定制内容

列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。
实例:

<div class=”list-group”>

<a href=”#” class=”list-group-item active”>

<h4 class=”list-group-item-heading”>List group item heading</h4>

<p class=”list-group-item-text”>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

</a>

</div>

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量