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/assets/css/docs.css | 3 +- docs/base-css.html | 142 +++++++++++++++++++++++++++++++++++++++++------ docs/javascript.html | 6 +- docs/upgrading.html | 6 ++ 4 files changed, 136 insertions(+), 21 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 1180effd1..c359cf73b 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -402,7 +402,8 @@ pre.prettyprint { } /* Make tables spaced out a bit more */ -h2 + table { +h2 + table, +h2 + .row { margin-top: 5px; } 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 @@ + + diff --git a/docs/javascript.html b/docs/javascript.html index 1cba7766f..4671dd6eb 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -274,7 +274,7 @@ $('#myModal').on('hidden', function () { <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li id="secondary" class="dropdown"> - <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -302,7 +302,7 @@ $('#myModal').on('hidden', function () {