From 6993fadf7ec217608653ec5c0d4434ad8d8b2eb7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 2 Feb 2013 17:31:26 -0800 Subject: 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 --- docs/css.html | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) (limited to 'docs/css.html') 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, <code>&lt;section&gt;</code> should be wrapped </div> +

Optional sizes

+

Add the relative form sizing classes to the `.input-group-addon`.

+
+
+ @ + +
+
+
+ @ + +
+
+
+ @ + +
+
+
+<div class="input-group span9">
+  <span class="input-group-addon input-large">@</span>
+  <input type="text" class="input-large" placeholder="Username">
+</div>
+<div class="input-group span9">
+  <span class="input-group-addon">@</span>
+  <input type="text" placeholder="Username">
+</div>
+<div class="input-group span9">
+  <span class="input-group-addon input-small">@</span>
+  <input type="text" class="input-small" placeholder="Username">
+</div>
+
+ +

Buttons instead of text

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

@@ -1457,14 +1491,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped
+ -
 <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">
 

Column sizing

-- cgit v1.2.3