Bootstrap每天必学之媒体对象

<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每天必学之面板
            
下一篇：javascript针对cookie的基本操作实例详解
        
        
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。