bootstrap警告框、进度条和列表组

警告框

 

<div class="container">

     <div class=" alert  alert-success" role="alert">

          你好，喵星人！

     </div>

     <div class=" alert alert-danger" role="alert">

          你好，喵星人！

     </div>

     <div class=" alert alert-info" role="alert">

          你好，喵星人！

     </div>

     <div class=" alert alert-warning" role="alert">

          你好，喵星人！

     </div>

</div>

可关闭警告框

 

<div class="container">

    <div class="alert alert-warning" role="alert">

        <button type="button" class="close" data-dismiss="alert">

            <span aria-disabled="true"> &times;</span>

        </button>

        <strong>你好!</strong>

    </div>

</div>

 

<script src="js/jquery.mini.js"></script>

<script src="js/bootstrap.min.js"></script>

 

进度条

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">

        <span class="sr-only">60%</span>

    </div>

</div>

 

带有提示框的进度条

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">

        60%

    </div>

</div>

 

带斜纹的进度条

<div class="progress">

    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" style="width: 50%">

        60%

    </div>

</div>

动画效果

.active

堆叠效果

 

<div class="progress">

    <div class="progress-bar" style="width: 30%">30%</div>

    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 50%">

        50%

    </div>

</div>

 

列表组

基本的列表组，徽章，链接，被警用的条目，全景类， 定制内容

 

<ul class="list-group">

    <li class="list-group-item">喵星人1<span class="badge">10</span></li>

    <li class="list-group-item">喵星人2</li>

    <li class="list-group-item">喵星人3<span class="badge">20</span></li>

    <li class="list-group-item">喵星人4<span class="badge">30</span></li>

</ul>

 

<div class="list-group">

    <a href="" class="list-group-item">喵星人</a>

    <a href="" class="list-group-item">喵星人</a>

    <a href="" class="list-group-item">喵星人</a>

    <a href="" class="list-group-item">喵星人</a>

</div>

 

<div class="list-group">

    <a href="" class="list-group-item list-group-item-danger">喵星人</a>

    <a href="" class="list-group-item list-group-item-success">喵星人</a>

    <a href="" class="list-group-item list-group-item-info">喵星人</a>

    <a href="" class="list-group-item list-group-item-warning">喵星人</a>

</div>

 

<!--定制-->

<div class="list-group">

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">你好，喵星人</h4>

        <p class="list-group-item-text">

            喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人

        </p>

    </a>

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">你好，喵星人</h4>

        <p class="list-group-item-text">

            喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人

        </p>

    </a>

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">你好，喵星人</h4>

        <p class="list-group-item-text">

            喵星人很有依稀，你好，喵星人你好，喵星人你好，喵星人你好，喵星人

        </p>

    </a>

</div>

 

转载于:https://www.cnblogs.com/baixuemin/p/6495532.html