BootstrapBootstrap进程条

近日的话

  在网页中,进程条的意义并不少见,比如3个评分系统,比如加载状态等,通过不难、灵活的进程条,可以为当前工作流程或动作提供实时报告。本文将详细介绍Bootstrap进度条

 

主导样式

  Bootstrap框架中对此进程条提供了贰个主干样式,二个百分之百肥瘦的背景观,然后2个高亮的颜料代表达成进程。其实制作那样的进程条很是简单,一般是利用五个容器,外容器具有一定的大幅度,并且安装2个背景颜色,子成分设置叁个上升幅度,比如达成度是三成(也正是父容器的宽窄比例值),同时给其安装3个高亮的背景观

  Bootstrap框架中也是按那样的格局贯彻的,它提供了八个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。当中progress用来设置进程条的容器样式,而progress-bar用于限制进程条的快慢

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
          transition: width .6s ease;
}

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

  无障碍性更好的写法如下

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

  role属性告诉搜索引擎这一个div的作用是进程条;aria-valuenow=”40″属性告知当前进程条的速度为4/10;aria-valuemin=”0″属性告知进程条的最小值为0%;aria-valuemax=”100″属性告知进度条的最大值为百分之百

 

色彩缤纷进程条

  Bootstrap框架中的进度条和告诫音信框没有差距于,为了能给用户二个更好的体验,也依照不一样的情景配置了不一样的进度条颜色。在此称呼彩色进程条,其重点回顾以下八种:

  ☑ progress-bar-info:表示新闻进程条,进程条颜色为土灰

  ☑ progress-bar-success:表示成功进程条,进度条颜色为青灰

  ☑ progress-bar-warning:表示警告进程条,进程条颜色为香艳

  ☑ progress-bar-danger:表示错误进度条,进度条颜色为浅蓝

  具体选取万分简单,只要求在基础的快慢上加码对应的类名即可,彩色进程条与基本进度条比较,就是进程条颜色做了必然的浮动

.progress-bar-success {
  background-color: #5cb85c;
}
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-bar-danger {
  background-color: #d9534f;
}

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

 

条纹进程条

  在Bootstrap框架中除去提供了五颜六色进程条之外,还提供了一种条纹进度条,那种条纹进程条选择CSS3的线性渐变来完毕,并未借助其余图片。使用Bootstrap框架中的条纹进度条只供给在进程条的容器“progress”基础上扩大类名“progress-striped”,当然,要是要让进度条条纹像五彩进程一样,具有彩色效果,只须要在进程条上平添对应的颜料类名

  [注意]由此渐变可以为进程条创立条纹效果,IE9-浏览器不帮忙

.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

<div class="progress progress-striped">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

 

动态条纹

  为了让条纹进程条动起来,Bootstrap框架还提供了一种动态条纹进程条。其促成原理首要透过CSS3的animation来形成。首先通过@keyframes创设了1个progress-bar-stripes的卡通片,那个动画主要做了一件事,就是改变背景图像的职位,也便是background-position的值。因为条纹进程条是经过CSS3的线性渐变来制作的,而linear-gradient达成的正是对应背景中的背景图片

  [注意]IE9-浏览器不帮衬

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

  在Bootstrap框架中,通过给进程条容器“progress”添加二个类名“active”,并让文书档案加载成功就触“progress-bar-stripes”动画生效,使其展现出由右向左运动的卡通效果

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

<div class="progress progress-striped active">
    <div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

 

层叠进程条

  Bootstrap框架除了提供上述两种进程条之外,还提供了一种层叠进度条。层叠进度条能够将差别情状的进程条放置在一道,按程度情势排列

  把七个进度条放入同3个 .progress 中,使它们突显堆叠的功用

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    35% Complete (success)
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    20% Complete (warning)
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    10% Complete (danger)
  </div>
</div>

  [注意]Bootstrap,层叠的进程条之和不能够超过百分之百

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 30%"></div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 40%"></div>
</div>

 

提醒标签

  在骨子里支付中,有众多时候是索要在进度条中直接用相关的数值向用户传递完结的快慢值,Bootstrap考虑了这种利用景况,只需求在进度条中添加供给的值

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

  在呈现十分低的比重时,即便急需让文本提示能够清晰可知,能够为进程条设置 min-width 属性 

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

 

相关文章