Bootstrap每天必学之媒体对象


Posted in Javascript onNovember 30, 2015

在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示:

Bootstrap每天必学之媒体对象

我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式,可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。其对应的版本文件:

☑ LESS版本:对应的源文件是media.less

☑ Sass版本:对应的源文件是_media.scss

☑ 编译后版本:对应bootstrap.css文件第4792行~第4819行

1、媒体对象?默认媒体对象

媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分:

☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容

☑ 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片

☑ 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容

☑ 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选

如下图所示:

Bootstrap每天必学之媒体对象

除了上面四个部分之外,在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。

在具体使用中如下所示:

<div class="media">
 <a class="pull-left" href="#">
  <img class="media-object" src="imgs/1.jpg" alt="...">
 </a>
 <div class="media-body">
  <h4 class="media-heading">系列:十天精通CSS3</h4>
  <div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
 </div>
</div>

运行效果如下:

Bootstrap每天必学之媒体对象

原理分析:

媒体对象样式相对来说比较简单,只是设置他们之间的间距,如下所示:

/bootstrap.css文件第4792行~4815行/

.media,
.media-body {
 overflow: hidden;
 zoom: 1;
}
.media,
.media .media {
 margin-top: 15px;
}
.media:first-child {
 margin-top: 0;
}
.media-object {
 display: block;
}
.media-heading {
 margin: 0 0 5px;
}
.media > .pull-left {
 margin-right: 10px;
}
.media > .pull-right {
 margin-left: 10px;
}

2、媒体对象?媒体对象的嵌套

在评论系统中,常常能看到下图的效果:

Bootstrap每天必学之媒体对象

从外往里看,这里有三个媒体对象,只不过是一个嵌套在另一个的里面。那么在Bootstrap框架中的媒体对象也具备这样的功能,只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”,如下所示:

<div class="media">
 <a class="pull-left" href="#">
  <img class="media-object" src="…" alt="...">
 </a>
 <div class="media-body">
  <h4 class="media-heading">Media Heading</h4>
  <div>…</div>
  <div class="media">
   <a class="pull-left" href="#">
    <img class="media-object" src="…" alt="...">
   </a>
   <div class="media-body">
    <h4 class="media-heading">Media Heading</h4>
    <div>…</div>
    <div class="media">
     <a class="pull-left" href="#">
      <img class="media-object" src="…" alt="...">
     </a>
     <div class="media-body">
      <h4 class="media-heading">Media Heading</h4>
      <div>...</div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

在确保你的结构没有嵌套错的情况下,能直接看到下图这样的效果:

Bootstrap每天必学之媒体对象

3、媒体对象?媒体对象列表

媒体对象的嵌套仅是媒体对象中一个简单应用效果之一,在很多时候,我们还会碰到一个列表,每个列表项都和媒体对象长得差不多,同样用评论系统来说事:

Bootstrap每天必学之媒体对象

使用方法:

针对上图的媒体对象列表效果,Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”,示例代码如下:

<ul class="media-list">
 <li class="media">
  <a class="pull-left" href="#">
   <img class="media-object" src=" " alt="...">
  </a>
  <div class="media-body">
   <h4 class="media-heading">Media Header</h4>
   <div>…</div>
  </div>
 </li>
 <li class="media">…</li>
 <li class="media">…</li>
</ul>

运行效果如下:

Bootstrap每天必学之媒体对象

原理分析:

媒体对象列表,在样式上也并没有做过多的特殊处理,只是把列表的左间距置0以及去掉了项目列表符号:

/bootstrap.css文件第4816行~第4819行/

.media-list {
 padding-left: 0;
 list-style: none;
}

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,帮助大家学习Bootstrap媒体对象,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript delete 引用类型对象
Nov 01 Javascript
jquery 模板的应用示例
Nov 12 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
页面点击小红心js实现代码
May 26 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 #Javascript
javascript闭包(Closure)用法实例简析
Nov 30 #Javascript
详解JavaScript的流程控制语句
Nov 30 #Javascript
详解JavaScript的表达式与运算符
Nov 30 #Javascript
Bootstrap每天必学之进度条
Nov 30 #Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 #Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 #Javascript
You might like
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python入门教程之识别验证码
2017/03/04 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
寒假思想汇报
2014/01/10 职场文书
二年级体育教学反思
2014/01/15 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang