BootStrap之媒体media

最新推荐文章于 2023-10-17 11:53:00 发布

写完bug就找女朋友

最新推荐文章于 2023-10-17 11:53:00 发布

阅读量344

点赞数

分类专栏： Bootstrap笔记文章标签： BootStrap

本文链接：https://blog.csdn.net/qq_37844454/article/details/83691970

版权

Bootstrap笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

描述：媒体对象；

  media：包含所有媒体内容（图片、描述、内容）
   media-object：包含图片视频
    media-body：描述评价等文字信息

普通媒体：

<h3>media 包含媒体，描述，标题</h3>
<div class="media">
	<a href="javascript:void(0)" class="pull-left">
					<img src="img/test.jpg" class="media-object" />	</a>
	<div class="media-body">
	   <div class="h4 media-heading">BootsStrap基础教程</div>
	   <div>media-object：包含图片视频 media-body：描述评价等文字信息
	   </div>
	   <br />
	   <div class="btn btn-default">购买</div>
    	<div class="btn btn-default">评价</div>
	</div>
</div>

效果图：

media媒体列表：

<h3>media列表</h3>
	<ul class="media-list">
	  <li class="media">
        <a class="pull-left" href="javascript:void(0)">
	    	<img src="img/test.jpg" class="media-object" />
		</a>
		<div class="media-body">
			<div class="h4 media-heading">BootStrap基础教程</div>
			<div>media-object：包含图片视频 media-body：描述评价等文字信息</div>
			<br />
			<div class="btn btn-default">购买</div>
			<div class="btn btn-default">评价</div>
		</div>
	 </li>
	 <li class="media">
		<a class="pull-left" href="javascript:void(0)">
		   <img src="img/test.jpg" class="media-object" />
        </a>
		<div class="media-body">
			<div class="h4 media-heading">BootStrap基础教程</div>
			<div>media-object：包含图片视频 media-body：描述评价等文字信息</div>
			<br />
			<div class="btn btn-default">购买</div>
			<div class="btn btn-default">评价</div>
		</div>
	</li>
</ul>

效果图：