diff --git a/docs/components.html b/docs/components.html index 933d89a36c..4d7b6d3bb1 100644 --- a/docs/components.html +++ b/docs/components.html @@ -110,6 +110,7 @@ +
@@ -117,10 +118,9 @@

Button groups Join buttons for more toolbar-like functionality

-

Button groups

-

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

-

Best practices

-

We recommend the following guidelines for using button groups and toolbars:

+ +

Description and best practices

+

Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements. We recommend the following guidelines for using button groups and toolbars:

Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

-

Default example

-

Here's how the HTML looks for a standard button group built with anchor tag buttons:

-
-
+ +
+ + +

Examples and variations

+

Two basic options, along with two more specific variations.

+ +

Basic button group

+

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

+
+
@@ -144,22 +151,25 @@ <button class="btn">3</button> </div> +

Toolbar example

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

-
-
- - - - -
-
- - - -
-
- +
+
+
+ + + + +
+
+ + + +
+
+ + 
@@ -169,9 +179,10 @@
   </div>
 </div>
+

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

-

Get the javascript »

+

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 3f4ad2d08e..3001102a8f 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -33,6 +33,7 @@ +
@@ -40,10 +41,9 @@

{{_i}}Button groups{{/i}} {{_i}}Join buttons for more toolbar-like functionality{{/i}}

-

{{_i}}Button groups{{/i}}

-

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}

-

{{_i}}Best practices{{/i}}

-

{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}

+ +

{{_i}}Description and best practices{{/i}}

+

{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements. We recommend the following guidelines for using button groups and toolbars:{{/i}}

{{_i}}Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}

-

{{_i}}Default example{{/i}}

-

{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}

-
-
+ +
+ + +

{{_i}}Examples and variations{{/i}}

+

{{_i}}Two basic options, along with two more specific variations.{{/i}}

+ +

{{_i}}Basic button group{{/i}}

+

{{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

+
+
@@ -67,22 +74,25 @@ <button class="btn">3</button> </div> +

{{_i}}Toolbar example{{/i}}

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

-
-
- - - - -
-
- - - -
-
- +
+
+
+ + + + +
+
+ + + +
+
+ + 
@@ -92,9 +102,10 @@
   </div>
 </div>
+

{{_i}}Checkbox and radio flavors{{/i}}

{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

-

{{_i}}Get the javascript »{{/i}}

+

{{_i}}Dropdowns in button groups{{/i}}

{{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}