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>

效果圖：