Skip to content
GitLab
Commit 94ea3b62 authored by Mark Otto's avatar Mark Otto
Browse files

fix forms examples and allow for inputs in labels

parent b6b19866
6 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix,!13512.0 wip - relative font sizes,!1315[2.0-wip] Fix mustache glob when building,!1268[wip-2.0] IE 7/8 Typehead JS fix,!12362.0 wip - Fix for issue #1202
Hide whitespace changes
Inline Side-by-side
Showing
with 126 additions and 103 deletions
+126 -103
bootstrap.css
+ 7
- 1
View file @ 94ea3b62
......@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* 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,
aside,
......@@ -511,6 +511,9 @@ select,
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;
......@@ -893,6 +896,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
.control-group {
margin-bottom: 9px;
}
.form-horizontal legend + .control-group {
padding-top: 27px;
}
.form-horizontal .control-group {
margin-bottom: 18px;
}
......
bootstrap.min.css
+ 2
- 0
View file @ 94ea3b62
......@@ -96,6 +96,7 @@ label,input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,
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;}
.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=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;}
......@@ -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 label,.form-inline label{display:inline-block;}
.control-group{margin-bottom:9px;}
.form-horizontal legend+.control-group{padding-top:27px;}
.form-horizontal .control-group{margin-bottom:18px;}
.form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;}
.form-horizontal .controls{margin-left:160px;}
......
docs/base-css.html
+ 53
- 51
View file @ 94ea3b62
......@@ -939,63 +939,65 @@
<div class="row">
<div class="span8">
<form class="form-horizontal">
<legend>Controls Bootstrap supports</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<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>
<fieldset>
<legend>Controls Bootstrap supports</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<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 class="control-group">
<label class="control-label" for="optionsCheckbox">Checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox" value="option1">
Option one is this and that&mdash;be sure to include why it’s great
</label>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">Checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox" value="option1">
Option one is this and that&mdash;be sure to include why it’s great
</label>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">Select list</label>
<div class="controls">
<select name="select01">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="control-group">
<label class="control-label" for="select01">Select list</label>
<div class="controls">
<select name="select01">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">Multi-select</label>
<div class="controls">
<select multiple="multiple" name="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="control-group">
<label class="control-label" for="multiSelect">Multi-select</label>
<div class="controls">
<select multiple="multiple" name="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
<div class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Textarea</label>
<div class="controls">
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
<div class="control-group">
<label class="control-label" for="textarea">Textarea</label>
<div class="controls">
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
<div class="span4">
......
docs/templates/pages/base-css.mustache
+ 53
- 51
View file @ 94ea3b62
......@@ -875,63 +875,65 @@
<div class="row">
<div class="span8">
<form class="form-horizontal">
<legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
<div class="control-group">
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
<div class="controls">
<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>
<fieldset>
<legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
<div class="control-group">
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
<div class="controls">
<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 class="control-group">
<label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox" value="option1">
{{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
</label>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox" value="option1">
{{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
</label>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
<div class="controls">
<select name="select01">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="control-group">
<label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
<div class="controls">
<select name="select01">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">{{_i}}Multi-select{{/i}}</label>
<div class="controls">
<select multiple="multiple" name="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="control-group">
<label class="control-label" for="multiSelect">{{_i}}Multi-select{{/i}}</label>
<div class="controls">
<select multiple="multiple" name="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
<div class="control-group">
<label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
<div class="controls">
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
<div class="control-group">
<label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
<div class="controls">
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
</form>
</div>
<div class="span4">
......
lib/forms.less
+ 11
- 0
View file @ 94ea3b62
......@@ -68,6 +68,13 @@ select,
height: auto;
}
// Inputs within a label
label input,
label textarea,
label select {
display: block;
}
// Mini reset for unique input types
input[type=image],
input[type=checkbox],
......@@ -474,6 +481,10 @@ select:focus:required:invalid {
// --------------------------
.form-horizontal {
// Legend collapses margin, so we're relegated to padding
legend + .control-group {
padding-top: @baseLineHeight * 1.5;
}
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
......
Supports Markdown
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