星空网 > 软件开发 > Java

第 11 章 进度条媒体对象和 Well 组件

学习要点:

1.Well 组件
2.进度条组件
3.媒体对象组件

主讲教师:李炎恢

本节课我们主要学习一下 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-success  progress-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='/images/loading.gif' data-original="img/small.png"  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='/images/loading.gif' data-original="img/small.png"  class="media-object">  </div></div>

//媒体对象列表

<ul class="media-list">  <li class="media">    //将每个 media 存放在 media-body 内后即可    ...代码较多,具体看视频  </li></ul>




原标题:第 11 章 进度条媒体对象和 Well 组件

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

如何在lazada卖东西:https://www.goluckyvip.com/tag/85286.html
lazada如何上架产品:https://www.goluckyvip.com/tag/85287.html
lazada入驻有什么要求:https://www.goluckyvip.com/tag/85288.html
入驻lazada有什么要求:https://www.goluckyvip.com/tag/85289.html
出口商:https://www.goluckyvip.com/tag/8529.html
什么是lazada:https://www.goluckyvip.com/tag/85291.html
如何从抖音上多挣钱?记住这12个字 :https://www.kjdsnews.com/a/1836445.html
连麦专家:2024年到底如何做小红书? :https://www.kjdsnews.com/a/1836446.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流