章节
问答
课签
笔记
评论
占位
占位

进度条--彩色进度条

Bootstrap框架中的进度条和警告信息框一样,为了能给用户一个更好的体验,也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条,其主要包括以下四种:

  ☑ progress-bar-info:表示信息进度条,进度条颜色为蓝色

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

  ☑ progress-bar-warning:表示警告进度条,进度条颜色为黄色

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

使用方法:

具体使用就非常简单了,只需要在基础的进度上增加对应的类名。如:

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

运行效果如下:

实现原理:

彩色进度条与基本进度条相比,就是进度条颜色做了一定的变化,其对应的样式代码如下:

/*bootstrap.css文件第4548行~第4550行*/
.progress-bar-success {
  background-color: #5cb85c;
}
/*bootstrap.css文件第4555行~第4557行*/
.progress-bar-info {
  background-color: #5bc0de;
}
/*bootstrap.css文件第4562行~第4564行*/
.progress-bar-warning {
  background-color: #f0ad4e;
}
/*bootstrap.css文件第4569行~第4571行*/
.progress-bar-danger {
  background-color: #d9534f;
}

任务

我来试试:在右侧代码任务部分补充代码,以实现“信息”、“警告”、“错误”、“成功”进度条效果。

效果图如下:

?不会了怎么办

参考代码如下:

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

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?