快捷導(dǎo)航

Bootstrap媒體對象學(xué)習(xí)使用

更新時間：2017年03月07日 15:04:48 作者：Dannii_

這篇文章主要為大家詳細(xì)介紹了Bootstrap媒體對象的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Bootstrap媒體對象的學(xué)習(xí)使用，供大家參考，具體內(nèi)容如下

基本結(jié)構(gòu)：

<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">媒體標(biāo)題</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">媒體標(biāo)題</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">媒體標(biāo)題</h4>
      這是一些示例文本。這是一些示例文本。
      這是一些示例文本。這是一些示例文本。
    </div>
  </li>
</ul>

媒體對象輕量標(biāo)記、易于擴(kuò)展的特性是通過向簡單的標(biāo)記應(yīng)用 class 來實現(xiàn)的。

在 HTML 標(biāo)簽中添加以下兩種形式來設(shè)置媒體對象：

（1）.media：該 class 允許將媒體對象里的多媒體（圖像、視頻、音頻）浮動到內(nèi)容區(qū)塊的左邊或者右邊。
（2）.media-list：如果你需要一個列表，各項內(nèi)容是無序列表的一部分，可以使用該 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">媒體標(biāo)題</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">嵌套的媒體標(biāo)題</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">嵌套的媒體標(biāo)題</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">嵌套的媒體標(biāo)題</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">媒體標(biāo)題</h4>
      這是一些示例文本。這是一些示例文本。
      這是一些示例文本。這是一些示例文本。       
    </div>
  </li>
</ul>

效果圖：