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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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
PHP Curl多线程原理实例详解
2013/11/06 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php curl发送请求实例方法
2019/08/01 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python基础教程之常用运算符
2014/08/29 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
毕业生多媒体设计求职信
2013/10/12 职场文书
质量负责人任命书
2014/06/06 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
总经理岗位职责范本
2015/04/01 职场文书
第一书记观后感
2015/06/08 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
《将心比心》教学反思
2016/02/23 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书