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 动态生成方法的例子
Jul 22 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
详解VUE中的插值( Interpolation)语法
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
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
VueJS全面解析
2016/11/10 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
在校生自我鉴定
2014/01/23 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
大学应届生的自我评价
2014/03/06 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
运动会新闻报道稿
2015/07/22 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Python中json.dumps()函数的使用解析
2021/05/17 Python
pytorch fine-tune 预训练的模型操作
2021/06/03 Python