mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-09 23:36:30 +02:00
Code Issues Releases Wiki Activity

Input control quick reference

Browse Source
This commit is contained in:
Angelos Chalaris
2016-12-20 10:51:32 +02:00
parent 1ef0d63300
commit 7b74682140
3 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/input_control.html
View File

@@ -183,7 +183,7 @@
</div>
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p>Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code>&lt;form&gt;</code> element and add your <code>&lt;input&gt;</code> elements inside. Link them to <code>&lt;label&gt;</code> elements for ease of acces and you are pretty much set. We highly recommend using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements to annotate your forms as well, but you can skip them if you wish.</p>
<p>Forms are inline by default. Use the <code>.button-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. If you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
<p>Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. If you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
<h3>Sample code</h3>
<pre>&lt;form&gt;
&lt;fieldset&gt;
@@ -288,7 +288,7 @@
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using the <code>.button-group</code> class when creating aligned forms. This might cause unexpected behavior.</p>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using the <code>.input-group</code> class when creating aligned forms. This might cause unexpected behavior.</p>
</div>
</div>
</div>