Bootstrap多媒体对象

柔情只为你懂 2022-08-23 08:50 340阅读 0赞

.media 允许将媒体对象里的多媒体（图像，视频，音频）浮动到内容块的左边或者右边
    .media-list:各项内容是武学列表的一部分，可以使用该class。用于评论列表和文章列表

![这里写图片描述][20160613093208792]

<div class="media">
       <a class="pull-left" href="#">
          <img class="media-object" src="../images/1.jpg" alt="媒体对象">//图片为向左浮动
       </a>//多媒体对象
       <div class="media-body">//多媒体主体部分
          <h4 class="media-heading">这是一些花朵</h4>//多媒体的名字
          美丽的花朵美丽的花朵美丽的花朵美丽的花朵美丽的花朵美丽的花朵
          美丽的花朵美丽的花朵美丽的花朵美丽的花朵美丽的花朵美丽的花朵
       </div>
    </div

此外，多媒体对象可以**嵌套**。  
2.列表组—基本列表组  
列表组件用列表形式呈现复杂的和自定义的内容

向元素<ul>添加.list-group
    向<li>添加.list-group-item

效果图：  
![这里写图片描述][20160613093908989]

//基本的列表组
    <ul class="list-group">
       <li class="list-group-item">html</li>
       <li class="list-group-item">css</li>
       <li class="list-group-item">javascript</li>
       <li class="list-group-item">php</li>
       <li class="list-group-item">mysql</li>
    </ul>

3.向列表组添加微章

向<li>中添加<span class="badge">显示的字<span>就可以显示微章

效果图：  
![这里写图片描述][20160613094300654]

<ul class="list-group">
       <li class="list-group-item">html</li>
       <li class="list-group-item">css</li>
       <li class="list-group-item">javascript</li>
       <li class="list-group-item">
       <span class="badge">新</span>
       php</li>
       <li class="list-group-item">mysql</li>
    </ul>

4.向列表组添加链接  
![这里写图片描述][20160613094608702]

<a href="#" class="list-group-item">html</a>
    <a href="#" class="list-group-item active">css</a>
    <a href="#" class="list-group-item">javascript</a>

[20160613093208792]: /images/20220721/8bc4df48ec584905af6e98e4749f833f.png
[20160613093908989]: /images/20220721/684da113811344469588f0f947687a86.png
[20160613094300654]: /images/20220721/758b8cfbfc0c41c092fe442dad5b9bd5.png
[20160613094608702]: /images/20220721/9d5213c925604f07bca2fe7be50b069a.png