|
******************媒体对象********************************************* * *这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右 *对齐的图片（就像blog内容或Tweets等）。 * *在一个内容块的左边或右边浮动一个媒体对象（图像，视频，音频） * *默认的媒体样式是class="media" *在文字左侧还是右侧的样式是：pull-right,pull-left *正文部分的样式是：media-body ******************************************************************** ******************媒体列表********************************************* * *媒体列表，就是在默认的媒体样式外面加一个class="media-list"样式 * *默认的媒体样式是class="media" ******************************************************************** --------------------------------------------------------------------------------------------------------------------- 效果图：  --------------------------------------------------------------------------------------------------------------------- 源码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> <title>Navbar Template for Bootstrap</title> <link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"></link> </head> <body> <!-- ******************媒体对象********************************************* * *这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右 *对齐的图片（就像blog内容或Tweets等）。 * *在一个内容块的左边或右边浮动一个媒体对象（图像，视频，音频） * *默认的媒体样式是class="media" *在文字左侧还是右侧的样式是：pull-right,pull-left *正文部分的样式是：media-body ******************************************************************** --> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="../../images/apple-touch-icon-144-precomposed.png" alt="这是。。。图片"/> </a> <div class="media-body"> <h4 class="media-heading"><b>默认媒体对象</b></h4> <div>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> <br/> <!-- ******************媒体列表********************************************* * *这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右 *对齐的图片（就像blog内容或Tweets等）。 * *在一个内容块的左边或右边浮动一个媒体对象（图像，视频，音频） * *媒体列表，就是在默认的媒体样式外面加一个class="media-list"样式 * *默认的媒体样式是class="media" *在文字左侧还是右侧的样式是：pull-right,pull-left *正文部分的样式是：media-body ******************************************************************** --> <ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img width="64px" height="64px" class="media-object" src="../../images/favicon.png" alt="这是。。。图片"/> </a> <div class="media-body"> <h4><b>媒体列表</b></h4> <p>.CrasCras siCras sit amet nibh libero, in gravida nulla.Cras sit amet nibh libero, in gravida nul</p> </div> <ul> <li class="media"> <a class="pull-left" href="#"> <img width="64px" height="64px" class="media-object" src="../../images/apple-touch-icon-144-precomposed.png" alt="这是。。。图片"/> </a> <div class="media-body"> <h4>Nested media heading</h4> <p>.CrasCras siCras sit amet nibh libero, in gravida nulla.Cras sit amet nibh libero, in gravida nul</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img width="64px" height="64px" class="media-object" src="../../images/apple-touch-icon-144-precomposed.png" alt="这是。。。图片"/> </a> <div class="media-body"> <h4>Nested media heading</h4> <p>.CrasCras siCras sit amet nibh libero, in gravida nulla.Cras sit amet nibh libero, in gravida nul</p> </div> <ul> <li class="media"> <a class="pull-left" href="#"> <img width="64px" height="64px" class="media-object" src="../../images/apple-touch-icon-144-precomposed.png" alt="这是。。。图片"/> </a> <div class="media-body"> <h4>Nested media heading</h4> <p>.CrasCras siCras sit amet nibh libero, in gravida nulla.Cras sit amet nibh libero, in gravida nul</p> </div> </li> <li class="media"> <a class="pull-left" href="#"> <img width="64px" height="64px" class="media-object" src="../../images/apple-touch-icon-144-precomposed.png" alt="这是。。。图片"/> </a> <div class="media-body"> <h4>Nested media heading</h4> <p>.CrasCras siCras sit amet nibh libero, in gravida nulla.Cras sit amet nibh libero, in gravida nulla.t amet nibh lib</p> </div> </li> </ul> </li> </ul> </li> </ul> </body> <script type="text/javascript" src="../../js/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> </html> |
|
|
来自： I_T_馆 > 《bootstrap》
