From 8ccc3bcf03fedbe8c3a19a96c08a5cad6ae456e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 03:45:24 -0800 Subject: overhauled dropdowns now require use of .caret for dropdown arrow, redid the button group docs section, added the split button dropdown docs section --- docs/base-css.html | 142 ++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 125 insertions(+), 17 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 910ea10bb..5a8b0b267 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1203,17 +1203,12 @@
+

Button groups Join buttons for more toolbar-like functionality

-

Button groups

-

Use button groups to join multiple buttons together as one composite component. Just build them with a series of <a> or <button> elements. Button groups can also function as radios and checkboxes (see the Javascript docs for that).

-

You can also combine sets of button groups into a toolbar for more complex projects.

-

Get the javascript »

-

Heads up: CSS for button groups is in a separate file, button-groups.less.

-
-
-

Linked button group

-

Using the standard <a class="btn" href="#">...</a> markup, simply add all the buttons you need.

+

Button groups

+

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

+

You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

Left @@ -1221,7 +1216,6 @@ Right
-

Level up one more time by wrapping multiple instances of <div class="btn-group"> with <div class="btn-toolbar">.

@@ -1229,24 +1223,132 @@ 2 3 4 - 5
+ 5 6 7 - 8 -
-
- 9
- 10 + 8
+ +
+
+

Example markup

+

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

+
+<div class="btn-group">
+  <a class="btn" href="#">1</a>
+  <a class="btn" href="#">2</a>
+  <a class="btn" href="#">3</a>
+</div>
+
+

And with a toolbar for multiple groups:

+
+<div class="btn-toolbar">
+  <div class="btn-group">
+    ...
+  </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 »

+
+

Heads up

+

CSS for button groups is in a separate file, button-groups.less.

+
+
+ +
+

Button dropdowns Built on button groups to provide contextual menus

+
+
+

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.

+
+
+
+ Action + + +
+
+ Action + + +
+
+ Danger + + +
+
+
+
+ Success + + +
+
+ Info + + +
+
+
+
+
+

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" href="#">Action</a>
+  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+    <span class="caret"></span>
+  </a>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
- @@ -1454,5 +1556,11 @@ + + -- cgit v1.2.3