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>

    效果:

  • 相关阅读:
    第一章嵌入式系统基础1.5嵌入式系统性能评价
    第一章嵌入式系统基础1.4
    1.3嵌入式系统的硬件基础
    学习第二天
    经典的删除字符串中指定的字符
    字符串的两种表示
    股票数据定向爬虫
    淘宝商品比价定向爬虫
    中国大学排名定向爬虫
    python小练习 批量修改文件名
  • 原文地址:https://www.cnblogs.com/tenWood/p/6139774.html
Copyright © 2011-2022 走看看