カテゴリー:
2系
閲覧数:940 配信日:2013-07-25 06:45
1.検索フォーム
Search form
・<input>要素を丸くするためにクラス付与
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
2.インラインフォーム
Inline form
・横一列型(インライン表示)
・コンパクトなレイアウトのために、フォーム要素をインラインブロック表示(display: inline-block;)
・具体的には「form-inline」クラス付与
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
3.水平フォーム
Horizontal form
・横型
・各フォーム要素と同じ行に表示されるよう、「右位置を合わせたラベル」を左側にフロート
・「form-horizontal」「control-group」「control-label」「controls」クラスを付与する必要あり
・通常フォームを作成する場合、このタイプを利用することになる
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">名前</label>
<div class="controls">
<input type="text" name="name" class="span3">
</div>
</div>
<div class="control-group success">
<label class="control-label">メアド</label>
<div class="controls">
<input type="text" name="name" class="span4"> <span class="help-inline">形式が正しくありません</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" value="送信" class="btn">
</div>
</div>
</form>