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/_includes/components/input-groups.html | 309 ---------------------------- 1 file changed, 309 deletions(-) delete mode 100644 docs/_includes/components/input-groups.html (limited to 'docs/_includes') diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html deleted file mode 100644 index ae0ce4613..000000000 --- a/docs/_includes/components/input-groups.html +++ /dev/null @@ -1,309 +0,0 @@ -
-

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