From c09b994eea35da794b1905bf0a56485aeb28158a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 00:30:03 -0800 Subject: [PATCH] Add justified button groups for link buttons; reorganize dropdowns and button groups docs sections --- docs/assets/css/bootstrap.css | 11 ++++++ docs/components.html | 48 ++++++++++-------------- docs/templates/pages/components.mustache | 48 ++++++++++-------------- less/button-groups.less | 14 +++++++ 4 files changed, 63 insertions(+), 58 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4abbee2cc6..30fb6de1a4 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3515,6 +3515,17 @@ button.close { border-radius: 0 0 6px 6px; } +.btn-group-justified { + display: table; + width: 100%; +} + +.btn-group-justified .btn { + display: table-cell; + float: none; + width: 1%; +} + .breadcrumb { padding: 8px 15px; margin: 0 0 20px; diff --git a/docs/components.html b/docs/components.html index ade79e7b5b..49db6f6bbd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -109,9 +109,10 @@

Dropdown menus

+

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

-

Example

-

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

+

Example

+

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-  <li><a tabindex="-1" href="#">Action</a></li>
-  <li><a tabindex="-1" href="#">Another action</a></li>
-  <li><a tabindex="-1" href="#">Something else here</a></li>
-  <li class="divider"></li>
-  <li><a tabindex="-1" href="#">Separated link</a></li>
-</ul>
-
- -

Markup

-

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

- -
 <div class="dropdown">
   <!-- Link or button to toggle dropdown -->
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
     <li><a tabindex="-1" href="#">Action</a></li>
     <li><a tabindex="-1" href="#">Another action</a></li>
     <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -149,9 +137,6 @@
 </div>
-

Options

-

Align menus to the right and add include additional levels of dropdowns.

-

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

@@ -190,8 +175,7 @@
             
Button groups

           
 
-          
Examples

-          
Two basic options, along with two more specific variations.

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

 
           
Single button group

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

@@ -254,15 +238,21 @@
 </div>
+

Justified button groups

+

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

+
+
+ Left + Right + Middle +
+
+
+<div class="btn-group btn-group-justified">
+  ...
+</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.

- -

Dropdowns in button groups

-

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 3d0470bc54..791ecb854e 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -41,9 +41,10 @@

Dropdown menus

+

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

-

Example

-

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

+

Example

+

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

{{! /example }} 
-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-  <li><a tabindex="-1" href="#">Action</a></li>
-  <li><a tabindex="-1" href="#">Another action</a></li>
-  <li><a tabindex="-1" href="#">Something else here</a></li>
-  <li class="divider"></li>
-  <li><a tabindex="-1" href="#">Separated link</a></li>
-</ul>
-
- -

Markup

-

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

- -
 <div class="dropdown">
   <!-- Link or button to toggle dropdown -->
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
     <li><a tabindex="-1" href="#">Action</a></li>
     <li><a tabindex="-1" href="#">Another action</a></li>
     <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -81,9 +69,6 @@
 </div>
-

Options

-

Align menus to the right and add include additional levels of dropdowns.

-

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

@@ -122,8 +107,7 @@
             
Button groups

           
 
-          
Examples

-          
Two basic options, along with two more specific variations.

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

 
           
Single button group

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

@@ -186,15 +170,21 @@
 </div>
+

Justified button groups

+

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

+
+
+ Left + Right + Middle +
+
+
+<div class="btn-group btn-group-justified">
+  ...
+</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.

- -

Dropdowns in button groups

-

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

diff --git a/less/button-groups.less b/less/button-groups.less index 340b342e70..c2b9f3608d 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -142,3 +142,17 @@ .btn-group-vertical .btn-large:last-child { border-radius: 0 0 @border-radius-large @border-radius-large; } + + +// Justified button groups +// ---------------------- + +.btn-group-justified { + display: table; + width: 100%; + .btn { + float: none; + display: table-cell; + width: 1%; + } +}