From b281ad64096d919145159ffbc4e1a5b284708d9b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 Jul 2013 18:56:31 -0700 Subject: Input groups overhaul * Moves input groups CSS into separate file * Moves input groups docs into the Components page * Add support for radios and checkboxes in input groups to fix #8679 --- components.html | 308 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 308 insertions(+) (limited to 'components.html') diff --git a/components.html b/components.html index 1f685c2db..2b0d96bc0 100644 --- a/components.html +++ b/components.html @@ -477,6 +477,314 @@ base_url: "../" + + +
+
+

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 .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).

+
+ +

Basic input group

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

Optional sizes

+

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

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

Checkboxes and radio buttons

+

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

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

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.

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

Buttons with dropdowns

+

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

Segmented dropdown groups

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