From 74c8a5611d64b2efd0b60774e184125ed4b5549f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 00:49:54 -0800 Subject: Increase margins and line-height on h3; overhaul button dropdown docs --- docs/components.html | 119 +++++++++++---------------------------------------- 1 file changed, 26 insertions(+), 93 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 49db6f6bb..fdc317e8c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -174,7 +174,6 @@

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.

Single button group

@@ -263,12 +262,12 @@

Button dropdown menus

+

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Requires the Bootstrap dropdown 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.

+

Single or split button

+

Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.

-
+
-
-
-
-<div class="btn-group">
-  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-    Action
-    <span class="caret"></span>
-  </a>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
- -

Works with all button sizes

-

Button dropdowns work at any size: .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

-

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.

-
@@ -440,6 +379,18 @@ 
+<-- Single button -->
+<div class="btn-group">
+  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+    Action
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
+<-- Split button -->
 <div class="btn-group">
   <button class="btn">Action</button>
   <button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -451,13 +402,12 @@
 </div>
-

Sizes

-

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

+

Works with all button sizes

+

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

-
+
- - +
-
-
- - +
-
-
- - +
-
-<div class="btn-group">
-  <button class="btn btn-mini">Action</button>
-  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </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 buttons

+

Trigger dropdown menus above elements by adding .dropup to the parent.

-
+
-- cgit v1.2.3