ブートストラップパネル


Bootstrap Panels

この章では、Bootstrap パネルについて説明します。パネル コンポーネントは、DOM コンポーネントをボックスに挿入するために使用されます。基本的なパネルを作成するには、次の例に示すように、クラス .panel とクラス .panel-default を <div> 要素に追加するだけです。

「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します

パネル タイトル

次の 2 つの方法でパネル タイトルを追加できます:

.panel-Heading

クラスを使用すると簡単に追加できますパネルのタイトルコンテナにコピーします。パネルに見出しコンテナを簡単に追加します。

  • .panel-title

    クラス <h1>-<h6> とともに使用して、事前定義されたスタイル付き見出しを追加します。

    • 次の例は、これら 2 つのメソッドを示しています:

  • インスタンス 

    <!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-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-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>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

パネルフッターは、コンテキストに応じて色付けされたパネルと境界線から色を継承しません。前面にあるコンテンツではありません。

コンテキスト カラーを持つパネル コンテキスト カラーを持つパネルを設定するには、コンテキスト状態クラス

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

</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

テーブル付きパネル

パネルにボーダーレステーブルを作成するには、パネル
.テーブル
。 .panel-body を含む <div> があるとします。テーブルの上部に追加の境界線を追加して、それを区切ることができます。

.panel-body

を含む
がない場合、コンポーネントは中断されることなくパネル ヘッダーからテーブルに移動します。

次の例はこれを示しています:

Example

<!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>
+
.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">
      <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>

インスタンスの実行 »「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

←
→