「Bootstrap/Forms」の編集履歴（バックアップ）一覧はこちら

「Bootstrap/Forms」(2011/10/25 (火) 17:37:13) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#contents()

**Default styles

#ref(default_form.jpg)

#highlight(html){{
 <div class="span12">
   <form>
     <fieldset>

       <legend>Example form legend</legend>
       <div class="clearfix">
         <label for="xlInput">X-Large input</label>
         <div class="input">
           <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">

         <label for="normalSelect">Select</label>
         <div class="input">
           <select name="normalSelect" id="normalSelect">
             <option>1</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>

             <option>5</option>
           </select>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="mediumSelect">Select</label>
         <div class="input">
           <select class="medium" name="mediumSelect" id="mediumSelect">

             <option>1</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="multiSelect">Multiple select</label>
         <div class="input">
           <select class="medium" multiple="multiple" name="multiSelect" id="multiSelect">
             <option>1</option>
             <option>2</option>

             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">

         <label>Uneditable input</label>
         <div class="input">
           <span class="uneditable-input">Some value here</span>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="disabledInput">Disabled input</label>

         <div class="input">
           <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="disabledInput">Disabled textarea</label>
         <div class="input">
           <textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix error">
         <label for="xlInput2">X-Large input</label>
         <div class="input">
           <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
           <span class="help-inline">Small snippet of help text</span>
         </div>

       </div><!-- /clearfix -->
     </fieldset>
     <fieldset>
       <legend>Example form legend</legend>
       <div class="clearfix">
         <label for="prependedInput">Prepended text</label>
         <div class="input">
           <div class="input-prepend">

             <span class="add-on">@</span>
             <input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="prependedInput2">Prepended checkbox</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" size="16" type="text" />
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="appendedInput">Appended checkbox</label>

         <div class="input">
           <div class="input-append">
             <input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
             <label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="fileInput">File input</label>

         <div class="input">
           <input class="input-file" id="fileInput" name="fileInput" type="file" />
         </div>
       </div><!-- /clearfix -->
     </fieldset>
     <fieldset>
       <legend>Example form legend</legend>
       <div class="clearfix">

         <label id="optionsCheckboxes">List of options</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>
                 <input type="checkbox" name="optionsCheckboxes" value="option2" />
                 <span>Option two can also be checked and included in form results</span>
               </label>
             </li>

             <li>
               <label>
                 <input type="checkbox" name="optionsCheckboxes" value="option2" />
                 <span>Option three can＆mdash;yes, you guessed it＆mdash;also be checked and included in form results</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>
           <span class="help-block">
             <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
           </span>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label>Date range</label>
         <div class="input">
           <div class="inline-inputs">
             <input class="small" type="text" value="May 1, 2011" />
             <input class="mini" type="text" value="12:00am" />

             to
             <input class="small" type="text" value="May 8, 2011" />
             <input class="mini" type="text" value="11:59pm" />
             <span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="textarea">Textarea</label>

         <div class="input">
           <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
           <span class="help-block">
             Block of help text to describe the field above if need be.
           </span>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label id="optionsRadio">List of options</label>

         <div class="input">
           <ul class="inputs-list">
             <li>
               <label>
                 <input type="radio" checked name="optionsRadios" value="option1" />
                 <span>Option one is this and that＆mdash;be sure to include why it’s great</span>
               </label>
             </li>

             <li>
               <label>
                 <input type="radio" name="optionsRadios" value="option2" />
                 <span>Option two can is something else and selecting it will deselect options 1</span>
               </label>
             </li>
           </ul>
         </div>

       </div><!-- /clearfix -->
       <div class="actions">
         <input type="submit" class="btn primary" value="Save changes">＆nbsp;<button type="reset" class="btn">Cancel</button>
       </div>
     </fieldset>
   </form>
 </div>

}}

**Stacked forms

#ref(stacked_forms.jpg)

#highlight(html){{
 <div class="span12">
   <form action="" class="form-stacked">
     <fieldset>
       <legend>Example form legend</legend>
       <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>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="stackedSelect">Select</label>
         <div class="input">
           <select name="stackedSelect" id="stackedSelect">
             <option>1</option>

             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>
         </div>
       </div><!-- /clearfix -->

     </fieldset>
     <fieldset>
       <legend>Example form legend</legend>
       <div class="clearfix error">
         <label for="xlInput4">X-Large input</label>
         <div class="input">
           <input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
           <span class="help-inline">Small snippet of help text</span>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label id="optionsCheckboxes">List of options</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>
                 <input type="checkbox" name="optionsCheckboxes" value="option2" />
                 <span>Option two can also be checked and included in form results</span>

               </label>
             </li>
           </ul>
           <span class="help-block">
             <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
           </span>
         </div>
       </div><!-- /clearfix -->

     </fieldset>
     <div class="actions">
       <button type="submit" class="btn primary">Save changes</button>＆nbsp;<button type="reset" class="btn">Cancel</button>
     </div>
   </form>
 </div>

}}

#contents()

**Default styles

#ref(default_form.jpg)

