老生常谈Bootstrap媒体对象


Posted in Javascript onJuly 06, 2017

前面的话

在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列。常常把这样的效果称为媒体对象。可以说它是一种抽象的样式,可以用来构建不同类型的组件。本文将详细介绍Bootstrap媒体对象

默认样式

媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分:

☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容

☑ 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片

☑ 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容

☑ 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选

除了上面四个部分之外,在Bootstrap框架中还常常使用“media-left”或者“media-right”来控制媒体对象中的对象浮动方式

[注意]在 html 结构中, .media-right 应当放在 .media-body 的后面

媒体对象样式相对来说比较简单,只是设置他们之间的间距

.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-left {
 margin-right: 10px;
}
.media-right {
 margin-left: 10px;
}
<div class="media">
  <a class="media-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=100 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>好的代码像粥一样,都是用时间熬出来的</div>
  </div>
</div>

老生常谈Bootstrap媒体对象

嵌套

在评论系统中,经常会有媒体对象嵌套的需求。在Bootstrap框架中的媒体对象也具备这样的功能,只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”

<div class="media">
  <a class="media-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=100 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>好的代码像粥一样,都是用时间熬出来的</div>
    <div class="media">
      <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
        <img class="media-object" src="http://via.placeholder.com/100x100" alt="...">
      </a>
      <div class="media-body">
        <h4 class="media-heading">我是小火柴</h4>
        <div>好巧啊,我也叫小火柴</div>
        <div class="media">
          <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
            <img class="media-object" width=100 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
          </a>
          <div class="media-body">
            <h4 class="media-heading">小火柴的蓝色理想</h4>
            <div>是的</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="media">
  <a class="media-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=100 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>蓝色理想衰落了,前端却欣欣向荣起来</div>
  </div>
</div>

老生常谈Bootstrap媒体对象

对齐方式

图片或其他媒体类型可以顶部、中部或底部对齐。默认顶部对齐。通过.media-middle或.media-bottom来设置

.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
<div class="media">
  <a class="media-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=30 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>蓝色理想衰落了,前端却欣欣向荣起来</div>
  </div>
</div>
<div class="media">
  <a class="media-left media-middle" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=30 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>蓝色理想衰落了,前端却欣欣向荣起来</div>
  </div>
</div>
<div class="media">
  <a class="media-left media-bottom" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=30 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>蓝色理想衰落了,前端却欣欣向荣起来</div>
  </div>
</div>

老生常谈Bootstrap媒体对象

媒体对象列表

媒体对象的嵌套仅是媒体对象中一个简单应用效果之一,在很多时候,我们还会碰到一个列表,每个列表项都和媒体对象长得差不多。Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”

媒体对象列表,在样式上也并没有做过多的特殊处理,只是把列表的左间距置0以及去掉了项目列表符号

.media-list {
 padding-left: 0;
 list-style: none;
}
<ul class="media-list">
 <li class="media">
  <a class="media-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=30 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>蓝色理想衰落了,前端却欣欣向荣起来</div>
  </div>
 </li>
 <li class="media">
  <a class="media-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img class="media-object" width=30 src="//img.jbzj.com/file_images/article/201707/huochai.jpg" alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">小火柴的蓝色理想</h4>
    <div>好的代码像粥一样,都是用时间熬出来的</div>
  </div>
 </li> 
</ul>

老生常谈Bootstrap媒体对象

以上这篇老生常谈Bootstrap媒体对象就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
整理一下常见的IE错误
Nov 18 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 #Javascript
react系列从零开始_简单谈谈react
Jul 06 #Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 #Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 #Javascript
Js自定义多选框效果的实例代码
Jul 05 #Javascript
You might like
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
一个基于PDO的数据库操作类
2011/03/24 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
jsonp原理及使用
2013/10/28 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python实现名片管理系统项目
2019/04/26 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
老师推荐信
2013/10/28 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
说明书怎么写
2014/05/06 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android