Bootstrap 多媒体对象（Media Object）

来源：互联网发布：arch linux安装编辑：程序博客网时间：2024/04/28 23:14

Bootstrap 中的多媒体对象（Media Object）,可以在组件中使用图文混排，图像可以左对齐(class="pull-left")或者右对齐(class="pull-right")。可以在 HTML 标签中添加以下两种形式来设置媒体对象：

1、media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

2、media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。

html代码

<div class="media"> <a class="pull-left" href="#"> <img src="img/1.jpg" style="width: 200px;height: 200px;"> </a> <div class="media-body"> <h2 class="media-heading">漂亮图片</h2> <p style="font-size: 24px;"> 这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。这是一个漂亮的图片。 </p> </div>

<div class="media">     <a class="pull-left" href="#">         <img src="img/1.jpg" style="width: 200px;height: 200px;">     </a>     <div class="media-body">         <h2 class="media-heading">漂亮图片</h2> <p style="font-size: 24px;"> 这是一个漂亮的图片。 这是一个漂亮的图片。          这是一个漂亮的图片。 这是一个漂亮的图片。              这是一个漂亮的图片。 这是一个漂亮的图片。                  这是一个漂亮的图片。 这是一个漂亮的图片。                      这是一个漂亮的图片。 这是一个漂亮的图片。                       这是一个漂亮的图片。 这是一个漂亮的图片。                        这是一个漂亮的图片。 这是一个漂亮的图片。                         这是一个漂亮的图片。 这是一个漂亮的图片。                       </p>      </div>

效果图

0 0