#highlight(html){{
 <div class="span12">
   <form>
     <fieldset>

       <legend>Example form legend</legend>
       <div class="clearfix">
         <label for="xlInput">X-Large input</label>
         <div class="input">
           <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">

         <label for="normalSelect">Select</label>
         <div class="input">
           <select name="normalSelect" id="normalSelect">
             <option>1</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>

             <option>5</option>
           </select>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="mediumSelect">Select</label>
         <div class="input">
           <select class="medium" name="mediumSelect" id="mediumSelect">

             <option>1</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="multiSelect">Multiple select</label>
         <div class="input">
           <select class="medium" multiple="multiple" name="multiSelect" id="multiSelect">
             <option>1</option>
             <option>2</option>

             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">

         <label>Uneditable input</label>
         <div class="input">
           <span class="uneditable-input">Some value here</span>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="disabledInput">Disabled input</label>

         <div class="input">
           <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="disabledInput">Disabled textarea</label>
         <div class="input">
           <textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix error">
         <label for="xlInput2">X-Large input</label>
         <div class="input">
           <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
           <span class="help-inline">Small snippet of help text</span>
         </div>

       </div><!-- /clearfix -->
     </fieldset>
     <fieldset>
       <legend>Example form legend</legend>
       <div class="clearfix">
         <label for="prependedInput">Prepended text</label>
         <div class="input">
           <div class="input-prepend">

             <span class="add-on">@</span>
             <input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="prependedInput2">Prepended checkbox</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" size="16" type="text" />
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="appendedInput">Appended checkbox</label>

         <div class="input">
           <div class="input-append">
             <input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
             <label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="fileInput">File input</label>

         <div class="input">
           <input class="input-file" id="fileInput" name="fileInput" type="file" />
         </div>
       </div><!-- /clearfix -->
     </fieldset>
     <fieldset>
       <legend>Example form legend</legend>
       <div class="clearfix">

         <label id="optionsCheckboxes">List of options</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>
                 <input type="checkbox" name="optionsCheckboxes" value="option2" />
                 <span>Option two can also be checked and included in form results</span>
               </label>
             </li>

             <li>
               <label>
                 <input type="checkbox" name="optionsCheckboxes" value="option2" />
                 <span>Option three can＆mdash;yes, you guessed it＆mdash;also be checked and included in form results</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>
           <span class="help-block">
             <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
           </span>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label>Date range</label>
         <div class="input">
           <div class="inline-inputs">
             <input class="small" type="text" value="May 1, 2011" />
             <input class="mini" type="text" value="12:00am" />

             to
             <input class="small" type="text" value="May 8, 2011" />
             <input class="mini" type="text" value="11:59pm" />
             <span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span>
           </div>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="textarea">Textarea</label>

         <div class="input">
           <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
           <span class="help-block">
             Block of help text to describe the field above if need be.
           </span>
         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label id="optionsRadio">List of options</label>

         <div class="input">
           <ul class="inputs-list">
             <li>
               <label>
                 <input type="radio" checked name="optionsRadios" value="option1" />
                 <span>Option one is this and that＆mdash;be sure to include why it’s great</span>
               </label>
             </li>

             <li>
               <label>
                 <input type="radio" name="optionsRadios" value="option2" />
                 <span>Option two can is something else and selecting it will deselect options 1</span>
               </label>
             </li>
           </ul>
         </div>

       </div><!-- /clearfix -->
       <div class="actions">
         <input type="submit" class="btn primary" value="Save changes">＆nbsp;<button type="reset" class="btn">Cancel</button>
       </div>
     </fieldset>
   </form>
 </div>

}}

**Stacked forms

#ref(stacked_forms.jpg)

#highlight(html){{
 <div class="span12">
   <form action="" class="form-stacked">
     <fieldset>
       <legend>Example form legend</legend>
       <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>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label for="stackedSelect">Select</label>
         <div class="input">
           <select name="stackedSelect" id="stackedSelect">
             <option>1</option>

             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>
         </div>
       </div><!-- /clearfix -->

     </fieldset>
     <fieldset>
       <legend>Example form legend</legend>
       <div class="clearfix error">
         <label for="xlInput4">X-Large input</label>
         <div class="input">
           <input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
           <span class="help-inline">Small snippet of help text</span>

         </div>
       </div><!-- /clearfix -->
       <div class="clearfix">
         <label id="optionsCheckboxes">List of options</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>
                 <input type="checkbox" name="optionsCheckboxes" value="option2" />
                 <span>Option two can also be checked and included in form results</span>

               </label>
             </li>
           </ul>
           <span class="help-block">
             <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
           </span>
         </div>
       </div><!-- /clearfix -->

     </fieldset>
     <div class="actions">
       <button type="submit" class="btn primary">Save changes</button>＆nbsp;<button type="reset" class="btn">Cancel</button>
     </div>
   </form>
 </div>

}}


**Example buttons

#ref(example_buttons.jpg)

#highlight(html){{
 <div class="span12">
   <h3>Example buttons</h3>
   <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>＆lt;a＆gt;</code>, <code>＆lt;button＆gt;</code>, and select <code>＆lt;input＆gt;</code> elements. Here’s how it looks:</p>

   <div class="well" style="padding: 14px 19px;">
     <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>Alternate sizes</h3>
   <p>Fancy larger or smaller buttons? Have at it!</p>

   <div class="well">
     <a href="#" class="btn large primary">Primary action</a>
     <a href="#" class="btn large">Action</a>
   </div>
   <div class="well" style="padding: 16px 19px;">
     <a href="#" class="btn small primary">Primary action</a>
     <a href="#" class="btn small">Action</a>

   </div>
   <h3>Disabled state</h3>
   <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>＆lt;button＆gt;</code> elements.</p>

   <h4>Links</h4>
   <div class="well">
     <a href="#" class="btn large primary disabled">Primary action</a>
     <a href="#" class="btn large disabled">Action</a>
   </div>
   <h4>Buttons</h4>
   <div class="well">

     <button class="btn large primary disabled" disabled="disabled">Primary action</button>＆nbsp;<button class="btn large" disabled>Action</button>
   </div>
 </div>

}}