欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)記、易于擴展的特性是通過向簡單的標(biāo)記應(yīng)用 class 來實現(xiàn)的。

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

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

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript實現(xiàn)列表分頁功能特效

    JavaScript實現(xiàn)列表分頁功能特效

    最近在做一個小項目，有時需要制作靜態(tài)頁面網(wǎng)站，而一旦涉及到文章的分頁，實現(xiàn)起來非常麻煩，自己又剛?cè)腴T，對js不是很熟悉，所以就拿來練練手。
    2015-05-05
  • JavaScript命名空間模式實例詳解

    JavaScript命名空間模式實例詳解

    這篇文章主要介紹了JavaScript命名空間模式,結(jié)合實例形式分析了javascript命名空間模式的相關(guān)概念、原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下
    2019-06-06
  • 在JSP中如何實現(xiàn)MD5加密的方法

    在JSP中如何實現(xiàn)MD5加密的方法

    這篇文章主要介紹了在JSP中如何實現(xiàn)MD5加密的方法,較為詳細(xì)的分析了JSP采用MD5加密的功能、特點及實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下.
    2016-11-11
  • js遍歷添加欄目類添加css 再點擊其它刪除css【推薦】

    js遍歷添加欄目類添加css 再點擊其它刪除css【推薦】

    這篇文章主要介紹了js遍歷添加欄目類添加css 再點擊其它刪除css的實例代碼,非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下
    2018-06-06
  • 教你用typescript類型來推算斐波那契

    教你用typescript類型來推算斐波那契

    斐波那契是自然界與社會中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-01-01
  • JS定義回車事件(實現(xiàn)代碼)

    JS定義回車事件(實現(xiàn)代碼)

    基于JS定義回車事件的實現(xiàn)代碼，需要的朋友可以參考下
    2013-07-07
  • js函數(shù)般調(diào)用正則

    js函數(shù)般調(diào)用正則

    Firefox 包含了一個非標(biāo)準(zhǔn)的 JavaScript 擴展，使正則像函數(shù)一樣可調(diào)用。
    2008-04-04

    • 最新評論