Bootstrap教程 各种列表组实例

基本实例

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

    ○ 向元素 <ul> 添加 class .list-group
    ○ 向 <li> 添加 class .list-group-item
实例:

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

  1. <ul class="list-group">
  2.    <li class="list-group-item">Cras justo odio</li>
  3.    <li class="list-group-item">Dapibus ac facilisis in</li>
  4.    <li class="list-group-item">Morbi leo risus</li>
  5.    <li class="list-group-item">Porta ac consectetur ac</li>
  6.    <li class="list-group-item">Vestibulum at eros</li>
  7. </ul>

向列表组添加徽章

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

实例:

  • 14 Bootstrap构建你的响应式WordPress主题
  • 36 wordpress无插件实现带缩略图的随机小文章
  • 22 WordPress网站实际情况选择恰当的链接提交
  • 11 百度站内搜索替换wordpress搜索

  1. <ul class="list-group">
  2.   <li class="list-group-item">
  3.     <span class="badge">14</span>
  4.     Bootstrap构建你的响应式WordPress主题
  5.   </li>
  6. </ul>

向列表组添加链接

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

实例:

  1. <div class="list-group">
  2.   <a href="#" class="list-group-item active">Cras justo odio </a>
  3.   <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  4.   <a href="#" class="list-group-item">Morbi leo risus</a>
  5.   <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  6.   <a href="#" class="list-group-item">Vestibulum at eros</a>
  7. </div>

按钮

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

实例:

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
    1. <div class="list-group">
    2.   <button type="button" class="list-group-item">Cras justo odio</button>
    3.   <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
    4.   <button type="button" class="list-group-item">Morbi leo risus</button>
    5.   <button type="button" class="list-group-item">Porta ac consectetur ac</button>
    6.   <button type="button" class="list-group-item">Vestibulum at eros</button>
    7. </div>

    被禁用的条目

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

    实例:

    1. <div class="list-group">
    2.   <a href="#" class="list-group-item disabled">Cras justo odio </a>
    3.   <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    4.   <a href="#" class="list-group-item">Morbi leo risus</a>
    5.   <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    6.   <a href="#" class="list-group-item">Vestibulum at eros</a>
    7. </div>

    情境类

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

    实例:

    • Dapibus ac facilisis in
    • Cras sit amet nibh libero
    • Porta ac consectetur ac
    • Vestibulum at eros

    1. <ul class="list-group">
    2.   <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
    3.   <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
    4.   <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
    5.   <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    6. </ul>
    7. <div class="list-group">
    8.   <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
    9.   <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
    10.   <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
    11.   <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
    12. </div>

    定制内容

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

    实例:

    List group item heading

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

    1. <div class="list-group">
    2.   <a href="#" class="list-group-item active">
    3.     <h4 class="list-group-item-heading">List group item heading</h4>
    4.     <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    5.   </a>
    6. </div>

    发布日期:

    所属分类: BootStrap 标签: