Bootstrap媒体对象
前面的话
在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:;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top:;
}
.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="#">
<img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">小火柴的蓝色理想</h4>
<div>好的代码像粥一样,都是用时间熬出来的</div>
</div>
</div>
嵌套
在评论系统中,经常会有媒体对象嵌套的需求。在Bootstrap框架中的媒体对象也具备这样的功能,只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”
<div class="media">
<a class="media-left" href="#">
<img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">小火柴的蓝色理想</h4>
<div>好的代码像粥一样,都是用时间熬出来的</div>
<div class="media">
<a class="pull-left" href="#">
<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="#">
<img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/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="#">
<img class="media-object" width=100 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">小火柴的蓝色理想</h4>
<div>蓝色理想衰落了,前端却欣欣向荣起来</div>
</div>
</div>
对齐方式
图片或其他媒体类型可以顶部、中部或底部对齐。默认顶部对齐。通过.media-middle或.media-bottom来设置
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
<div class="media">
<a class="media-left" href="#">
<img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/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="#">
<img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/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="#">
<img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">小火柴的蓝色理想</h4>
<div>蓝色理想衰落了,前端却欣欣向荣起来</div>
</div>
</div>
媒体对象列表
媒体对象的嵌套仅是媒体对象中一个简单应用效果之一,在很多时候,我们还会碰到一个列表,每个列表项都和媒体对象长得差不多。Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”
媒体对象列表,在样式上也并没有做过多的特殊处理,只是把列表的左间距置0以及去掉了项目列表符号
.media-list {
padding-left:;
list-style: none;
}
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/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="#">
<img class="media-object" width=30 src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/huochai.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">小火柴的蓝色理想</h4>
<div>好的代码像粥一样,都是用时间熬出来的</div>
</div>
</li>
</ul>
Bootstrap媒体对象的更多相关文章
- 详解Bootstrap媒体对象
在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.l ...
- 测开之路一百一十三:bootstrap媒体对象
实现效果,左边是图片或者其他媒体,右边是对应的描述 引入bootstrap和jquery标签 class="media" 数量多一些看着就会很规整 <!DOCTYPE htm ...
- 移动web——bootstrap媒体对象
基本模板 1.这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等) <div class="media"> <div class ...
- Bootstrap 媒体对象 列表组
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- Bootstrap 进度条媒体对象和 Well 组件
一.Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
- Bootstrap入门(十四)组件8:媒体对象
Bootstrap入门(十四)组件8:媒体对象 这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等). 1.基本样式 2. ...
- Bootstrap(10) 进度条媒体对象和 Well 组件
一.Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...
- 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
- Bootstrap历练实例:嵌套的媒体对象
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- 编程实现类似Linux下cp功能
MyCP的代码实现 一.题目要求: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bi ...
- Java并发(三)线程池原理
Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序都可以使用线程池.在开发过程中,合理地使用线程池能够带来3个好处. 1. 降低资源消耗.通过重复利用已创建的线程降低线程 ...
- Tensorflow-hub[例子解析1]
0. 引言 Tensorflow于1.7之后推出了tensorflow hub,其是一个适合于迁移学习的部分,主要通过将tensorflow的训练好的模型进行模块划分,并可以再次加以利用.不过介于推出 ...
- day89
跨域问题 同源策略(Same origin policy) 是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...
- ORA-14551: 无法在查询中执行 DML 操作
编写了一个oracle函数,函数体内实现一系列数据库的逻辑处理,涉及到数据的增删等操作,返回NCLOB类型. 然后通过查询方式调用函数: SELECT PKG.MY_FUN('A') FROM DUA ...
- jQuery webcam plugin
jQuery webcam plugin The jQuery webcam plugin is a transparent layer to communicate with a camera di ...
- Kafka:Configured broker.id 2 doesn't match stored broker.id 0 in meta.properties.
在安装Kafka集群的时候,碰到这个问题. 我们知道在搭建Kafka集群的时候,我们需要设置broker.id,以作为当前服务器在整个集群的唯一标志. 网上搜查资料是说,log.dirs目录下的met ...
- Scala学习(五)---Scala中的类
Scala中的类 摘要: 在本篇中,你将会学习如何用Scala实现类.如果你了解Java或C++中的类,你不会觉得这有多难,并且你会很享受Scala更加精简的表示法带来的便利.本篇的要点包括: 1. ...
- [UWP 自定义控件]了解模板化控件(6):使用附加属性
1. 基本需求 之前的ContentView2添加了PointerOver等效果,和TextBox等本来就有Header的控件放在一起反而变得鹤立鸡群. 为了解决这个问题,这次把ContentView ...
- 当给DataGrid的Itemssoure属性赋值引起TabControl_SelectionChanged事件
在TabControl的TabItem下布局了DataGrid控件时,当给dg.ItemsSource 赋值时会触发父控件的TabControl_SelectionChanged事件; 类似问题原因可 ...