<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>