Bootstrapまとめ form＋画像

投稿日：2016年5月4日

前回に引き続きbootstrapネタについて。

Contents

1 フォーム
2 画像
- 2.1 参考リンク

フォーム

通常のinput

一般的なformですが、ラベルと入力欄、説明などがワンセットになっていることが多く、下記のようにまとめられます。

<!--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>

<p class="help-block">※名前はフルネームで100文字まででお願いします。</p>

</div>

またradioやcheckboxなどは下記のように書けます。

<div class="radio">
    //ここにinput
</div>

//ここにinput

</div>

<div class="checkbox">
    //ここにinput
</div>

//ここにinput

</div>

項目名:入力欄の形式

今までは
項目名
入力欄
と縦に並べていましたが、幅がある程度ある場合には

「項目名入力欄」などのように横一列に並べるほうがみやすいことも多いでしょう。その場合、下記のように書きます。

<form class="form-horizontal">
    //form
</form>

//form

</form>

入力欄+ボタン(検索などでよくあるパターン)

<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>

</span>

</div>

画像

大きい画像＋説明文みたいに画像を左寄せにし、それ以外の情報を右に寄せたいとき

<!--全体をこれで囲みます-->
<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

</div>

<h2 class="media-heading">見出しなど</h2>

//その他の内容

</div>

</div

参考リンク

辞書のように使えます。細かいのはほぼここで調べれば行けそう。
http://bootstrap3.cyberlab.info/components/