您好,登錄后才能下訂單哦!
一、Bootstrap 面板(Panels)
本章將講解 Bootstrap 面板(Panels)。面板組件用于把 DOM 組件插入到一個(gè)盒子中。創(chuàng)建一個(gè)基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的實(shí)例所示:
<div class="panel panel-default"> <div class="panel-body"> 這是一個(gè)基本的面板 </div> </div>
1.面板標(biāo)題
我們可以通過(guò)以下兩種方式來(lái)添加面板標(biāo)題:
使用 .panel-heading class 可以很簡(jiǎn)單地向面板添加標(biāo)題容器。
使用帶有 .panel-title class 的 <h2>-<h7> 來(lái)添加預(yù)定義樣式的標(biāo)題。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實(shí)例 - 面板標(biāo)題</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> 不帶 title 的面板標(biāo)題 </div> <div class="panel-body"> 面板內(nèi)容 </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> 帶有 title 的面板標(biāo)題 </h4> </div> <div class="panel-body"> 面板內(nèi)容 </div> </div> </body> </html>
2.面板腳注
我們可以在面板中添加腳注,只需要把按鈕或者副文本放在帶有 class .panel-footer 的 <div> 中即可。下面的實(shí)例演示了這點(diǎn):
實(shí)例
<div class="panel panel-default"> <div class="panel-body"> 這是一個(gè)基本的面板 </div> <div class="panel-footer">面板腳注</div> </div>
3.帶語(yǔ)境色彩的面板
使用語(yǔ)境狀態(tài)類 panel-primary、panel-success、panel-info、panel-warning、panel-danger,來(lái)設(shè)置帶語(yǔ)境色彩的面板,實(shí)例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實(shí)例 - 帶語(yǔ)境色彩的面板</title> <link rel="stylesheet" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">面板標(biāo)題</h4> </div> <div class="panel-body"> 這是一個(gè)基本的面板 </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title">面板標(biāo)題</h4> </div> <div class="panel-body"> 這是一個(gè)基本的面板 </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title">面板標(biāo)題</h4> </div> <div class="panel-body"> 這是一個(gè)基本的面板 </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title">面板標(biāo)題</h4> </div> <div class="panel-body"> 這是一個(gè)基本的面板 </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h4 class="panel-title">面板標(biāo)題</h4> </div> <div class="panel-body"> 這是一個(gè)基本的面板 </div> </div> </body> </html>
4.帶表格的面板
為了在面板中創(chuàng)建一個(gè)無(wú)邊框的表格,我們可以在面板中使用 class .table。假設(shè)有個(gè) <div> 包含 .panel-body,我們可以向表格的頂部添加額外的邊框用來(lái)分隔。如果沒有包含 .panel-body 的 <div>,則組件會(huì)無(wú)中斷地從面板頭部移動(dòng)到表格。
下面的實(shí)例演示了這點(diǎn):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實(shí)例 - 帶表格的面板</title> <link rel="stylesheet" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">面板標(biāo)題</h4> </div> <div class="panel-body"> 這是一個(gè)基本的面板 </div> <table class="table"> <th>產(chǎn)品</th><th>價(jià)格 </th> <tr><td>產(chǎn)品 A</td><td>200</td></tr> <tr><td>產(chǎn)品 B</td><td>400</td></tr> </table> </div> <div class="panel panel-default"> <div class="panel-heading">面板標(biāo)題</div> <table class="table"> <th>產(chǎn)品</th><th>價(jià)格 </th> <tr><td>產(chǎn)品 A</td><td>200</td></tr> <tr><td>產(chǎn)品 B</td><td>400</td></tr> </table> </div> </body> </html>
我們可以看到,第一個(gè)表格和第二個(gè)表格,有一些不同,第一個(gè)含有.panel-body樣式,所以,可以分隔表格和頭內(nèi)容。
二、Bootstrap 多媒體對(duì)象(Media Object)
本章我們將講解 Bootstrap 中的多媒體對(duì)象(Media Object)。這些抽象的對(duì)象樣式用于創(chuàng)建各種類型的組件(比如:博客評(píng)論),我們可以在組件中使用圖文混排,圖像可以左對(duì)齊或者右對(duì)齊。媒體對(duì)象可以用更少的代碼來(lái)實(shí)現(xiàn)媒體對(duì)象與文字的混排。
媒體對(duì)象輕量標(biāo)記、易于擴(kuò)展的特性是通過(guò)向簡(jiǎn)單的標(biāo)記應(yīng)用 class 來(lái)實(shí)現(xiàn)的。你可以在 HTML 標(biāo)簽中添加以下兩種形式來(lái)設(shè)置媒體對(duì)象:
.media:該 class 允許將媒體對(duì)象里的多媒體(圖像、視頻、音頻)浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊。
.media-list:如果你需要一個(gè)列表,各項(xiàng)內(nèi)容是無(wú)序列表的一部分,可以使用該 class??捎糜谠u(píng)論列表與文章列表。
讓我們來(lái)看看下面這個(gè)有關(guān)默認(rèn)的媒體對(duì)象 .media 的實(shí)例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實(shí)例 - 默認(rèn)的媒體對(duì)象</title> <link rel="stylesheet" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="media"> <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對(duì)象"> </a> <div class="media-body"> <h5 class="media-heading">鄭智</h5> 中國(guó)對(duì)和韓國(guó)隊(duì)的比賽,中國(guó)對(duì)必勝!🇨🇳 [2017-03-23] </div> </div> <div class="media"> <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對(duì)象"> </a> <div class="media-body"> <h5 class="media-heading">里皮</h5> 大家都得給我努力拿下韓國(guó)! <div class="media"> <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對(duì)象"> </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" > <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對(duì)象"> </a> <div class="media-body"> <h5 class="media-heading">郜飛機(jī)</h5> 盡量不打灰機(jī)。 </div> </div> </body> </html>
以上所述是小編給大家介紹的Bootstrap常用組件學(xué)習(xí)(整理),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。