end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

bootstrap - フォーム、ボタン

記事一覧→ 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&mdash;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">&nbsp;
  <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>&nbsp;
  <button class="btn">Default</button>&nbsp;
  <button class="btn info">Info</button>&nbsp;
  <button class="btn success">Success</button>&nbsp;
  <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>&nbsp;
<button class="btn large" disabled>Action</button>
</div><!--.well-->