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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
js选项卡的制作方法
Jan 23 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
原生js简单实现放大镜特效
May 16 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
微信小程序实现上拉加载功能
Nov 20 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 在线打包_支持子目录
2008/06/28 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
python提取字典key列表的方法
2015/07/11 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Django model select的多种用法详解
2019/07/16 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
简述 Python 的类和对象
2020/08/21 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
python中pyqtgraph知识点总结
2021/01/26 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
客服专员岗位职责范本
2013/11/29 职场文书
签约仪式主持词
2014/03/19 职场文书
大学生就业意向书范文
2014/04/01 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL