bootstrap进度条媒体对象和Well组件
来源:互联网 发布:简述什么是波士顿矩阵 编辑:程序博客网 时间:2024/06/10 15:01
学习笔记
一.Well 组件
这个组件可以实现简单的嵌入效果。
//嵌入效果
<div class="well">
Bootstrap
</div>
//有lg 和sm 两种可选值
<div class="well well-lg">
Bootstrap
</div>
二.进度条组件
进度条组件为当前工作流程或动作提供时时反馈。
//基本进度条
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
//最低值进度条
<div class="progress">
<div class="progress-bar" style="min-width:20px">0%</div>
</div>
//结合情景的进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="min-width:20px;width:60%">60%</div>
</div>
//条纹状,IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-successprogress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
//动画效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-stripedactive" style="min-width:20px;width:60%">60%</div>
</div>
//堆叠效果
<div class="progress">
<div class="progress-bar progress-bar-success"style="min-width:20px;width:35%">35%</div>
<div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%">20%</div>
<div class="progress-bar progress-bar-danger" style="min-width:20px;width:10%">10%</div>
</div>
效果图:
三.媒体对象组件
媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。
//基本实例
<div class="media">
<div class="media-left">
<img src="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老
的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17
种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;
脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
</div>
//媒体对象列表
其实就是嵌套媒体对象
<div class="media">
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老
的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17
种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;
脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
<div class="media-right">
<img src="img/small.png" alt="" class="media-object">
</div>
</div>
<div class="media">
<div class="media-left">
<img src="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老
的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17
</p>
<ul class="media-list">
<li class="media">
<div class="media-left">
<img src="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老
</p>
</div>
</li>
</ul>
</div>
</div>
- Bootstrap进度条媒体对象和Well组件
- bootstrap进度条媒体对象和Well组件
- Bootstrap组件学习笔记(六)——进度条和媒体对象
- 媒体对象bootstrap组件
- Bootstrap组件之媒体对象
- bootstrap之媒体对象组件
- Bootstrap 学习之(十五)------ 媒体对象,well
- Bootstrap笔记13—进度条、媒体对象
- 3.8Bootstrap学习组件篇之进度条、媒体对象、列表组、面板
- Bootstrap组件之well、标签
- BootStrap媒体对象
- bootstrap中的媒体对象
- BootStrap 媒体对象
- bootstrap-媒体对象
- Bootstrap媒体对象
- Bootstrap 媒体对象
- Bootstrap媒体对象
- bootstrap媒体对象
- zend studio7.2.1+破解教程
- 破解PowerDesigner16.5
- 2016腾讯笔试
- html5 css 写九九乘法表加动画
- HDU3336 next数组性质
- bootstrap进度条媒体对象和Well组件
- abstract
- SQL优化:一篇文章说清楚Oracle Hint的正确使用姿势
- Spring整合Ehcache管理缓存
- java运算符优先级记忆口诀
- IK分词原理深度解析
- uva 10763
- JAVA 多态、继承、super关键字 day9
- PDF页面大小不统一