zoukankan      html  css  js  c++  java
  • bootstrap-列表组

    <div class="container">
        <!-- 
            list-group                列表组 给ul添加
            list-group-item              列表项 给li添加
        -->
        <div class="row">
            <div class="col-lg-5">
                <ul class="list-group">
                    <li class="list-group-item">html</li>
                    <li class="list-group-item list-group-item-info">css</li>
                    <li class="list-group-item list-group-item-danger">javascript</li>
                    <li class="list-group-item">html5/css3</li>
                </ul>
            </div>
            <!--给每个列表项添加标记,标记自动到右边 -->
            <div class="col-lg-5">
                <ul class="list-group">
                    <li class="list-group-item">html<span class="badge">1</span></li>
                    <li class="list-group-item">css<span class="badge">11</span></li>
                </ul>
            </div>
        </div>
    
        <!--用a标签做的列表组,可添加状态-->
        <div class="row">
            <div class="col-lg-5">
                <div class="list-group">
                    <a href="#" class="list-group-item active">html</a>
                    <a href="#" class="list-group-item disabled">css</a>
                    <a href="#" class="list-group-item">javascript</a>
                </div>
            </div>
            <!--添加标题与段落的列表组 -->
            <div class="col-lg-5">
                <ul class="list-group">
                    <li class="list-group-item active">
                        <h4 class="list-group-item-heading">school学习</h4>
                        <p class="list-group-item-text">学习网站很多很多很多很多很多</p>
                    </li>
                    <li class="list-group-item">
                        <h4 class="list-group-item-heading">school学习</h4>
                        <p class="list-group-item-text">学习网站很多很多很多很多很多</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    效果:

  • 相关阅读:
    你可能不知道的 30 个 Python 语言的特点技巧
    正则替换sql为动态sql
    列表按指定个数分割后格式化输出
    多线程队列下载天涯帖子
    多线程下载图片
    sublime text3 运行python配置
    01_什么是接口测试
    02_Fiddler使用
    01_Fiddler安装
    05_功能测试
  • 原文地址:https://www.cnblogs.com/tenWood/p/6139774.html
Copyright © 2011-2022 走看看