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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
JavaScript实现更换背景图片
Oct 18 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
python中 logging的使用详解
2017/10/25 Python
python中的for循环
2018/09/28 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
奥巴马演讲稿
2014/01/08 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL