前回に引き続きbootstrapネタについて。
フォーム
通常のinput
一般的なformですが、ラベルと入力欄、説明などがワンセットになっていることが多く、下記のようにまとめられます。
1 2 3 4 5 6 7 8 9 |
<!--control-groupクラスを付けることで入力欄とフォームがひとまとめになります。--> <div class="control-group"> <!--control-labelをつけることで水平方向時に右寄せになる、エラーメッセージ時に色がつくなどの特色が付与できます。--> <label class="control-label" for="name">お名前</label> <!--form-controlを付けることで、幅が横幅いっぱいに広がり、フォーカスが当たった時に、薄い水色の枠が付きます。--> <input type="text" class="form-control "name="name" placeholder="お名前をフルネームで入力してください。" /> <!--説明文はhelp-blockを使います。--> <p class="help-block">※名前はフルネームで100文字まででお願いします。</p> </div> |
またradioやcheckboxなどは下記のように書けます。
1 2 3 |
<div class="radio"> //ここにinput </div> |
1 2 3 |
<div class="checkbox"> //ここにinput </div> |
項目名:入力欄の形式
今までは
項目名
入力欄
と縦に並べていましたが、幅がある程度ある場合には
「項目名 入力欄」などのように横一列に並べるほうがみやすいことも多いでしょう。その場合、下記のように書きます。
1 2 3 |
<form class="form-horizontal"> //form </form> |
入力欄+ボタン(検索などでよくあるパターン)
1 2 3 4 5 6 |
<div class="input-group"> <input type="text" class="form-control" placeholder="テキスト入力欄"> <span class="input-group-btn"> <button type="button" class="btn btn-default">ボタン</button> </span> </div> |
画像
大きい画像+説明文みたいに画像を左寄せにし、それ以外の情報を右に寄せたいとき
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--全体をこれで囲みます--> <div class="media"> <!--画像を左にしたいのでpull-left--> <div class="pull-left"> <img class="media-object" src="gazou.jpg" alt=""/> </div> <!--ここからは文章系のコンテンツを入れる--> <div class="media-body"> <h2 class="media-heading">見出しなど</h2> //その他の内容 </div> </div |
参考リンク
辞書のように使えます。細かいのはほぼここで調べれば行けそう。
http://bootstrap3.cyberlab.info/components/