記事一覧→ http://d.hatena.ne.jp/end0tknr/20111016/1318729659
※デフォルトでlabelは、width:130px; text-align:right;で表示されます。
※フォームの表示サイズ指定には、次のものが用意されています。
class 幅(px) .input-mini, .mini 60 .input-small, .small 90 .input-medium, .medium 150 .input-large, .large 210 .input-xlarge, .xlarge 270 .input-xxlarge, .xxlarge 530
※フォームでのポイントは、以下のhtmlソースにおいて<small>部分に記載しています。
デフォルトスタイル
<div class="clearfix"> <label for="xlInput">テキストボックス</label> <div class="input"> <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" /><br> <small>.xlarge によりwidth:270pxで表示しています。</small> </div><!--.input--> </div><!--.clearfix --> <div class="clearfix"> <label for="mediumSelect">セレクトボックス</label> <div class="input"> <select class="medium" name="mediumSelect" id="mediumSelect"> <option>1</option> <option>2</option> <option>3</option> </select><br> <small>.medium によりwidth:150pxで表示しています。</small> </div><!--.input--> </div><!--.clearfix --> <div class="clearfix"> <label>入力不可</label> <div class="input"> <span class="uneditable-input">Some value here</span> <small>テキストボックスに見えますが、ただのspanです。</small> </div><!--.input--> </div><!--.clearfix --> <div class="clearfix"> <label for="disabledInput">無効</label> <div class="input"> <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled /> </div><!--.input--> </div><!-- /clearfix --> <div class="clearfix error"> <label for="xlInput2">エラー</label> <div class="input"> <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" /> <span class="help-inline">.help-inlineでhelpを表示</span><br> <small>divに.errorを指定し、背景色を赤で表示しています。</small> </div><!-.input---> </div><!--.clearfix -->
※上記のhtmlソースでは .help-inline だけ紹介していますが、.help-block { display: block; max-width: 600px; } というものもあります。
※編集不可フィールドは、テキストボックスに見えますが、<span>に.uneditable-inputを指定しています。
<div class="clearfix"> <label for="prependedInput">文字の前方設置</label> <div class="input"> <div class="input-prepend"> <span class="add-on">@</span> <input class="medium" id="prependedInput" name="prependedInput" type="text" /> </div><!--.input-prepend--> <small>div.input-prependとspan.add-onを指定</small> </div><!--.input--> </div><!--.clearfix --> <div class="clearfix"> <label for="prependedInput2">チェックボックスの前方設置</label> <div class="input"> <div class="input-prepend"> <label class="add-on"><input type="checkbox" name="" id="" value="" /></label> <input class="mini" id="prependedInput2" name="prependedInput2" type="text" /> </div><!--input-prepend--> <small>div.input-prependとlabel.add-onを指定</small> </div><!--.input--> </div><!--.clearfix --> <div class="clearfix"> <label for="appendedInput">チェックボックスの後方設置</label> <div class="input"> <div class="input-append"> <input class="mini" id="appendedInput" name="appendedInput" type="text" /> <label class="add-on active"> <input type="checkbox" name="" id="" value="" checked="checked" /> </label> </div><!--.input-append--> <br><br><br> <small>div.input-prependとlabel.add-onを指定し、label.activeで緑色に</small> </div><!--.input--> </div><!--.clearfix -->
<div class="clearfix"> <label id="optionsCheckboxes">チェックボックスのリスト表示</label> <div class="input"> <ul class="inputs-list"> <li> <label> <input type="checkbox" name="optionsCheckboxes" value="option1" /> <span>Option one is this and that—be sure to include why it’s great</span> </label> </li> <li> <label class="disabled"> <input type="checkbox" name="optionsCheckboxes" value="option2" disabled /> <span>Option four cannot be checked as it is disabled.</span> </label> </li> </ul><!--.inputs-list--> <span class="help-block"> <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form. </span> <br> <small>.help-block によるhelpも表示しています</small> </div><!--.input--> </div><!-- /clearfix -->
<div class="actions"> <input type="submit" class="btn primary" value="Save changes"> <button type="reset" class="btn">Cancel</button> <br> <small> div.actionsによるボタンエリア背景色表示と、 input."btn primary"による青ボタン表示 </small> </div><!--.actions-->
※div.actionsによりボタンエリアに背景色を表示しています。
※「.actions .secondary-action」で「float: right;」となりますが、これはnavigationにある.secondary-nav と同様?のものです。
Stacked forms
form.form-stacked を指定すると、labelが入力欄の上に表示されます
<div class="clearfix"> <label for="xlInput3">X-Large input</label> <div class="input"> <input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" /> </div><!--.input--> </div><!--.clearfix --> <div class="clearfix"> <label for="stackedSelect">Select</label> <div class="input"> <select name="stackedSelect" id="stackedSelect"> <option>1</option> <option>2</option> </select> </div><!--.input--> </div><!--.clearfix -->
グリッドによるサイズ指定
.largeや.mediumの他に .span2, .span3等、グリッドベースの表示サイズも指定可。
<div class="clearfix"> <input class="span2" id="" name="" type="text" placeholder=".span2" /> </div> <div class="clearfix"> <input class="span3" id="" name="" type="text" placeholder=".span3" /> </div> <div class="clearfix"> <input class="span12" id="" name="" type="text" placeholder=".span12" /> </div>
ボタン
<h3>.primary .info .success .danger</h3> <div class="well"> <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button> </div>
<h3>無効状態</h3> <small>.disabled や disabled="disabled" を指定します</small> <h4>リンク</h4> <div class="well"> <a href="#" class="btn large primary disabled">Primary action</a> <a href="#" class="btn large disabled">Action</a> </div><!--.well--> <h4>ボタン</h4> <div class="well"> <button class="btn large primary disabled" disabled="disabled"> Primary action </button> <button class="btn large" disabled>Action</button> </div><!--.well-->