ドロップダウンメニュー divのclass名にdropdownを付け、その中にある aタグでドロップダウンをメニューをホバー表示させる。 aタグにはclass="dropdown-toggle"とdata-toggle="dropdownを付与。 ドロップダウンメニューの表示はliとaタグで表示。 メニュー…

イメージの図形 imgタグにクラス名img-図形名をつける。 <img src="http://placekitten.com/200/200" class="img-rounded"/> <img src="http://placekitten.com/200/200" class="img-circle"/> <img src="http://placekitten.com/200/200" class="img-thumbnail"/> 出力結果 イメージのレスポンシブ imgタグにクラス名img-responsiveを付け加える事でデバイスのサイズに沿った大きさになる。

ボタンのカラー buttonタグにクラス名btnをつける。 それに併せて用途に合わせたカラーリングのクラス名を付け加える。 <button type="button" class="btn">btn</button> <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-info">info</button>

基本のフォームコード inputのクラス名にform-control、id名にexampleInputをつける。 input直下のspanタグにつくクラス名ehelp-blockは入力フォームのヘルプテキスト。 <form> <fieldset> <legend>フォームタイトル</legend> <div class="form-group"> <label for="exampleInput">name</label> </div></fieldset></form>

テーブル表示 テーブルはtable,thead,tfoot,tbody,tr,th,td,タグを使用。 その際tableタグのクラス名にtableをつけtておく。テーブルの表をストライプにするにはtableタグのクラス名にtable-stripedを付け加える。 表の列ごとの区切り線を付け加えるならtabl…

見出し文 通常通りにhタグでコーディング。 hタグの中にsmallタグを挿入することでグレー表示。 <h1>見出し文<small>補足文</small></h1> <h2>見出し文2<small>補足文</small></h2> <h3>見出し文3<small>補足文</small></h3> テキスト表示位置 text-alignが既に設定されてあるクラス名で位置を指示。 <p class="texe-left">左寄せ</p> <p class="text-center">中央寄せ</p> <p class="text-right">右寄せ</p> 脚注表示 …

コンテンツエリアをレスポンシブにする。 2カラムのコンテンツエリアをレスポンシブにするには 2つのカラムを囲む親タグのクラス名をclass="row"と宣言。 その中に入る子タグのクラス名をclass="col-xs-数値"と設定しておくと768px以下の解像度で可変レイア…

Bootstrapとは？ BootstrapとはCSSフレームワークの一種である程度のコードが読めれば、プログラミング知識なくとも コピーペーストするだけで立派なレスポンシブデザインな簡単にできるシステムです。 Bootstrapで生成したサイトはほぼ全てのプラウザで表示…