aboutsummaryrefslogtreecommitdiff
path: root/docs/css.html
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-02-02 17:31:26 -0800
committerMark Otto <[email protected]>2013-02-02 17:31:26 -0800
commit6993fadf7ec217608653ec5c0d4434ad8d8b2eb7 (patch)
treea8b2d2b40537b73295dfdd64d412fcc6dd4d07b8 /docs/css.html
parent04aae2f56cca4438c90232b889fa5a6e1d78d223 (diff)
downloadbootstrap-6993fadf7ec217608653ec5c0d4434ad8d8b2eb7.tar.xz
bootstrap-6993fadf7ec217608653ec5c0d4434ad8d8b2eb7.zip
Simplify input and input group sizing
* Remove .input-mini because who really needs inputs that small * Remove unnecessary border-radius resets from large and small input groups
Diffstat (limited to 'docs/css.html')
-rw-r--r--docs/css.html38
1 files changed, 36 insertions, 2 deletions
diff --git a/docs/css.html b/docs/css.html
index b14c25ec2..0c1322a4e 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1308,6 +1308,40 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;/div&gt;
</pre>
+ <h4>Optional sizes</h4>
+ <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
+ <form class="bs-docs-example">
+ <div class="input-group span9">
+ <span class="input-group-addon input-large">@</span>
+ <input type="text" class="input-large" placeholder="Username">
+ </div>
+ <br>
+ <div class="input-group span9">
+ <span class="input-group-addon">@</span>
+ <input type="text" placeholder="Username">
+ </div>
+ <br>
+ <div class="input-group span9">
+ <span class="input-group-addon input-small">@</span>
+ <input type="text" class="input-small" placeholder="Username">
+ </div>
+ </form>
+<pre class="prettyprint linenums">
+&lt;div class="input-group span9"&gt;
+ &lt;span class="input-group-addon input-large"&gt;@&lt;/span&gt;
+ &lt;input type="text" class="input-large" placeholder="Username"&gt;
+&lt;/div&gt;
+&lt;div class="input-group span9"&gt;
+ &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
+ &lt;input type="text" placeholder="Username"&gt;
+&lt;/div&gt;
+&lt;div class="input-group span9"&gt;
+ &lt;span class="input-group-addon input-small"&gt;@&lt;/span&gt;
+ &lt;input type="text" class="input-small" placeholder="Username"&gt;
+&lt;/div&gt;
+</pre>
+
+
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example">
@@ -1457,14 +1491,14 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="input-large" type="text" placeholder=".input-large">
+ <input type="text" placeholder="Default input">
<input class="input-small" type="text" placeholder=".input-small">
- <input class="input-mini" type="text" placeholder=".input-mini">
</div>
</form>
<pre class="prettyprint linenums">
&lt;input class="input-large" type="text" placeholder=".input-large"&gt;
+&lt;input type="text" placeholder="Default input"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt;
-&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
</pre>
<h4>Column sizing</h4>