github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-23 05:08:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added docs for .small-labels in forms

Browse Source 
Added form improvements to jasny/bootstrap.less and jasny/responsive.less
This commit is contained in:
Arnold Daniels
2012-07-16 23:44:38 +02:00
parent d6b4d1e657
commit e935d2a302
4 changed files with 77 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
docs/templates/pages/base-css.mustache vendored
View File

@@ -1222,6 +1222,74 @@
<input class="span1" type="text" placeholder=".span1">
</div>
...
</pre>
<h3>{{_i}}Small labels{{/i}}</h3>
<p>{{_i}}If you have a lot of fields in a form, you might want to use three or four columns. However labels can start taking up to much space. Simple add <code>.small-labels</code> to a horizontal form (or section within a form) to solve this.{{/i}}</p>
<form class="form-horizontal small-labels bs-docs-example">
<div class="row">
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-1">{{_i}}Input{{/i}} 1</label>
<div class="controls">
<input class="span1" id="small-1" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-2">{{_i}}Input{{/i}} 2</label>
<div class="controls">
<input class="span1" id="small-2" type="number">
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-3">{{_i}}Input{{/i}} 3</label>
<div class="controls">
<input class="span1" id="small-3" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-4">{{_i}}Input{{/i}} 4</label>
<div class="controls">
<input class="span1" id="small-4" type="number">
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-5">{{_i}}Input{{/i}} 5</label>
<div class="controls">
<input class="span1" id="small-5" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-6">{{_i}}Input{{/i}} 6</label>
<div class="controls">
<input class="span1" id="small-6" type="number">
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label class="control-label" for="small-7">{{_i}}Input{{/i}} 7</label>
<div class="controls">
<input class="span1" id="small-7" type="number">
</div>
</div>
<div class="control-group">
<label class="control-label" for="small-8">{{_i}}Input{{/i}} 8</label>
<div class="controls">
<input class="span1" id="small-8" type="number">
</div>
</div>
</div>
</div>
</form>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal small-labels"&gt;
…
&lt;/div&gt;
</pre>
<h3>{{_i}}Uneditable inputs{{/i}}</h3>

5
docs/templates/pages/index.mustache vendored
View File

@@ -48,6 +48,11 @@
<p>{{_i}}Go beyond uneditable input and create a full uneditable form, with disabled and uneditable elements.{{/i}}</p>
<p>{{_i}}Add .editor to a textarea to create a larger field for content editing.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./base-css.html#forms">{{_i}}Form styles{{/i}}</a></h3>
<p>{{_i}}Combine horizontal and vertical forms. Using wells in horizontal forms now looks clean.{{/i}}</p>
<p>{{_i}}Use smaller labels to fit more input fields on one screen.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./components.html#navs">{{_i}}Tabbable{{/i}}</a></h3>
<p>{{_i}}Tabs work better than ever. You now have a bordered tabbable available. Also, a container can be turned into a tabbable.{{/i}}</p>

1
less/jasny/bootstrap.less vendored
View File

@@ -13,6 +13,7 @@
@import "../mixins.less";
// Base CSS
@import "forms.less";
@import "forms-uneditable.less";
@import "forms-editor.less";

3
less/jasny/responsive.less
View File

@@ -11,3 +11,6 @@
// Core variables and mixins
@import "../variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../mixins.less";
// Base CSS
@import "forms.responsive.less";