From 96503740128d2b39affe0f6b436bb06614090612 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jul 2014 02:12:59 -0700 Subject: move button group --- docs/_includes/components/button-groups.html | 255 --------------------------- 1 file changed, 255 deletions(-) delete mode 100644 docs/_includes/components/button-groups.html (limited to 'docs/_includes/components') diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html deleted file mode 100644 index 027d3b728..000000000 --- a/docs/_includes/components/button-groups.html +++ /dev/null @@ -1,255 +0,0 @@ -
-

Button groups

- -

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

- -
-

Tooltips & popovers in button groups require special setting

-

When using tooltips or popovers on elements within a .btn-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 example

-

Wrap a series of buttons with .btn in .btn-group.

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

Button toolbar

-

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

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

Sizing

-

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

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

Nesting

-

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

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

Vertical variation

-

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

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

Justified button groups

-

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

- -
-

Handling borders

-

Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

-
-
-

IE8 and borders

-

Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <a> or <button> elements. To get around that, wrap each button in another .btn-group.

-

See #12476 for more information.

-
- -

With <a> elements

-

Just wrap a series of .btns in .btn-group.btn-group-justified.

-
-
- Left - Middle - Right -
-
-
- Left - Middle -
- - Dropdown - - -
-
-
-{% highlight html %} -
- ... -
-{% endhighlight %} - -

With <button> elements

-

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can workaround that.

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