Bootstrap基本組件學(xué)習(xí)筆記之面板(14)
更新時(shí)間：2016年12月08日 09:39:02 作者：kikay
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之面板,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
直接看Bootstrap面板例子：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>面板</title> </head> <body> <div class="container"> <div class="page-header"> <h1>面板</h1> </div> <div class="col-lg-3"> <div class="panel panel-default"> <div class="page-header"> <h3>面板頭部</h3> </div> <div class="panel-body"> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="panel-footer"> <p>面板尾部</p> </div> </div> </div> <div class="col-lg-3"> <div class="panel panel-default"> <div class="page-header"> <h3>面板頭部</h3> </div> <div class="panel-body"> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="panel-footer"> <p>面板尾部</p> </div> </div> </div> <div class="col-lg-3"> <div class="panel panel-default"> <div class="page-header"> <h3>面板頭部</h3> </div> <div class="panel-body"> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="panel-footer"> <p>面板尾部</p> </div> </div> </div> <div class="col-lg-3"> <div class="panel panel-default"> <div class="page-header"> <h3>面板頭部</h3> </div> <div class="panel-body"> <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p> </div> <div class="panel-footer"> <p>面板尾部</p> </div> </div> </div> </div> </body> </html>
效果如下：
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面功能【實(shí)用】
本文分享了JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面功能的具體實(shí)例代碼，頁(yè)面代碼簡(jiǎn)單，直接拷貝就能運(yùn)行，頁(yè)面可以自己美化下哦。需要的朋友一起來(lái)看下吧2016-12-12
微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javaScript 讀取和設(shè)置文檔元素的樣式屬性
有時(shí)候我們需要用js設(shè)置文檔的樣式屬性，下面就是一些方法與原理分析，大家可以看下，應(yīng)該就沒(méi)問(wèn)題了。2009-04-04
js+css實(shí)現(xiàn)的簡(jiǎn)單易用兼容好的分頁(yè)
使用html、js、css實(shí)現(xiàn)的簡(jiǎn)單易用兼容好的分頁(yè)，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-12-12
原生JS封裝拖動(dòng)驗(yàn)證滑塊的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了原生JS封裝拖動(dòng)驗(yàn)證滑塊的實(shí)現(xiàn)代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)左側(cè)菜單工具欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
通過(guò)javascript獲取iframe里的值示例代碼
iframe里的值在實(shí)現(xiàn)一些比較特殊功能時(shí)需要獲取的，下面為大家詳細(xì)介紹下使用javascript獲取iframe里值的方法，感興趣的各位可以參考下哈2013-06-06
js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
這篇文章主要介紹了js如何實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了js彈出確認(rèn)是否刪除對(duì)話框，具體實(shí)現(xiàn)代碼如下，需要的朋友可以參考下2014-03-03
JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10