Bootstrap 面板


Bootstrap 面板（Panels）

#本章將講解 Bootstrap 面板（Panels）。面板組件用於把 DOM 組件插入到一個盒子中。建立一個基本的面板，只需要在<div> 元素中新增class .panel 和class .panel-default 即可，如下面的實例所示：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>

</body>
</html>

運行實例»

#點擊"運行實例" 按鈕查看線上實例

面板標題

我們可以透過以下兩種方式來新增面板標題：

  • 使用.panel-heading class 可以很簡單地向面板添加標題容器。 to easily add a heading container to your panel.

  • 使用帶有.panel-title class 的<h1>-<h6> 來新增預先定義樣式的標題。

下面的實例示範了這兩種方式：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 面板标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-heading">
      不带 title 的面板标题
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
         带有 title 的面板标题
      </h3>
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

</body>
</html>

##運行實例»點擊"運行實例" 按鈕查看線上實例

面板腳註

我們可以在面板中新增腳註，只需要把按鈕或副文字放在帶有class

.panel-footer 的<div> 中即可。下面的實例示範了這一點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 面板脚注</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <div class="panel-footer">面板脚注</div>
</div>

</body>
</html>

#運行實例»##點擊"運行實例" 按鈕查看線上實例

面版腳註不會從帶有語境色彩的面板中繼承顏色和邊框，因為它不是前景中的內容。
帶有語境色彩的面板

使用語境狀態類別

panel-primary、panel-success、panel-info、panel-warning、panel-danger

，來設定帶有語境色彩的面板，實例如下：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带语境色彩的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-success">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-info">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-warning">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-danger">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>

</body>
</html>

執行實例»
點擊"運行實例" 按鈕查看線上實例

有表格的面板

為了在面板中建立一個無邊框的表格，我們可以在面板中使用class

.table

。假設有個 <div> 包含 .panel-body，我們可以在表格的頂部新增額外的邊框用來分隔。如果沒有包含 .panel-body 的 <div>，則元件會無中斷地從面板頭部移動到表格。 下面的實例示範了這點：

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带表格的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>
<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>

</body>
</html>


運行實例»

點擊"運行實例"按鈕查看在線實例

#帶列表組的面板

我們可以在任何面板中包含清單組，透過在<div> 元素中新增.panel 和.panel-default 類別來建立面板，並在面板中新增清單組。您可以從 清單群組 一章中學習如何建立清單群組。

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带列表组的面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
      <div class="panel-body">
         <p>这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
		 这是一个基本的面板内容。这是一个基本的面板内容。
         </p>
   </div>
   <ul class="list-group">
      <li class="list-group-item">免费域名注册</li>
      <li class="list-group-item">免费 Window 空间托管</li>
      <li class="list-group-item">图像的数量</li>
      <li class="list-group-item">24*7 支持</li>
      <li class="list-group-item">每年更新成本</li>
   </ul>
</div>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例