Bootstrap 进度条

进度条

Bootstrap提供了多种漂亮的进度条，可以使用进度条来表示加载、跳转等正在执行中的状态。进度条本身只是一个静态元素，要让它拥有交互能力，还需要JavaScript代码的配合。

基本进度条

进度条由嵌套的两层结构定义：外层结构用于创建进度条的容器，使用 .progress 类定义；内层结构用于创建进度条，使用 .bar 类定义，并通过CSS的 width 属性值来设置进度的百分比。如：

<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>

默认情况下，进度条容器的背景为浅灰色，进度条本身为蓝色，并带有垂直渐变。效果如图 4‑56所示：

图4-56 Bootstrap进度条组件

关于作者

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

Bootstrap 进度条相关推荐

ajax bootstrap 进度条,Bootstrap进度条与AJAX后端数据传递结合使用实例详解
很多时候,我们执行页面上某个URL请求的时候,需要有等待的时间.如果是直接的页面跳转,浏览器会有缓冲进度展示,但是如果是AJAX,我觉得应该自己加上进度条,等待数据全部接收到之后,进度条消失,展示页面 ...
Bootstrap进度条
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果. Internet Explorer 9 及之前的版本号和旧版的 Firefox 不支持该特性, Opera 12 不支持动画. 默认 ...
Bootstrap 进度条堆叠
进度条堆叠只需将多个进度条放到同一个 .progress 的容器中,即可以让多个进度条堆叠在一起显示.如: <div class="progress"> < ...
第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
Bootstrap进度条堆叠
进度条堆叠 Bootstrap3中,只需将多个进度条放到同一个 .progress 的容器中,即可以让多个进度条堆叠在一起,使它们呈现堆叠的效果.如: <div class="prog ...
Bootstrap进度条的颜色
进度条的颜色除了默认的蓝色进度条之外,Bootstrap还为进度条提供了一组情景样式类,包括 .progress-bar-success..progress-bar-info..progress-b ...
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
bootstrap进度条媒体对象和Well组件
学习笔记一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 ...
php 做更新进度条,PHP exec()后更新Bootstrap进度条
我使用PHP来运行一个python脚本,并且在脚本执行后需要更新一个进度条.进度条更新后,将执行另一个脚本,依此类推. 这里是我的代码如此的票价.我试图用JavaScript来实现.它没有解决 But ...

Bootstrap 进度条

进度条

基本进度条

Bootstrap 进度条相关推荐

最新文章

热门文章