From 0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 02:21:02 -0700 Subject: adding button groups and toolbars like a boss --- docs/index.html | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 80 insertions(+), 5 deletions(-) (limited to 'docs') diff --git a/docs/index.html b/docs/index.html index d24bb1afd..137144991 100644 --- a/docs/index.html +++ b/docs/index.html @@ -898,7 +898,7 @@

- +

Search form

@@ -911,7 +911,7 @@
- +

Inline form

@@ -928,7 +928,7 @@
- +

Horizontal form

@@ -1032,7 +1032,7 @@
-
+

Vertical form

@@ -1075,7 +1075,82 @@
-
+ + +
+
+

Buttons

+

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

+

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class.

+
+
+

Example buttons

+

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

+
+      +
+

Alternate sizes

+

Fancy larger or smaller buttons? Have at it!

+
+ Primary action + Action +
+
+ Primary action + Action +
+

Disabled state

+

For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

+

Links

+
+ Primary action + Action +
+

Buttons

+
+   +
+
+
+ +
+
+

Button groups

+
+
+

Example

+
+
+ Left + Middle + Right +
+
+
+
+
+ 1 + 2 + 3 + 4 + 5 +
+
+ 6 + 7 + 8 +
+
+ 9 +
+
+ 10 +
+
+
+
+
+ -- cgit v1.2.3