Bootstrap媒體對象學習使用

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

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

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 允許將媒體對象里的多媒體（圖像、視頻、音頻）浮動到內容區(qū)塊的左邊或者右邊。
（2）.media-list：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該 class?？捎糜谠u論列表與文章列表。

嵌套的媒體對象：

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

效果圖：