详解Bootstrap进度条组件 - 洛水三千-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

详解Bootstrap进度条组件 - 洛水三千

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 20, 2016 pm 04:49 PM

在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。

进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本：

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理：

需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果；下面是css源码：

<span style="color: #800000">.progress </span>{<span style="color: #ff0000">
  height</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  margin-bottom</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  overflow</span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #f5f5f5</span>;<span style="color: #ff0000">
  border-radius</span>:<span style="color: #0000ff"> 4px</span>;<span style="color: #ff0000">
  -webkit-box-shadow</span>:<span style="color: #0000ff"> inset 0 1px 2px rgba(0, 0, 0, .1)</span>;<span style="color: #ff0000">
          box-shadow</span>:<span style="color: #0000ff"> inset 0 1px 2px rgba(0, 0, 0, .1)</span>;
}

Salin selepas log masuk

<span style="color: #800000">.progress-bar </span>{<span style="color: #ff0000">
  float</span>:<span style="color: #0000ff"> left</span>;<span style="color: #ff0000">
  width</span>:<span style="color: #0000ff"> 0</span>;<span style="color: #ff0000">
  height</span>:<span style="color: #0000ff"> 100%</span>;<span style="color: #ff0000">
  font-size</span>:<span style="color: #0000ff"> 12px</span>;<span style="color: #ff0000">
  line-height</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  color</span>:<span style="color: #0000ff"> #fff</span>;<span style="color: #ff0000">
  text-align</span>:<span style="color: #0000ff"> center</span>;<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #428bca</span>;<span style="color: #ff0000">
  -webkit-box-shadow</span>:<span style="color: #0000ff"> inset 0 -1px 0 rgba(0, 0, 0, .15)</span>;<span style="color: #ff0000">
          box-shadow</span>:<span style="color: #0000ff"> inset 0 -1px 0 rgba(0, 0, 0, .15)</span>;<span style="color: #ff0000">
  -webkit-transition</span>:<span style="color: #0000ff"> width .6s ease</span>;<span style="color: #ff0000">
          transition</span>:<span style="color: #0000ff"> width .6s ease</span>;
}

Salin selepas log masuk

例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>
             <span style="color: #0000ff"><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="sr-only"</span><span style="color: #0000ff">>3</span>0%<span style="color: #0000ff"></span><span style="color: #800000">span</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span>

Salin selepas log masuk

role属性作用：告诉搜索引擎这个div的作用是进度条；

aria-valuenow=”30”属性作用：当前进度条的进度为40%；

aria-valuemin=”0”属性作用：进度条的最小值为0%；

aria-valuemax=”100”属性作用：进度条的最大值为100%；

可以将设置了.sr-only类的标签从进度条组件中移除，而让当前进度显示出来；

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span> <span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span>

Salin selepas log masuk

彩色进度条

彩色进度条和警告进度条一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色，主要包括以下四种：

progress-bar-info:表示信息进度条，蓝色

progress-bar-success:表示成功进度条，绿色

progress-bar-warning:表示警告进度条，黄色

progress-bar-danger:表示错误进度条，红色

css源码：

<span style="color: #800000">.progress-bar-success </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #5cb85c</span>;
}<span style="color: #800000">

.progress-bar-info </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #5bc0de</span>;
}<span style="color: #800000">

.progress-bar-warning </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #f0ad4e</span>;
}<span style="color: #800000">

.progress-bar-danger </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #d9534f</span>;
}

Salin selepas log masuk

使用方法：

只需要在基础进度条上增加对应的类名即可

例子：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>彩色进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
      <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

Salin selepas log masuk

效果如下：

条纹进度条

条纹进度条采用css3的线性渐变来实现，并未借助任何图片，使用条纹进度条只需在进度条的容器.progress基础上追加类名”progress-striped”,如果要进度条纹像彩色进度一样，具有彩色效果，只需在进度条上增加相应得颜色类名

下面是.progress-striped样式源码：

<span style="color: #800000">.progress-striped .progress-bar </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;<span style="color: #ff0000">
  background-size</span>:<span style="color: #0000ff"> 40px 40px</span>;
}

Salin selepas log masuk

条纹进度对应的每种状态也有不同的颜色

<span style="color: #800000">.progress-striped .progress-bar-success </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-info </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-warning </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-danger </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -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)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">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)</span>;
}

Salin selepas log masuk

下面来看看条纹进度条的运用：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>条纹进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

Salin selepas log masuk

动态条纹进度条

在进度条.progress 、.progress-striped两个类的基础上在加入类名.active就能实现动态条纹进度条。

其实现原理主要是通过css3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是 background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片

下面是css源码：

<span style="color: #800000">@-webkit-keyframes progress-bar-stripes </span>{<span style="color: #ff0000">
  from {
    background-position</span>:<span style="color: #0000ff"> 40px 0</span>;
  }<span style="color: #800000">
  to </span>{<span style="color: #ff0000">
    background-position</span>:<span style="color: #0000ff"> 0 0</span>;
  }<span style="color: #800000">
}
@keyframes progress-bar-stripes </span>{<span style="color: #ff0000">
  from {
    background-position</span>:<span style="color: #0000ff"> 40px 0</span>;
  }<span style="color: #800000">
  to </span>{<span style="color: #ff0000">
    background-position</span>:<span style="color: #0000ff"> 0 0</span>;
  }<span style="color: #800000">
}</span>

Salin selepas log masuk

@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画 “progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效

调用动画对应的样式代码如下：

<span style="color: #800000">.progress.active .progress-bar </span>{<span style="color: #ff0000">
  -webkit-animation</span>:<span style="color: #0000ff"> progress-bar-stripes 2s linear infinite</span>;<span style="color: #ff0000">
  animation</span>:<span style="color: #0000ff"> progress-bar-stripes 2s linear infinite</span>;
}

Salin selepas log masuk

例子：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>动态条纹进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

Salin selepas log masuk

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:10%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span>

Salin selepas log masuk

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-striped progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Salin selepas log masuk

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

4 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7364

Tutorial Java

1628

Tutorial CakePHP

1353

Tutorial Laravel

1266

Tutorial PHP

1214

Tunjukkan Lagi

Related knowledge

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

See all articles