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/base-css.html | 146 ---------- docs/components.html | 164 ++++++++++- docs/javascript.html | 748 +++++++++++++++++++++++++++++--------------------- docs/scaffolding.html | 41 ++- 4 files changed, 613 insertions(+), 486 deletions(-) (limited to 'docs') diff --git a/docs/base-css.html b/docs/base-css.html index c1cb3fd2d..29f5d1d19 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1277,152 +1277,6 @@
-

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.

-
-
- -
-

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