Class(2017-1)練習2

四、【設計學院】區塊

4-2 進度條Progress bars加入

BS:【元件Components】>【進度條Progress bars】

4-2-1 利用BS加入【進度條Progress bars】元件

<!--  Progress bars    -->
<div class="row">
    <div class="bar">
        <span>網頁設計</span>
        <div class="progress">
            <div class="progress-bar  progress-bar-success" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
               <span>95%</span>
            </div>
        </div>
    </div>
    <div class="bar">
        <span>美術設計</span>
        <div class="progress">
            <div class="progress-bar  progress-bar-info" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
                <!--                                    <span>72%</span>-->
            </div>
        </div>
    </div>
    <div class="bar">
        <span>設計助理</span>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100">
                <!--                                    <span>46%</span>-->
            </div>
        </div>
    </div>
    <div class="bar">
        <span>多媒體動畫</span>
        <div class="progress">
            <div class="progress-bar  progress-bar-danger" role="progressbar" aria-valuenow="49" aria-valuemin="0" aria-valuemax="100">
                <!--                                    <span>49%</span>-->
            </div>
        </div>
    </div>
    <div class="bar">
        <span>程式設計師</span>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
                <!--                                    <span>51%</span>-->
            </div>
        </div>
    </div>
</div>

CSS美化

/* 設計學院 Progress bars =========================================================*/
.bar{ margin-bottom: 10px;}
.progress{display: inline-block; width: 90%; height:40px; line-height: 40px;
          vertical-align: middle; margin-bottom: 0;}
.progress>div{border-radius: 4px;}
.bar>span{height:40px; line-height: 40px; display: inline-block; vertical-align: middle; width: 8%;
            font-size: 14px; color: #000;}
.progress span{height:40px; line-height: 40px;font-size: 16px; color: #000; font-weight: bold;}

.progress-bar{font-size: 25px; line-height: 40px;}
@media (max-width:960px) {
    .bar>span{display: block; width: 100%;}
}

4-2-2  利用jQuery 讓進度條展現動畫

//設計學院 Progress bars 
$('.progress-bar').each(function() {
    var $barW = $(this).attr('aria-valuenow') + '%';
    $(this).text($barW).animate({
        width: $barW
    }, 6000);
});