From b8d8704f90bc7aa7e30280b5495ad506de429464 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:34:02 -0700 Subject: button groups and dropdowns to single column --- docs/components.html | 659 +++++++++++++++++++++++++-------------------------- 1 file changed, 321 insertions(+), 338 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index aef8a2ba6..1dccd2082 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>
    -
    -
    -- cgit v1.2.3