<div class="media">
 <a class="pull-left" href="#">
  <img class="media-object" src="/UploadFiles/2021-04-02/1.jpg">

运行效果如下： 



原理分析：
媒体对象样式相对来说比较简单，只是设置他们之间的间距，如下所示：
/bootstrap.css文件第4792行～4815行/


.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 > .pull-left {
 margin-right: 10px;
}
.media > .pull-right {
 margin-left: 10px;
}



2、媒体对象–媒体对象的嵌套
在评论系统中，常常能看到下图的效果：

从外往里看，这里有三个媒体对象，只不过是一个嵌套在另一个的里面。那么在Bootstrap框架中的媒体对象也具备这样的功能，只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”，如下所示：


<div class="media">
 <a class="pull-left" href="#">
  <img class="media-object" src="/UploadFiles/2021-04-02/…">

在确保你的结构没有嵌套错的情况下，能直接看到下图这样的效果：

3、媒体对象–媒体对象列表
媒体对象的嵌套仅是媒体对象中一个简单应用效果之一，在很多时候，我们还会碰到一个列表，每个列表项都和媒体对象长得差不多，同样用评论系统来说事：

使用方法：
针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”，示例代码如下：


<ul class="media-list">
 <li class="media">
  <a class="pull-left" href="#">
   <img class="media-object" src="/UploadFiles/2021-04-02/ ">

运行效果如下：

原理分析：
媒体对象列表，在样式上也并没有做过多的特殊处理，只是把列表的左间距置０以及去掉了项目列表符号：
/bootstrap.css文件第4816行～第4819行/


.media-list {
 padding-left: 0;
 list-style: none;
}



如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，帮助大家学习Bootstrap媒体对象，希望对大家的学习有所帮助。

                                
                                

                                    bootstrap,媒体对象 
                                

                                    标签：
                                        
bootstrap,媒体对象
                                     

                                
无为清净楼资源网 Design By www.qnjia.com