Bootstrap媒体对象学习使用

2019-11-19 17:16:45

字体：大中小

来源：转载

供稿：网友

Bootstrap媒体对象的学习使用，供大家参考，具体内容如下

基本结构：

<div class="media">  <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >    <img class="media-object" src="bg.jpg" alt="媒体对象">  </a>  <div class="media-body">    <h4 class="media-heading">媒体标题</h4>    这是一些示例文本。这是一些示例文本。    这是一些示例文本。这是一些示例文本。   </div></div>

<ul class="media-list">  <li class="media">    <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >      <img class="media-object" src="bg.jpg" alt="通用的占位符图像">    </a>    <div class="media-body">      <h4 class="media-heading">媒体标题</h4>      <p>这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。</p>    </div>  </li>  <li class="media">    <a class="pull-right" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >      <img class="media-object" src=bg.jpg" alt="通用的占位符图像">    </a>    <div class="media-body">      <h4 class="media-heading">媒体标题</h4>      这是一些示例文本。这是一些示例文本。      这是一些示例文本。这是一些示例文本。    </div>  </li></ul>

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。

在 HTML 标签中添加以下两种形式来设置媒体对象：

（1）.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
（2）.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

嵌套的媒体对象：

<ul class="media-list">  <li class="media">    <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >      <img class="media-object" src="bg.jpg"         alt="通用的占位符图像">    </a>    <div class="media-body">      <h4 class="media-heading">媒体标题</h4>      <p>这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。        这是一些示例文本。这是一些示例文本。</p>      <!-- 嵌套的媒体对象 -->      <div class="media">        <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >          <img class="media-object" src="bg.jpg"             alt="通用的占位符图像">        </a>        <div class="media-body">          <h4 class="media-heading">嵌套的媒体标题</h4>          这是一些示例文本。这是一些示例文本。          这是一些示例文本。这是一些示例文本。          <!-- 嵌套的媒体对象 -->          <div class="media">            <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >              <img class="media-object" src="bg.jpg"                 alt="通用的占位符图像">            </a>            <div class="media-body">              <h4 class="media-heading">嵌套的媒体标题</h4>              这是一些示例文本。这是一些示例文本。              这是一些示例文本。这是一些示例文本。                           </div>          </div>        </div>      </div>      <!-- 嵌套的媒体对象 -->      <div class="media">        <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >          <img class="media-object" src="bg.jpg"             alt="通用的占位符图像">        </a>        <div class="media-body">          <h4 class="media-heading">嵌套的媒体标题</h4>          这是一些示例文本。这是一些示例文本。          这是一些示例文本。这是一些示例文本。        </div>      </div>    </div>  </li>  <li class="media">    <a class="pull-right" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >      <img class="media-object" src="bg.jpg"         alt="通用的占位符图像">    </a>    <div class="media-body">      <h4 class="media-heading">媒体标题</h4>      这是一些示例文本。这是一些示例文本。      这是一些示例文本。这是一些示例文本。           </div>  </li></ul>

效果图：