From b281ad64096d919145159ffbc4e1a5b284708d9b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 Jul 2013 18:56:31 -0700 Subject: [PATCH] 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 --- _includes/nav-components.html | 11 ++ _includes/nav-css.html | 1 - components.html | 308 ++++++++++++++++++++++++++++++++ css.html | 253 -------------------------- customize.html | 7 + dist/css/bootstrap.css | 323 +++++++++++++++++----------------- dist/css/bootstrap.min.css | 2 +- less/bootstrap.less | 1 + less/forms.less | 148 ---------------- less/input-groups.less | 153 ++++++++++++++++ 10 files changed, 645 insertions(+), 562 deletions(-) create mode 100644 less/input-groups.less diff --git a/_includes/nav-components.html b/_includes/nav-components.html index 514dcfed3c..86bf4d070c 100644 --- a/_includes/nav-components.html +++ b/_includes/nav-components.html @@ -25,6 +25,17 @@
  • Dropup variation
    • +
  • + Input groups + +
  • Navs diff --git a/components.html b/components.html index 1f685c2db7..2b0d96bc0e 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 %} + + + +
    diff --git a/css.html b/css.html index 33dd2d5dda..641bd899e6 100644 --- a/css.html +++ b/css.html @@ -1533,259 +1533,6 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

    Input groups

    -

    Add 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 an <input>.

    - -
    -

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

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

    Optional sizes

    -

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

    -
    -
    - @ - -
    -
    -
    - @ - -
    -
    -
    - @ - -
    -
    -{% 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 %} - -

    Button dropdowns

    -

    -
    -
    -
    -
    -
    - - -
    - -
    -
    -
    -
    - -
    - - -
    -
    -
    -
    -
    -{% highlight html %} -
    -
    -
    -
    - - -
    - -
    -
    -
    -
    - -
    - - -
    -
    -
    -
    -{% endhighlight %} - -

    Segmented dropdown groups

    -
    -
    -
    -
    -
    - - - -
    - -
    -
    -
    -
    - -
    - - - -
    -
    -
    -
    -
    -{% highlight html %} -
    -
    - -
    - -
    - -
    - -
    - -
    -
    -{% endhighlight %} -

    Control sizing

    Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .col-lg-* classes.

    diff --git a/customize.html b/customize.html index e90c116a1a..ad283c64de 100644 --- a/customize.html +++ b/customize.html @@ -104,6 +104,13 @@ base_url: "../"

    Components

    +
    + +
    +

    Navigation