首页 > 代码库 > 第 11 章 进度条媒体对象和 Well 组件
第 11 章 进度条媒体对象和 Well 组件
本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件、进度条组件、媒体对象组件。一.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>//媒体对象列表<ul class="media-list"><li class="media">//将每个 media 存放在 media-body 内后即可...代码较多,具体看视频</li></ul>
第 11 章 进度条媒体对象和 Well 组件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。