bootstrap-媒体对象-对齐

说明

图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐

示例

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><div class="container"><div class="media"><div class="media-left media-top"><a href="#"><img class="media-object" src="/static/img/qq.png" alt="..."></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left media-middle"><a href="#"><img class="media-object" src="/static/img/qq.png" alt="..."></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left media-bottom"><a href="#"><img class="media-object" src="/static/img/qq.png" alt="..."></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></body>
</html>

输出

转载于:https://blog.51cto.com/suyanzhu/1898072

bootstrap-媒体对象-对齐相关推荐

Bootstrap 媒体对象
媒体对象媒体对象是一类具有特殊版式的组件,用来设计图文混排的效果,它们多是由一幅向左或向右浮动的图像和一些文本构成. Bootstrap提供了两种类型的媒体对象:媒体(.media)和媒体列表(.m ...
Bootstrap媒体对象
媒体媒体是一类具有特殊版式的组件,用来设计图文混排的效果,通常由一个向左或向右浮动的媒体对象(如,图像.视频.音频等)和一个媒体内容块构成. 1.创建媒体在HTML结构中,一个媒体组件由 .med ...
Bootstrap媒体对象列表
媒体列表媒体列表,就是媒体的列表.由于媒体列表可以嵌套,因此很适合展示评论或其他需要以列表展示的信息. 媒体列表由 .media-list 的容器创建,其中包含一个或多个 .media.由于它是列表 ...
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
1 缩略图缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息. Bootstrap框架将这一部独立成一个模块组件.并通过&q ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. <div class="well">Bootstrap</div& ...
第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
bootstrap进度条媒体对象和Well组件
学习笔记一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 ...
html5媒体对象居中,媒体对象 - Media Objects
怎样创建一个媒体对象 ? 一个媒体对象由以下及部分组成父容器 .media 媒体部分 .media-left 或者 .media-right,其内部包含图像使用同时设置 .media-object ...
进度条媒体对象和Well组件
一．Well组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well">Bootstrap</div> //有lg和sm两种可 ...

bootstrap-媒体对象-对齐

bootstrap-媒体对象-对齐相关推荐

最新文章

热门文章