社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 html教學 详解Bootstrap进度条组件 - 洛水三千

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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>
登入後複製
image

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>
登入後複製
image

 

彩色进度条

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

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>
登入後複製

效果如下：

image

 

条纹进度条

条纹进度条采用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>
登入後複製
image

 

动态条纹进度条

在进度条.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>
登入後複製

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

 

image

 

层叠进度条：

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

例子：

<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>
登入後複製
image

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“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>
登入後複製
image
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

<🎜>：種植花園 - 完整的突變指南
3 週前 By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前 By DDD
北端：融合系統，解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
藍王子：如何到達地下室
1 個月前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1268
29
C# 教程
1248
24
顯示更多
Related knowledge
了解HTML，CSS和JavaScript：初學者指南 了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML：結構，CSS：樣式，JavaScript：行為 HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：建立網頁的結構 HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML的角色：構建Web內容 HTML的角色：構建Web內容 Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML：是編程語言還是其他？ HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles