Bootstrap多媒体对象

最新推荐文章于 2022-05-03 21:42:56 发布

原创最新推荐文章于 2022-05-03 21:42:56 发布 · 961 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #多媒体

Bootstrap 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用.media类浮动多媒体元素，并展示了列表组的基本用法，包括如何添加微章和链接，帮助开发者更好地进行页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这里写图片描述

<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

效果图：
这里写图片描述

//基本的列表组
<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>就可以显示微章

效果图：
这里写图片描述

<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.向列表组添加链接
这里写图片描述

<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>