今回は Bootstrap を使ってパネルを作成します。

Bootstrap を使ってパネルを作成するには、
div で領域を指定し、class=”panel” を設定して、色を設定します。

色の設定については、
class=”” で色を指定するのですが、
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”を指定します。

というようになります。

ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。

なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開するととして展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。

でCSSファイルの読み込みをします。

で javascript を読み込みます。

この2つがないと Bootstrap は機能しません。

次に、パネルの領域を設定します。

今回は色を青で設定します。
この中にパネルを作成します。

として展開し、

を作成します。

Emmet では複数のクラスを指定するときには
.クラス名1.クラス名2
というように続けて書くようにします。
class=”” は .クラス名で記述し、id=”” の場合は #ID名で記述します。

[] の中には data-toggle などのパラメータを記述します。
複数の場合は半角スペースで区切って記述します。

これでパネルができているので、ctrl + shirt + h で確認してみましょう。

Screenshot from 2016-06-26 23:17:02

これでヘッダーが青のパネルができているのがわかります。

次に、リストをいれたパネルを作成してみましょう。

これも Emmet で簡単に作成できます。

を展開すると

が作成できます

これでリスト入りのパネルができたので、ctrl + shift + h で確認してみましょう。

Screenshot from 2016-06-26 23:22:03

次に、テーブル入りのパネルを作成します。
Emmet ですべてをかくことができないので、大まかに作成し、足りないところは
打ち込むようにします。

で作成し、

のタグの部分だけ直接数値を打ち込みます。

今回は色をデフォルトに指定してみました。

これで

というようになります。

これもctrl + shift + h でプレビューでみてみましょう。

Screenshot from 2016-06-26 23:29:59

このように 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”を指定。

このように、ラベルとリストやテーブルを組み合せることができ、色を簡単に指定できるので、
活用することで見やすいサイトを構築することが可能になります。