English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
この章では、Bootstrap パネル（Panels）について説明します。パネルコンポーネントは、DOM コンポーネントをボックスに挿入するために使用されます。基本的なパネルを作成するには、<div> 要素に class .panel および class .panel-default を使用します。以下の例を参照してください：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - デフォルトのパネル</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-body"> これは基本的なパネル </div> </div> </body> </html>テストをしてみる ‹/›
以下の結果が表示されます：
パネルタイトルを追加するには以下の2つの方法があります：
使用 .panel-heading を使用すると、パネルにタイトルコンテナを簡単に追加できます。
class 付きで .panel-title class の <h1>-<h6> を使用して、事前定義のスタイルのタイトルを追加します。
以下の例がこれらの方法を示しています：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - パネルタイトル</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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"> <h2 class="panel-title"> title 付きのパネルタイトル </h2> </div> <div class="panel-body"> パネル内容 </div> </div> </body> </html>テストをしてみる ‹/›
以下の結果が表示されます：
パネルに注釈を追加するには、ボタンやサブテキストを class .panel-footer の <div> 内で即可。以下の例がこの点を示しています：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - パネル注釈</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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> <meta charset="utf-8"> <title>Bootstrap サンプル - 文脈色付きのパネル</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <h2 class="panel-title">パネルのタイトル</h2> </div> <div class="panel-body"> これは基本的なパネル </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h2 class="panel-title">パネルのタイトル</h2> </div> <div class="panel-body"> これは基本的なパネル </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h2 class="panel-title">パネルのタイトル</h2> </div> <div class="panel-body"> これは基本的なパネル </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h2 class="panel-title">パネルのタイトル</h2> </div> <div class="panel-body"> これは基本的なパネル </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h2 class="panel-title">パネルのタイトル</h2> </div> <div class="panel-body"> これは基本的なパネル </div> </div> </body> </html>テストをしてみる ‹/›
以下の結果が表示されます：
パネル内で無ボーダーのテーブルを作成するには、パネルにclassを使用します。 .table。以下の<div>を含む場合、 .panel-body、テーブルの上部に追加して分離するために追加のボーダーを追加できます。含まない場合、 .panel-body の<div>を含まない場合、コンポーネントはパネルのヘッダーからテーブルに無中断で移動します。
以下の例ではこの点を示しています：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap サンプル - リスト付きのパネル</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">パネルのタイトル</h2> </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> <meta charset="utf-8"> <title>Bootstrap サンプル - リストグループ付きのパネル</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>テストをしてみる ‹/›
以下の結果が表示されます：