Bootstrap学习笔记 13 - 进度条

  • <div> 中通过使用 .progress 样式实现进度条

    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
            <span class="sr-only">70% Complete</span>
        </div>
    </div>
  • 进度条可以有标签

    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
            70%
        </div>
    </div>
  • 可选颜色
    • .progress-bar-success
    • .progress-bar-info
    • .progress-bar-warning
    • .progress-bar-danger
  • 可以有条纹 .progress-bar-striped
  • 可以有动画效果 .active,为了实现动画效果必须带 .progress-bar-striped
  • 进度条可叠加

    <div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
        Free Space
      </div>
      <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
        Warning
      </div>
      <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
        Danger
      </div>
    </div>

完整示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <title>Progress Bar</title>
        <script>
            function showHTMLContent(showElement, codeElement) {
                $(showElement).html($('<div/>').text($(codeElement).html()).html());
            }
            $(function() {
                showHTMLContent('#showBasicStyle', '#basicStyle');
                showHTMLContent('#showWithLabel', '#withLabel');
                showHTMLContent('#showWithColor', '#withColor');
                showHTMLContent('#showMulti', '#multi');
                $(":radio[name='style']").click(function() {
                    $("#progressBar").attr("class", $(this).val());
                    if ($(":checkbox[name='striped']").prop("checked")) {
                        $("#progressBar").addClass('progress-bar-striped');
                    }
                    if ($(":checkbox[name='active']").prop("checked")) {
                        $("#progressBar").addClass('active');
                    }
                    showHTMLContent('#showWithColor', '#withColor');
                });
                $(":checkbox[name='striped']").change(function() {
                    if (this.checked) {
                        $(":checkbox[name='active']").removeAttr("disabled");
                        $("#progressBar").addClass('progress-bar-striped');
                        showHTMLContent('#showWithColor', '#withColor');
                    } else {
                        if ($(":checkbox[name='active']").prop("checked")) {
                            $(":checkbox[name='active']").prop("checked", false);
                            $("#progressBar").removeClass('active');
                        }
                        $(":checkbox[name='active']").attr("disabled", "disabled");
                        $("#progressBar").removeClass('progress-bar-striped');
                        showHTMLContent('#showWithColor', '#withColor');
                    }
                });
                $(":checkbox[name='active']").change(function() {
                    if (this.checked) {
                        $("#progressBar").addClass('active');
                        showHTMLContent('#showWithColor', '#withColor');
                    } else {
                        $("#progressBar").removeClass('active');
                        showHTMLContent('#showWithColor', '#withColor');
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1>基本样式</h1>
            <h2>代码</h2>
            <pre id="showBasicStyle"></pre>
            <h2>样式</h2>
            <div id="basicStyle">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width:70%">
                        <span class="sr-only">70% Complete</span>
                    </div>
                </div>
            </div>

            <br><br>

            <h1>带标签的进度条</h1>
            <h2>代码</h2>
            <pre id="showWithLabel"></pre>
            <h2>样式</h2>
            <div id="withLabel">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width:70%">
                        70%
                    </div>
                </div>
            </div>

            <br><br>

            <h1>改变进度条颜色</h1>
            <h2>选择样式</h2>
            <form>
                <input type="radio" name="style" value="progress-bar" checked> progress-bar <br>
                <input type="radio" name="style" value="progress-bar progress-bar-success"> progress-bar progress-bar-success <br>
                <input type="radio" name="style" value="progress-bar progress-bar-info"> progress-bar progress-bar-info <br>
                <input type="radio" name="style" value="progress-bar progress-bar-warning"> progress-bar progress-bar-warning <br>
                <input type="radio" name="style" value="progress-bar progress-bar-danger"> progress-bar progress-bar-danger <br>
                <input type="checkbox" name="striped" value="progress-bar-striped"> progress-bar-striped <br>
                <input type="checkbox" name="active" value="progress-bar-striped active" disabled="disabled"> progress-bar-striped active <br>
            </form>
            <h2>代码</h2>
            <pre id="showWithColor"></pre>
            <h2>样式</h2>
            <div id="withColor">
                <div class="progress">
                    <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="40" 
                        aria-valuemin="0" aria-valuemax="100" style="width:40%">
                        40% Complete (success)
                    </div>
                </div>
            </div>

            <br><br>

            <h1>混合多个</h1>
            <h2>代码</h2>
            <pre id="showMulti"></pre>
            <h2>样式</h2>
            <div id="multi">
                <div class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
                        Free Space
                    </div>
                    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
                        Warning
                    </div>
                    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
                        Danger
                    </div>
                </div>
            </div>

            <br><br>

        </div>
    </body>
</html>

查看运行结果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值