From 83c0896999c91f4d85bb75434f4a4ecfaff07fe0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 21:48:07 -0800 Subject: updated js pages to put examples first --- docs/components.html | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 163 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 104bedf54..f3e8d42a5 100644 --- a/docs/components.html +++ b/docs/components.html @@ -55,9 +55,171 @@ + +
+
+

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.

+

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

+
+
+ Left + Middle + Right +
+
+
+
+
+ 1 + 2 + 3 + 4 +
+
+ 5 + 6 + 7 +
+
+ 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.

+
+
+
+ + + + +
+
+

Split 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>
+
+
+
+
+ + + -
+