[Bootstrap]パネルのコンポーネント”Panels”の使い方
今回は Bootstrap を使ってパネルを作成します。
Bootstrap を使ってパネルを作成するには、
div で領域を指定し、class=”panel” を設定して、色を設定します。
色の設定については、
class=”” で色を指定するのですが、
panel-default を指定すると灰色に、
panel-primary で青、
panel-success で緑、
panel-info で水色、
panel-warning で黄色、
panel-danger で赤、
というように色を変えることができます。
パネルの本文については、div で囲み、
class=”panel-body” を設定します。
構文としては
1 2 3 |
<div class="panel パネルの色"> <div class="panel-body">本文</div> </div> |
というようになります。
また、ヘッダーやフッターつきのパネルを作成することもできます。
この場合、ヘッダー部分を div で囲み、class=”panel-heading”を指定します。
フッターについても、div で囲み、class=”panel-footer”を指定します。
もし、デフォルトの色を指定して、ヘッダーとフッターつきのラベルを作成するのなら
1 2 3 4 5 |
<div class="panel panel-default"> <div class="panel-heading">ヘッダー</div> <div class="panel-body">本文</div> <div class="panel-footer">フッター</div> </div> |
というようになります。
また、テーブルをラベル内に作成することも可能です。
この場合、table要素に class=”table” を指定します、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="panel panel-default"> <div class="panel-body">パネル内容</div> <table class="table"> <tr> <th></th> <th>姓</th> <th>名</th> <th>ユーザ名</th> </tr> <tr> <th scope="row">1</th> <td>name1</td> <td>second_name1</td> <td>user_name1</td> </tr> <tr> <th scope="row">2</th> <td>name2</td> <td>second_name2</td> <td>user_name2</td> </tr> <tr> <th scope="row">3</th> <td>name3</td> <td>second_name3</td> <td>user_name3</td> </tr> </table> </div> |
また、リストつきのパネルも作成できます。
この場合、ul または li 要素に class=”list-group”を指定し、
リストとなる li要素に class=”list-group-item”を指定します。
1 2 3 4 5 6 7 8 9 10 |
<div class="panel panel-primary"> <div class="panel-heading">ヘッダー</div> <div class="panel-body">本文</div> <ul class="list-group"> <li class="list-group-item">リスト 1</li> <li class="list-group-item">リスト 2</li> <li class="list-group-item">リスト 3</li> <li class="list-group-item">リスト 4</li> </ul> </div> |
というようになります。
ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。
Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。
PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。
Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。
今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。
ゼロから作成する場合
1 |
html:5 |
として展開するととして展開すると
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </html> |
というようにベースのコードが作成されます。
ubuntu の場合、tab キーで展開します。
次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。
1 |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> |
でCSSファイルの読み込みをします。
1 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> |
で javascript を読み込みます。
この2つがないと Bootstrap は機能しません。
次に、パネルの領域を設定します。
今回は色を青で設定します。
この中にパネルを作成します。
1 |
div.panel.panel-primary>div.panel-heading{ヘッダー}+div.panel-body{本文} |
として展開し、
1 2 3 4 |
<div class="panel panel-primary"> <div class="panel-heading">ヘッダー</div> <div class="panel-body">本文</div> </div> |
を作成します。
Emmet では複数のクラスを指定するときには
.クラス名1.クラス名2
というように続けて書くようにします。
class=”” は .クラス名で記述し、id=”” の場合は #ID名で記述します。
[] の中には data-toggle などのパラメータを記述します。
複数の場合は半角スペースで区切って記述します。
これでパネルができているので、ctrl + shirt + h で確認してみましょう。
これでヘッダーが青のパネルができているのがわかります。
次に、リストをいれたパネルを作成してみましょう。
これも Emmet で簡単に作成できます。
1 |
div.panel.panel-primary>div.panel-heading{ヘッダー}+div.panel-body{本文}+ul.list-group>(li.list-group-item{リスト $})*4 |
を展開すると
1 2 3 4 5 6 7 8 9 10 |
<div class="panel panel-primary"> <div class="panel-heading">ヘッダー</div> <div class="panel-body">本文</div> <ul class="list-group"> <li class="list-group-item">リスト 1</li> <li class="list-group-item">リスト 2</li> <li class="list-group-item">リスト 3</li> <li class="list-group-item">リスト 4</li> </ul> </div> |
が作成できます
これでリスト入りのパネルができたので、ctrl + shift + h で確認してみましょう。
次に、テーブル入りのパネルを作成します。
Emmet ですべてをかくことができないので、大まかに作成し、足りないところは
打ち込むようにします。
1 |
table.table>tr>th+th{姓}+th{名}+th{ユーザ名}^(tr>th[scope=row]{$}+td{name$}+td{second_name$}+td{user_name$})*3 |
で作成し、
1 |
<th scope="row"></th> |
のタグの部分だけ直接数値を打ち込みます。
今回は色をデフォルトに指定してみました。
これで
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="panel panel-default"> <div class="panel-body">パネル内容</div> <table class="table"> <tr> <th></th> <th>姓</th> <th>名</th> <th>ユーザ名</th> </tr> <tr> <th scope="row">1</th> <td>name1</td> <td>second_name1</td> <td>user_name1</td> </tr> <tr> <th scope="row">2</th> <td>name2</td> <td>second_name2</td> <td>user_name2</td> </tr> <tr> <th scope="row">3</th> <td>name3</td> <td>second_name3</td> <td>user_name3</td> </tr> </table> </div> |
というようになります。
これもctrl + shift + h でプレビューでみてみましょう。
このように bootstrap の panel を使うことでパネルを簡単に作成することができます。
それでは、今回の要点をまとめてみましょう。
・Bootstrap を使ってパネルを作成するには、div で領域を指定し、class=”panel” を設定して、色を設定。
・設定できる色は以下の6つ。
panel-default(灰色)
panel-primary(青)
panel-success(緑)
panel-info (水色)
panel-warning(黄色)
panel-danger(赤)
・パネルの本文については、div で囲み、class=”panel-body” を設定。
・ヘッダーを設置するのなら、ヘッダー部分を div で囲み、class=”panel-heading”を指定。
・フッターを設置するのなら、フッター部分を div で囲み、class=”panel-footer”を指定。
・テーブルをラベル内に設置するのなら、table要素に class=”table” を指定。
・リストをラベル内に設置するのなら、ul または li 要素に class=”list-group”を指定し、
リストとなる li要素に class=”list-group-item”を指定。
このように、ラベルとリストやテーブルを組み合せることができ、色を簡単に指定できるので、
活用することで見やすいサイトを構築することが可能になります。