Bootstrap学习笔记 13 - 进度条

最新推荐文章于 2019-01-31 21:41:36 发布

Cynhard85

最新推荐文章于 2019-01-31 21:41:36 发布

阅读量553

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 进度条 progress 学习笔记

本文链接：https://blog.csdn.net/u011304970/article/details/78664568

版权

Bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

查看运行结果