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的new操作符(一)
Dec 25 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
原生JS实现拖拽效果
Dec 04 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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
PHP实现递归的三种方法
2020/07/04 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python字符串及文本模式方法详解
2020/09/10 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
音乐专业应届生教师求职信
2013/11/04 职场文书
函授药学自我鉴定
2014/02/07 职场文书
《月迹》教学反思
2014/02/19 职场文书
追悼会答谢词
2015/01/05 职场文书
教师聘用意向书
2015/05/11 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js