Bootstrap媒體對象怎么用

這篇文章主要為大家展示了“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">
    <h5 class="media-heading">媒體標題</h5>
    這是一些示例文本。這是一些示例文本。
    這是一些示例文本。這是一些示例文本。 
  </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">
      <h5 class="media-heading">媒體標題</h5>
      <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">
      <h5 class="media-heading">媒體標題</h5>
      這是一些示例文本。這是一些示例文本。
      這是一些示例文本。這是一些示例文本。
    </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">
      <h5 class="media-heading">媒體標題</h5>
      <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">
          <h5 class="media-heading">嵌套的媒體標題</h5>
          這是一些示例文本。這是一些示例文本。
          這是一些示例文本。這是一些示例文本。

          <!-- 嵌套的媒體對象 -->
          <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">
              <h5 class="media-heading">嵌套的媒體標題</h5>
              這是一些示例文本。這是一些示例文本。
              這是一些示例文本。這是一些示例文本。               
            </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">
          <h5 class="media-heading">嵌套的媒體標題</h5>
          這是一些示例文本。這是一些示例文本。
          這是一些示例文本。這是一些示例文本。
        </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">
      <h5 class="media-heading">媒體標題</h5>
      這是一些示例文本。這是一些示例文本。
      這是一些示例文本。這是一些示例文本。       
    </div>
  </li>
</ul>

效果圖：

以上是“Bootstrap媒體對象怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！