Bootstrap入门（二十一）组件15：警告框

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。

进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。

1.默认的进度条

2.带显示进度的进度条

3.情景进度条

4.带条纹的滚动条

5.两者结合/嵌套使用

先引入CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

为了方便截图和查看，我先加入一个style

        <style>body{margin: 10px 0;}</style>

下面的代码都放在一个容器div中

　　　 　<div class="container">...</div>

1.默认的进度条

假设是50%了，新建一个class为progress的div来承载进度条

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

效果

2.带显示进度的进度条

只是看图的话，有时候很难知道准确的进度情况，我们可以把他显示出来

添加代码

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

效果

3.情景进度条

有时候，低于50%是一个颜色（警告），高于50%又是另外一个颜色（快成功了），是情景的

“”（还有progress-bar-info progress-bar-danger等）

添加代码

　　　　　　  <div class="progress"><div class="progress-bar progress-bar-warning"  role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width:40%">40%</div></div><div class="progress"><div class="progress-bar progress-bar-success"  role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:90%">90%</div></div>

效果

4.带条纹的滚动条

有时候看上去有点单调，如果多个条纹就好看很多（IE 8不支持）

添加代码

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

效果，这是的确滚动起来的，如果不想动，只是要条纹，只需要把class中active去掉就可以了

5.两者结合/嵌套使用

添加代码，嵌套使用就可以了

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

效果：

或者也可以嵌套两个默认的样式，同样也是可以的

效果

转载于:https://www.cnblogs.com/hnnydxgjj/p/5888233.html

Bootstrap入门（二十一）组件15：警告框相关推荐

Bootstrap组件_警告框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
opencv函数findcontours_OpenCV系列之轮廓入门 | 二十一
目标了解轮廓是什么. 学习查找轮廓,绘制轮廓等. 你将看到以下功能:cv.findContours(),cv.drawContours() 什么是轮廓? 轮廓可以简单地解释为连接具有相同颜色或强度的 ...
OpenCV系列之轮廓入门 | 二十一
目标了解轮廓是什么. 学习查找轮廓,绘制轮廓等. 你将看到以下功能:cv.findContours(),cv.drawContours() 什么是轮廓? 轮廓可以简单地解释为连接具有相同颜色或强度的 ...
CarSim仿真快速入门(二十一)-CarSim: 车轮箭头动画和其他指示动画
CarSim2022中的动画是:车轮箭头和其他指标界面用于定义一组轮胎力或其他感兴趣的变量的视觉动画指标,这些指标在仿真车辆的每个车轮.轮胎或车轴上重复出现. 所有VehicleSim(VS)产品都包 ...
Bootstrap基础二十七多媒体对象（Media Object）
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
Bootstrap基础二网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
Bootstra 警告框
用于根据用户操作的上下文为用户提供灵活的提示消息,.alert样式为此提供了基础的操作样式. 一.默认警告框关闭按钮要确保设置button元素的属性值data-dismiss="alert ...
conan入门(二)：conan 服务配置-密码管理及策略
conan 服务配置密码管理及策略配置第一次以管理员身份(admin)使用默认密码(password)WEB登录入JFrog Artifactory后台时,系统就提示要求我修改密码,因为现有密码太 ...
conan入门(二十):封装只包含头文件(header_only)的库示例
conan: 封装只包含头文件(header_only)的库示例有的C/C++项目只包含头文件,不需要编译,对于这种情况如何封装为Conan的包呢? Conan官方文档 <Package sc ...

Bootstrap入门（二十一）组件15：警告框

Bootstrap入门（二十一）组件15：警告框相关推荐

最新文章

热门文章