Bootstrap学习日记之进度条

  Bootstrap支持创建进度条，在Bootstrap中使用CSS过渡和动画来获得进度条的效果。

  创建基本进度条

• 创建一个class="progress"的<div>
• 在此<div>中创建一个带有class="progress-bar"的<div>
• 在此<div>中添加style="width:n%"，n代表的是进度条百分之几的进度

     <div class="progress">
         <div class="progress-bar" style="width: 40%"></div>
     </div>

运行结果

 注意！！！我们在做网站时，不仅要考虑到视觉正常的用户，也要考虑到视觉有障碍的用户，所以可以往<div classs="progress-bar">中添加aria子属性，例如在此例中代码可以修改为

     <div class="progress">
         <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="width: 40%">
             <span class="sr-only">进度40%，完成</span>
         </div>
     </div>

  aria我们之前谈到过，这是能够让屏幕阅读器识别到的标签，其中aria-valuenow是代表进度条的数值，当屏幕阅读器阅读到这个标签以后，便会将这个数值告诉给用户，这是一个40%的进度条，aria-valuemin是进度条最小值，aria-valuemax是进度条最大值

  效果是一样的

创建样式进度条

• 每个样式进度条都要在一个<div class="progress">下写（就是每一个进度条独享一个<div class="progress">）
• 在<div class="progress">中添加样式，如progress-bar-danger、progress-bar-warning

  <div class="progress">
         <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="width: 40%">
             <span class="sr-only">绿色进度条40%，完成</span>
         </div>
         </div>
     <div class="progress">
         <div class="progress-bar progress-bar-danger" aria-valuemax="100"  aria-valuenow="70" aria-valuemin="0" role="progressbar" style="width: 70%" >
         <span class="sr-only">红色进度条70%，完成</span>
         </div>
         </div>
     <div class="progress">
         <div class="progress-bar progress-bar-warning" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" role="progressbar">
             <span class="sr-only">黄色进度条50%，完成</span>
         </div>
     </div>
     <div class="progress">
         <div class="progress-bar progress-bar-info" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" role="progressbar">
             <span class="sr-only">蓝色进度条20%，完成</span>
         </div>
     </div>

运行结果

创建条纹进度条

• 跟之前创建样式的进度条一样
• 在class="progress"的<div>中添加class="progress-striped'

 <div class="progress progress-striped">
         <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="width: 40%">
             <span class="sr-only">绿色进度条40%，完成</span>
         </div>
         </div>
     <div class="progress progress-striped">
         <div class="progress-bar progress-bar-danger" aria-valuemax="100"  aria-valuenow="70" aria-valuemin="0" role="progressbar" style="width: 70%" >
         <span class="sr-only">红色进度条70%，完成</span>
         </div>
         </div>
     <div class="progress progress-striped">
         <div class="progress-bar progress-bar-warning" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" role="progressbar">
             <span class="sr-only">黄色进度条50%，完成</span>
         </div>
     </div>
     <div class="progress progress-striped">
         <div class="progress-bar progress-bar-info" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" role="progressbar">
             <span class="sr-only">蓝色进度条20%，完成</span>
         </div>
     </div>

运行结果

创建动画进度条

  我们想要让这个进度条动起来，那我们该怎么办呢？答案是在class="progress progress-striped"中添加class="active"

 <div class="progress progress-striped active">
         <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="width: 40%">
             <span class="sr-only">绿色进度条40%，完成</span>
         </div>
         </div>
     <div class="progress progress-striped ">
         <div class="progress-bar progress-bar-danger" aria-valuemax="100"  aria-valuenow="70" aria-valuemin="0" role="progressbar" style="width: 70%" >
         <span class="sr-only">红色进度条70%，完成</span>
         </div>
         </div>
     <div class="progress progress-striped active">
         <div class="progress-bar progress-bar-warning" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" role="progressbar">
             <span class="sr-only">黄色进度条50%，完成</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div class="progress-bar progress-bar-info" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" role="progressbar">
             <span class="sr-only">蓝色进度条20%，完成</span>
         </div>
     </div>

运行结果

创建重叠进度条

创建重叠进度条非常简单只需要，将带有class="progress-bar"的<div>全部放到同一个class="progress"的<div>中即可

 <div class="progress progress-striped ">
         <div class="progress-bar progress-bar-success" role="progressbar"
              aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
              style="width: 40%;">
             <span class="sr-only">40% 完成</span>
         </div>
         <div class="progress-bar progress-bar-info" role="progressbar"
              aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
              style="width: 30%;">
             <span class="sr-only">30% 完成（信息）</span>
         </div>
         <div class="progress-bar progress-bar-warning" role="progressbar"
              aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
              style="width: 20%;">
             <span class="sr-only">20% 完成（警告）</span>
         </div>
     </div>

运行结果

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/