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/components/button-group.md | 255 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 docs/components/button-group.md (limited to 'docs/components') diff --git a/docs/components/button-group.md b/docs/components/button-group.md new file mode 100644 index 000000000..027d3b728 --- /dev/null +++ b/docs/components/button-group.md @@ -0,0 +1,255 @@ +
+

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