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 ---------------------------- docs/components/input-group.md | 309 ++++++++++++++++++++++++++++ 2 files changed, 309 insertions(+), 309 deletions(-) delete mode 100644 docs/_includes/components/input-groups.html create mode 100644 docs/components/input-group.md (limited to 'docs') 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 %} -
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