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>