淘先锋技术网

首页 1 2 3 4 5 6 7

Bootstrap组件之进度条

.progress——指定div包裹进度条组件；

.progress-bar——设置div为进度条样式；

.progress-bar-info、.progress-bar-warning、.progress-bar-success、.progress-bar-danger——设置进度条的情境效果；

.pregress-bar-striped——设置进度条具有条纹效果；

.active——可设置进度条的条纹处于动画状态；

属性aria-valuemin——设置进度条的最小值；

属性aria-valuemax——设置进度条的最大值；

属性aria-valuenow——设置进度条的当前值；

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>饭盒儿——发现身边不一样的世界</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" target="_blank" rel="external nofollow"  type="text/css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
    <div class="container">
        <h4>进度条示例</h4>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                <span class="sr-only">50%</span>
            </div>
        </div>

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

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

        <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
                40%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width:40%">
                <span class="sr-only">40%</span>
            </div>
            <div class="progress-bar progress-bar-striped" role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width:40%">
                <span class="sr-only">40%</span>
            </div>
        </div>


    </div>

</body>
</html>