zoukankan      html  css  js  c++  java
  • Bootstrap 组件之 List group

    简介

    List group 指列表。当然,Bootstrap 列表不局限于由 <ul><li> 标签构成的。

    Bootstrap 中一共三种列表的构成方式,这里 有一个例子:

    1. ul > li
    2. div > a
    3. div > button

    列表就是“父与子”的关系。在 Bootstrap 中,“父”要标记上 list-group,“子”要标记上 list-group-item

    ul > li

    <ul class="list-group">
        <li class="list-group-item acive">1</li>
        <li class="list-group-item">2</li>
        <li class="list-group-item">3</li>
    </ul>
    

    稍复杂些的:

    <ul class="list-group">
        <li class="list-group-item active"><span class="badge">14</span>1</li>
        <li class="list-group-item">2</li>
        <li class="list-group-item">3</li>
    </ul>
    

    div > a

    <ul class="list-group">
        <a href="javascript:void(0);" class="list-group-item">1</a>
        <a href="javascript:void(0);" class="list-group-item active"><span class="badge">14</span>2</a>
        <a href="javascript:void(0);" class="list-group-item">3</a>
    </ul>
    

    div > button

    <ul class="list-group">
        <button type="button" class="list-group-item">1</button>
        <button type="button" class="list-group-item">2</button>
        <button type="button" class="list-group-item active"><span class="badge">14</span>3</button>
    </ul>
    

    (完)

  • 相关阅读:
    AJAX封装(IE)
    CSS3线性渐变
    [Kafka] [All about it]
    [Java][内存模型]
    [python] [Jupyter Notebook]
    [Paper][Link note]
    [TODO]
    [Java] [Singleton] [DCL][happens-before]
    [Java concurrent][Collections]
    Unity AssetBundles and Resources指引 (四) AssetBundle使用模式
  • 原文地址:https://www.cnblogs.com/zhangbao/p/6559446.html
Copyright © 2011-2022 走看看