Bootstrap学习笔记之进度条、媒体对象实例详解


Posted in Javascript onMarch 09, 2017

1.基础进度条

Bootstrap学习笔记之进度条、媒体对象实例详解 

要写在<div class="progress"></div>里面。

<div class="col-md-6">
 <div class="progress">
 <div class="progress-bar" style="width:30%;"></div>
 </div>
</div>

2.多彩进度条

Bootstrap学习笔记之进度条、媒体对象实例详解

<div class="col-md-6">
 <div class="progress">
 <div class="progress-bar" style="width:30%;"></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-info" style="width:50%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-warning" style="width:60%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width:70%;"></div>
 </div>
</div>

3.条纹状进度条

Bootstrap学习笔记之进度条、媒体对象实例详解

在类progress基础上添加类progress-striped如下:

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

4. 进度条动画样式

Bootstrap学习笔记之进度条、媒体对象实例详解

给进度条添加类active,如下:

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

5.堆叠式进度条

Bootstrap学习笔记之进度条、媒体对象实例详解

都写在一个progress内,如下:

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width:10%;"></div>
 <div class="progress-bar progress-bar-warning" style="width:20%;"></div>
 <div class="progress-bar progress-bar-info" style="width:30%;"></div>
</div>

6.媒体对象

Bootstrap学习笔记之进度条、媒体对象实例详解

媒体对象就是图文混排。左边可以是图片、视频。右边是对其描述。

<div class="col-md-6">
 <div class="media">
 <div class="media-left media-middle">
 <a href="#" rel="external nofollow" >
  <img class="media-object" src="img/02.jpg" alt="">
 </a>
 </div>
 <div class="media-body">
 <h2 class="media-heading">我是标题</h2>
 <p>这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容</p>
 </div>
 </div>
 </div>

以上所述是小编给大家介绍的Bootstrap进度条、媒体对象实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 调用父窗口的具体实现代码
Jul 15 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Vue监听数组变化源码解析
Mar 09 #Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 #Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 #Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
js实现显示手机号码效果
Mar 09 #Javascript
You might like
php通过session防url攻击方法
2014/12/10 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python FFT合成波形的实例
2019/12/04 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
文明教师事迹材料
2014/01/16 职场文书
导师对论文的学术评语
2015/01/04 职场文书
胡桃夹子观后感
2015/06/11 职场文书
中学生运动会广播稿
2015/08/19 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书