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

Home

Web Front-end

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>;
}

<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>;
}

例子：

<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>

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>

彩色进度条

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

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>;
}

使用方法：

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

例子：

<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>

效果如下：

条纹进度条

条纹进度条采用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>;
}

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

<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>;
}

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

<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>

动态条纹进度条

在进度条.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>

@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>;
}

例子：

<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>

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

层叠进度条：

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

例子：

<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>

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“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>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

See all articles