Bootstrap 基本进度条

基本进度条

除了默认的蓝色进度条之外，Bootstrap还为进度条提供了两组情景样式类，用来设置进度条的颜色，以便在不同上下文中搭配合适的色彩。

一组情景类是 .progress-info、.progress-success、.progress-warning、.progress-danger，另一组情景类是 .bar-info、.bar-success、.bar-warning、.bar-danger，它们都分别用来创建蓝色、绿色、黄色或红色的进度条。

两组情景类得到的效果完全相同，只是 .progress-* 类要应用于进度条的容器，而 .bar-* 类要应用于进度条。如：

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

或：

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

效果如图 4‑57所示：

图4-57 Bootstrap进度条的颜色

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap 基本进度条相关推荐

Bootstrap 条纹进度条
条纹进度条只需给进度条的容器元素追加一个 .progress-striped 类,就可以创建出带条纹的进度条,并且不同颜色的进度条,可以显示不同的条纹: <div class="pr ...
bootstrap 滚动进度条_bootstrap实现动态进度条效果
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单保存中:{{length}}% PS: ...
bootstrap 滚动进度条_bootstrap动态进度条怎么搞
在本教程中,您将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前 ...
Bootstrap条纹进度条
条纹进度条只需给进度条的容器元素追加一个 .progress-bar-striped 类,就可以创建出带条纹的进度条.并且,这种进度条还能根据进度条的颜色,自动显示不同的条纹颜色: <div ...
Bootstrap创建进度条
进度条 Bootstrap提供了多种漂亮的进度条,可以使用进度条来表示正在加载或动作正在执行中的状态.进度条本身只是一个静态元素,要让它拥有交互能力,还需要JavaScript代码的配合. 创建进度条 ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. <div class="well">Bootstrap</div& ...
bootstrap与jQuery结合的动态进度条
此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...
html——自定义进度条、bootstrap框架及layu框架进度条的使用及对比
先展示一下效果: 动态效果: 1. 第一个是自己写的一个进度条,纯js写的,样式不太好看,相关的函数进行了js的封装,且适配性不太好,不推荐,只是作为个人的尝试. 2. 第二个是bootstrap的进 ...
java httpclient 进度条_SpringBoot如何实现一个实时更新的进度条的示例代码
前言博主近期接到一个任务,大概内容是:导入excel表格批量修改状态,期间如果发生错误则所有数据不成功,为了防止重复提交,做一个类似进度条的东东. 那么下面我会结合实际业务对这个功能进行分析和记录. ...

Bootstrap 基本进度条

基本进度条

Bootstrap 基本进度条相关推荐

最新文章

热门文章