Skip to content

B
bootstrap
Commit 94ea3b62 authored by Mark Otto's avatar Mark Otto
Browse files
Options

fix forms examples and allow for inputs in labels

parent b6b19866
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 103 deletions
bootstrap.css
View file @ 94ea3b62
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Wed Jan 25 20:31:53 PST 2012 * Date: Wed Jan 25 21:28:14 PST 2012
*/ */
article, article,
aside, aside,
...@@ -511,6 +511,9 @@ select, ...@@ -511,6 +511,9 @@ select,
width: auto; width: auto;
height: auto; height: auto;
} }
label input, label textarea, label select {
display: block;
}
input[type=image], input[type=checkbox], input[type=radio] { input[type=image], input[type=checkbox], input[type=radio] {
width: auto; width: auto;
height: auto; height: auto;
...@@ -893,6 +896,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec ...@@ -893,6 +896,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
.control-group { .control-group {
margin-bottom: 9px; margin-bottom: 9px;
} }
.form-horizontal legend + .control-group {
padding-top: 27px;
}
.form-horizontal .control-group { .form-horizontal .control-group {
margin-bottom: 18px; margin-bottom: 18px;
} }
......
bootstrap.min.css
View file @ 94ea3b62
...@@ -96,6 +96,7 @@ label,input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial, ...@@ -96,6 +96,7 @@ label,input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,
label{display:block;margin-bottom:5px;color:#333333;} label{display:block;margin-bottom:5px;color:#333333;}
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;} input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;}
.uneditable-textarea{width:auto;height:auto;} .uneditable-textarea{width:auto;height:auto;}
label input,label textarea,label select{display:block;}
input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;}
input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;box-shadow:none;} input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
...@@ -174,6 +175,7 @@ input:focus:required:invalid,textarea:focus:required:invalid,select:focus:requir ...@@ -174,6 +175,7 @@ input:focus:required:invalid,textarea:focus:required:invalid,select:focus:requir
.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;} .form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;}
.form-search label,.form-inline label{display:inline-block;} .form-search label,.form-inline label{display:inline-block;}
.control-group{margin-bottom:9px;} .control-group{margin-bottom:9px;}
.form-horizontal legend+.control-group{padding-top:27px;}
.form-horizontal .control-group{margin-bottom:18px;} .form-horizontal .control-group{margin-bottom:18px;}
.form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;} .form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;}
.form-horizontal .controls{margin-left:160px;} .form-horizontal .controls{margin-left:160px;}
......
docs/base-css.html
View file @ 94ea3b62
...@@ -939,63 +939,65 @@ ...@@ -939,63 +939,65 @@
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<legend>Controls Bootstrap supports</legend> <fieldset>
<div class="control-group"> <legend>Controls Bootstrap supports</legend>
<label class="control-label" for="input01">Text input</label> <div class="control-group">
<div class="controls"> <label class="control-label" for="input01">Text input</label>
<input type="text" class="xlarge" name="input01"> <div class="controls">
<p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> <input type="text" class="xlarge" name="input01">
<p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
</div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="optionsCheckbox">Checkbox</label>
<label class="control-label" for="optionsCheckbox">Checkbox</label> <div class="controls">
<div class="controls"> <label class="checkbox">
<label class="checkbox"> <input type="checkbox" name="optionsCheckbox" value="option1">
<input type="checkbox" name="optionsCheckbox" value="option1"> Option one is this and that&mdash;be sure to include why it’s great
Option one is this and that&mdash;be sure to include why it’s great </label>
</label> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="select01">Select list</label>
<label class="control-label" for="select01">Select list</label> <div class="controls">
<div class="controls"> <select name="select01">
<select name="select01"> <option>1</option>
<option>1</option> <option>2</option>
<option>2</option> <option>3</option>
<option>3</option> <option>4</option>
<option>4</option> <option>5</option>
<option>5</option> </select>
</select> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="multiSelect">Multi-select</label>
<label class="control-label" for="multiSelect">Multi-select</label> <div class="controls">
<div class="controls"> <select multiple="multiple" name="multiSelect">
<select multiple="multiple" name="multiSelect"> <option>1</option>
<option>1</option> <option>2</option>
<option>2</option> <option>3</option>
<option>3</option> <option>4</option>
<option>4</option> <option>5</option>
<option>5</option> </select>
</select> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="fileInput">File input</label>
<label class="control-label" for="fileInput">File input</label> <div class="controls">
<div class="controls"> <input class="input-file" id="fileInput" name="fileInput" type="file">
<input class="input-file" id="fileInput" name="fileInput" type="file"> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="textarea">Textarea</label>
<label class="control-label" for="textarea">Textarea</label> <div class="controls">
<div class="controls"> <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea> </div>
</div> </div>
</div> <div class="form-actions">
<div class="form-actions"> <button type="submit" class="btn primary">Save changes</button>
<button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button>
<button type="reset" class="btn">Cancel</button> </div>
</div> </fieldset>
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
......
docs/templates/pages/base-css.mustache
View file @ 94ea3b62
...@@ -875,63 +875,65 @@ ...@@ -875,63 +875,65 @@
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<form class="form-horizontal"> <form class="form-horizontal">
<legend>{{_i}}Controls Bootstrap supports{{/i}}</legend> <fieldset>
<div class="control-group"> <legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label> <div class="control-group">
<div class="controls"> <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
<input type="text" class="xlarge" name="input01"> <div class="controls">
<p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p> <input type="text" class="xlarge" name="input01">
<p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p>
</div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
<label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label> <div class="controls">
<div class="controls"> <label class="checkbox">
<label class="checkbox"> <input type="checkbox" name="optionsCheckbox" value="option1">
<input type="checkbox" name="optionsCheckbox" value="option1"> {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
{{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}} </label>
</label> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
<label class="control-label" for="select01">{{_i}}Select list{{/i}}</label> <div class="controls">
<div class="controls"> <select name="select01">
<select name="select01"> <option>1</option>
<option>1</option> <option>2</option>
<option>2</option> <option>3</option>
<option>3</option> <option>4</option>
<option>4</option> <option>5</option>
<option>5</option> </select>
</select> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="multiSelect">{{_i}}Multi-select{{/i}}</label>
<label class="control-label" for="multiSelect">{{_i}}Multi-select{{/i}}</label> <div class="controls">
<div class="controls"> <select multiple="multiple" name="multiSelect">
<select multiple="multiple" name="multiSelect"> <option>1</option>
<option>1</option> <option>2</option>
<option>2</option> <option>3</option>
<option>3</option> <option>4</option>
<option>4</option> <option>5</option>
<option>5</option> </select>
</select> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label>
<label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label> <div class="controls">
<div class="controls"> <input class="input-file" id="fileInput" name="fileInput" type="file">
<input class="input-file" id="fileInput" name="fileInput" type="file"> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
<label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label> <div class="controls">
<div class="controls"> <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea> </div>
</div> </div>
</div> <div class="form-actions">
<div class="form-actions"> <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
<button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button> <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button> </div>
</div> </fieldset>
</form> </form>
</div> </div>
<div class="span4"> <div class="span4">
......
lib/forms.less
View file @ 94ea3b62
...@@ -68,6 +68,13 @@ select, ...@@ -68,6 +68,13 @@ select,
height: auto; height: auto;
} }
// Inputs within a label
label input,
label textarea,
label select {
display: block;
}
// Mini reset for unique input types // Mini reset for unique input types
input[type=image], input[type=image],
input[type=checkbox], input[type=checkbox],
...@@ -474,6 +481,10 @@ select:focus:required:invalid { ...@@ -474,6 +481,10 @@ select:focus:required:invalid {
// -------------------------- // --------------------------
.form-horizontal { .form-horizontal {
// Legend collapses margin, so we're relegated to padding
legend + .control-group {
padding-top: @baseLineHeight * 1.5;
}
// Increase spacing between groups // Increase spacing between groups
.control-group { .control-group {
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment