bootstrap-媒体对象-对齐
2017-02-15 15:07
337 查看
说明
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐示例
<!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>输出
相关文章推荐
- Bootstrap 媒体对象
- bootstrap-媒体对象列表
- Bootstrap学习笔记之进度条、媒体对象实例详解
- bootstrap之媒体对象组件
- Bootstrap媒体对象的实现
- bootstrap中的媒体对象
- Bootstrap组件之媒体对象
- bootstrap之媒体对象组件
- Bootstrap历练实例:默认的媒体对象
- Bootstrap CSS——媒体对象
- Bootstrap3.0(进度条、媒体对象、列表组、面板)
- Bootstrap历练实例:嵌套的媒体对象
- 老生常谈Bootstrap媒体对象
- bootstrap进度条媒体对象和Well组件
- bootstrap学习24---媒体对象
- Bootstrap3.0学习第十六轮(进度条、媒体对象、列表组、面板)
- BootStrap 媒体对象
- Bootstrap每天必学之媒体对象
- Bootstrap笔记13—进度条、媒体对象
- 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件