最新的Web開發教程
 

Bootstrap Panels


面板

在引導面板是繞其內容的一些填充有邊框的盒子:

一個基本的面板

面板是與創建.panel類,面板內的內容有.panel-body類:

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>
試一試»

.panel-default類是用來樣式面板的顏色。 看到這個頁面,了解更多內容類的最後一個例子。


面板標題

面板標題
面板內容

.panel-heading類添加到面板標題:

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
</div>
試一試»

面板頁腳

面板內容

.panel-footer類添加頁腳到面板:

<div class="panel panel-default">
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>
試一試»

面板組

把多項面板在一起,緊裹<div>帶班.panel-group在他們周圍。

.panel-group級清除每個面板的底部利潤率:

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
</div>
試一試»

與上下文類面板

顏色的面板上,使用上下文類( .panel-default.panel-primary.panel-success.panel-info.panel-warning ,或.panel-danger ):

Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
試一試»

自測練習用!

練習1» 練習2» 練習3» 練習4» 練習5»