4.16.1　基本样式

基本的进度条在使用的时候只需要应用两个样式：progress和progress-bar。progress用于设置进度条的容器样式，而progress-bar用于限制进度条的进度（颜色进度）。示例代码如下：

  1. <!--一般定义-->
  2. <div class="progress">
  3.     <div class="progress-bar" style="width: 60%;"></div>
  4. </div>
  5. <!-- 带辅助阅读的定义-->
  6. <div class="progress">
  7.     <div class="progress-bar" style="width: 60%;"
  8.         role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-
  9.                    valuemax="100">
  10.         <span class="sr-only">60% Complete</span>
  11.     </div>
  12. </div>

上述示例的运行效果如图4-75所示。

4.16.1　基本样式 - 图1 图4-75　进度条效果

progress样式主要是设置进度条容器的背景色、容器高度、间距等。源码如下：

  1. // 源码4523行
  2. .progress {
  3.   height: 20px;                                         /* 进度条容器高度 */
  4.   margin-bottom: 20px;                                  /* 设置20像素的底部外间距 */
  5.   overflow: hidden;                                     /* 超出容器就自动隐藏 */
  6.   background-color: #f5f5f5;                            /* 容器背景色为淡灰色 */
  7.   border-radius: 4px;                                   /* 容器圆角 */ 
  8.   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);        /* 容器阴影 */
  9.           box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  10. }

progress-bar样式在设置进度方面，重要的是设置了进度条的颜色（即样式的背景色）和过渡效果。源码如下：

  1. // 源码4532行
  2. .progress-bar {
  3.   float: left;                                          /* 左浮动 */
  4.   width: 0;                                             /* 默认宽度是0 */
  5.   height: 100%;                                         /* 高度100%自适应 */
  6.   font-size: 12px;
  7.   line-height: 20px;
  8.   color: #fff;
  9.   text-align: center;
  10.   background-color: #428bca;                            /* 进度条颜色 */
  11.   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);        /* 阴影处理 */
  12.           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); 
  13.   -webkit-transition: width .6s ease;                   /* 0.6秒的过渡 */
  14.           transition: width .6s ease;                   /* 其他浏览器 */
  15. }