Bootstrap媒體對(duì)象學(xué)習(xí)使用
Bootstrap媒體對(duì)象的學(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="媒體對(duì)象"> </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>
媒體對(duì)象輕量標(biāo)記、易于擴(kuò)展的特性是通過(guò)向簡(jiǎn)單的標(biāo)記應(yīng)用 class 來(lái)實(shí)現(xiàn)的。
在 HTML 標(biāo)簽中添加以下兩種形式來(lái)設(shè)置媒體對(duì)象:
(1).media:該 class 允許將媒體對(duì)象里的多媒體(圖像、視頻、音頻)浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊。
(2).media-list:如果你需要一個(gè)列表,各項(xiàng)內(nèi)容是無(wú)序列表的一部分,可以使用該 class??捎糜谠u(píng)論列表與文章列表。
嵌套的媒體對(duì)象:
<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> <!-- 嵌套的媒體對(duì)象 --> <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> 這是一些示例文本。這是一些示例文本。 這是一些示例文本。這是一些示例文本。 <!-- 嵌套的媒體對(duì)象 --> <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> <!-- 嵌套的媒體對(duì)象 --> <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>
效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap源碼解讀媒體對(duì)象、列表組和面板(10)
這篇文章主要源碼解讀了Bootstrap媒體對(duì)象、列表組和面板,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08

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

js遍歷添加欄目類(lèi)添加css 再點(diǎn)擊其它刪除css【推薦】

教你用typescript類(lèi)型來(lái)推算斐波那契

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