Bootstrap组件之进度条

来源：互联网发布：苏联加入轴心国知乎编辑：程序博客网时间：2024/04/27 18:26

.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 lang="zh_CN"><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" 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>

0 0