github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-20 03:47:59 -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 510d5f4cdb
commit 0bc4dac395
4 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1106,6 +1106,86 @@ on multiple lines
<br>
<h2>{{_i}}Small labels{{/i}}</h2>
<div class="row">
<div class="span4">
<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>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal small-labels"&gt;
…
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<form class="form-horizontal small-labels">
<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>
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</form>
</div>
</div>
<br>
<h2>{{_i}}Extending form controls{{/i}}</h2>
<div class="row">
<div class="span4">

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

@@ -56,6 +56,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";