Bootstrap媒体对象的实现

.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;
}

<h1>默认媒体对象</h1>
<div class="media">
<a href="#" class="pull-right">
<img class="media-object" src="/UploadFiles/2021-04-02/1.jpg">

 
媒体对象的嵌套
bootstrap媒体对象嵌套，只需将另一个媒体对象结构放在媒体对象的主体（.media-body）中。下面来看看媒体对象嵌套的运用


<h1>默认媒体对象的嵌套</h1>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="/UploadFiles/2021-04-02/3.jpg">

效果如下：





媒体对象列表
bootstrap框架提供了一个媒体对象列表展示的效果，在写结构的时候可以使用标签ul，并在标签ul上添加类名.media-list,在标签li上使用类.media
例如：


<h1>媒体对象列表</h1>
<ul class="media-list">
<li class="media">
<a href="#" class="pull-left">
<img class="media-object" src="/UploadFiles/2021-04-02/1.jpg">

效果如下：


                                
                                

                                    bootstrap媒体对象 
                                

                                    标签：
                                        
bootstrap媒体对象