From b8d8704f90bc7aa7e30280b5495ad506de429464 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:34:02 -0700 Subject: [PATCH] button groups and dropdowns to single column --- docs/components.html | 659 +++++++++++------------ docs/templates/pages/components.mustache | 659 +++++++++++------------ 2 files changed, 642 insertions(+), 676 deletions(-) diff --git a/docs/components.html b/docs/components.html index aef8a2ba65..1dccd20825 100644 --- a/docs/components.html +++ b/docs/components.html @@ -101,11 +101,11 @@
  • Labels
  • Badges
    • -
  • Typography
    • +
  • Type
  • Thumbnails
  • Alerts
  • Progress bars
    • -
  • Miscellaneous
    • +
  • Misc
    • @@ -118,29 +118,27 @@

    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:

    -
      -
    • Always use the same element in a single button group, <a> or <button>.
      • -
    • Don't mix buttons of different colors in the same button group.
      • -
    • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.
      • -
    -

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

    + +

    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:

    +
      +
    • Always use the same element in a single button group, <a> or <button>.
      • +
    • Don't mix buttons of different colors in the same button group.
      • +
    • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.
      • +
    +

    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:

    +
    +
    + + +
    -
    -

    Default example

    -

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

    -
    -
    - - - -
    -
    + 
     <div class="btn-group">
   <button class="btn">1</button>
@@ -148,24 +146,24 @@
   <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.

    -
    -
    - - - - -
    -
    - - - -
    -
    - -
    -
    +

    Toolbar example

    +

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

    +
    +
    + + + + +
    +
    + + + +
    +
    + +
    + 
     <div class="btn-toolbar">
   <div class="btn-group">
@@ -173,15 +171,11 @@
   </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.

    -
    -
    +

    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.

    @@ -194,88 +188,86 @@

    Button dropdowns

    -
    -
    -

    Overview and examples

    -

    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -

    Example markup

    -

    Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

    + +

    Overview and examples

    +

    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +

    Example markup

    +

    Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

     <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -287,182 +279,176 @@
   </ul>
 </div>
    -
    -
    -
    -
    -

    Works with all button sizes

    -

    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -

    Requires javascript

    -

    Button dropdowns require the Bootstrap dropdown plugin to function.

    -

    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

    -
    -
    + +

    Works with all button sizes

    +

    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +

    Requires javascript

    +

    Button dropdowns require the Bootstrap dropdown plugin to function.

    +

    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

    +

    Split button dropdowns

    -
    -
    -

    Overview and examples

    -

    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

    -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    -

    Sizes

    -

    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

    -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    + +

    Overview and examples

    +

    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +

    Sizes

    +

    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    + 
     <div class="btn-group">
   ...
@@ -471,10 +457,9 @@
   </ul>
 </div>
    -
    -
    -

    Example markup

    -

    We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

    + +

    Example markup

    +

    We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

     <div class="btn-group">
   <button class="btn">Action</button>
@@ -486,32 +471,32 @@
   </ul>
 </div>
    -

    Dropup menus

    -

    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

    -
    -
    - - - -
    -
    - - - -
    -
    +

    Dropup menus

    +

    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

    +
    +
    + + + +
    +
    + + + +
    + 
     <div class="btn-group dropup">
   <button class="btn">Dropup</button>
@@ -524,8 +509,6 @@
 </div>
    -
    -
    diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index dedad62a88..db466b5c08 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -23,11 +23,11 @@
  • {{_i}}Labels{{/i}}
  • {{_i}}Badges{{/i}}
    • -
  • {{_i}}Typography{{/i}}
    • +
  • {{_i}}Type{{/i}}
  • {{_i}}Thumbnails{{/i}}
  • {{_i}}Alerts{{/i}}
  • {{_i}}Progress bars{{/i}}
    • -
  • {{_i}}Miscellaneous{{/i}}
    • +
  • {{_i}}Misc{{/i}}
    • @@ -40,29 +40,27 @@

    {{_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}}Always use the same element in a single button group, <a> or <button>.{{/i}}
      • -
    • {{_i}}Don't mix buttons of different colors in the same button group.{{/i}}
      • -
    • {{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/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}}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}}Always use the same element in a single button group, <a> or <button>.{{/i}}
      • +
    • {{_i}}Don't mix buttons of different colors in the same button group.{{/i}}
      • +
    • {{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/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}}Default example{{/i}}

    -

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

    -
    -
    - - - -
    -
    + 
     <div class="btn-group">
   <button class="btn">1</button>
@@ -70,24 +68,24 @@
   <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}}

    -
    -
    - - - - -
    -
    - - - -
    -
    - -
    -
    +

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

    +

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

    +
    +
    + + + + +
    +
    + + + +
    +
    + +
    + 
     <div class="btn-toolbar">
   <div class="btn-group">
@@ -95,15 +93,11 @@
   </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}}

    -
    -
    +

    {{_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}}

    @@ -116,88 +110,86 @@

    {{_i}}Button dropdowns{{/i}}

    -
    -
    -

    {{_i}}Overview and examples{{/i}}

    -

    {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -

    {{_i}}Example markup{{/i}}

    -

    {{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

    + +

    {{_i}}Overview and examples{{/i}}

    +

    {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +

    {{_i}}Example markup{{/i}}

    +

    {{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}

     <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -209,182 +201,176 @@
   </ul>
 </div>
    -
    -
    -
    -
    -

    {{_i}}Works with all button sizes{{/i}}

    -

    {{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}

    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -

    {{_i}}Requires javascript{{/i}}

    -

    {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

    -

    {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

    -
    -
    + +

    {{_i}}Works with all button sizes{{/i}}

    +

    {{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +

    {{_i}}Requires javascript{{/i}}

    +

    {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

    +

    {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}

    +

    {{_i}}Split button dropdowns{{/i}}

    -
    -
    -

    {{_i}}Overview and examples{{/i}}

    -

    {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

    -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    -

    {{_i}}Sizes{{/i}}

    -

    {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

    -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    -
    -
    - - - -
    -
    + +

    {{_i}}Overview and examples{{/i}}

    +

    {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +

    {{_i}}Sizes{{/i}}

    +

    {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    + 
     <div class="btn-group">
   ...
@@ -393,10 +379,9 @@
   </ul>
 </div>
    -
    -
    -

    {{_i}}Example markup{{/i}}

    -

    {{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}

    + +

    {{_i}}Example markup{{/i}}

    +

    {{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}

     <div class="btn-group">
   <button class="btn">{{_i}}Action{{/i}}</button>
@@ -408,32 +393,32 @@
   </ul>
 </div>
    -

    {{_i}}Dropup menus{{/i}}

    -

    {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

    -
    -
    - - - -
    -
    - - - -
    -
    +

    {{_i}}Dropup menus{{/i}}

    +

    {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

    +
    +
    + + + +
    +
    + + + +
    + 
     <div class="btn-group dropup">
   <button class="btn">{{_i}}Dropup{{/i}}</button>
@@ -446,8 +431,6 @@
 </div>
    -
    -