Bootstrap创建进度条

进度条

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

创建进度条

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

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

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

图3-75 进度条

关于作者

歪脖先生，十五年以上软件开发经验，酷爱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还为进度条提供了两组情景样式类,用来设置进度条的颜色,以便在不同上下文中搭配合适的色彩. 一组情景类是 .progress-info..prog ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. <div class="well">Bootstrap</div& ...
android如何创建进度条,Android控件ProgressBar--自定义进度条及源码分析
这里用SeekBar做演示,SeekBar继承自ProgressBar,拥有其一切特性,并且其支持拖动以及DPAD左右键的进退.一起学习吧! 一.自定义SeekBar进度条样式原生SeekBar效果 ...
Python界面编程第十一课：Pyside2 (Qt For Python)创建进度条
QProgressBar 是什么? 进度条用于向用户提供操作进度的指示,并提示用户应用程序仍在运行. 进度条使用了范围的概念.通过指定最小和最大值来设定范围,之后会按百分比来显示范围.百分比是通过(v ...
【Python】tqdm创建进度条
1.Introduction 每当代码中涉及 for 循环时,总想显示一个进度条,虽然用处不大,但是帅就完事了.之前在 Matlab 里实现过这个功能,这次在 Python 中试试~ 2.Materi ...

Bootstrap创建进度条

进度条

创建进度条

Bootstrap创建进度条相关推荐

最新文章

热门文章