From ba74329ba68c957055fc8a2ff5f354cdc951f086 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jul 2014 02:13:05 -0700 Subject: move input group --- docs/components/input-group.md | 309 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 309 insertions(+) create mode 100644 docs/components/input-group.md (limited to 'docs/components') diff --git a/docs/components/input-group.md b/docs/components/input-group.md new file mode 100644 index 000000000..ae0ce4613 --- /dev/null +++ b/docs/components/input-group.md @@ -0,0 +1,309 @@ +
+

Input groups

+ +

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

+ +
+

Cross-browser compatibility

+

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

+
+
+

Tooltips & popovers in input groups require special setting

+

When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

+
+
+

Don't mix with other components

+

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

+
+ + +

Basic example

+

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

+

We do not support multiple add-ons on a single side.

+

We do not support multiple form-controls in a single input group.

+
+
+ @ + +
+
+
+ + .00 +
+
+
+ $ + + .00 +
+
+{% highlight html %} +
+ @ + +
+ +
+ + .00 +
+ +
+ $ + + .00 +
+{% endhighlight %} + +

Sizing

+

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

+
+
+ @ + +
+
+
+ @ + +
+
+
+ @ + +
+
+{% highlight html %} +
+ @ + +
+ +
+ @ + +
+ +
+ @ + +
+{% endhighlight %} + + +

Checkboxes and radio addons

+

Place any checkbox or radio option within an input group's addon instead of text.

+
+
+
+
+ + + + +
+
+
+
+ + + + +
+
+
+
+{% highlight html %} +
+
+
+ + + + +
+
+
+
+ + + + +
+
+
+{% endhighlight %} + + +

Button addons

+

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.

+
+
+
+
+ + + + +
+
+
+
+ + + + +
+
+
+
+{% highlight html %} +
+
+
+ + + + +
+
+
+
+ + + + +
+
+
+{% endhighlight %} + +

Buttons with dropdowns

+

+
+
+
+
+
+ + +
+ +
+
+
+
+ +
+ + +
+
+
+
+
+{% highlight html %} +
+
+
+
+ + +
+ +
+
+
+
+ +
+ + +
+
+
+
+{% endhighlight %} + +

Segmented buttons

+
+
+
+
+
+ + + +
+ +
+
+
+
+ +
+ + + +
+
+
+
+
+{% highlight html %} +
+
+ +
+ +
+ +
+ +
+ +
+
+{% endhighlight %} +
-- cgit v1.2.3