From 02bf27592c8eec51795ac806390bc57db501926d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2011 19:37:10 -0700 Subject: overhaul the table styles and update those everywhere in the docs, update the button docs, spec out the forms docs --- docs/base-css.html | 228 +++++++++++++++++++++++++++++++++++------------------ 1 file changed, 151 insertions(+), 77 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 2872fbb99..6d3d92a17 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -88,7 +88,7 @@

Emphasis, address, and abbreviation

- +
@@ -175,7 +175,7 @@

Blockquotes

-
Element
+
@@ -321,7 +321,7 @@

Code Inline and block

-
Element
+
@@ -363,7 +363,7 @@

Inline labels for special attention

-
Element
+
@@ -428,7 +428,7 @@

Table markup

-
Labels
+
@@ -517,7 +517,7 @@

Table options

-
Tag
+
@@ -592,9 +592,9 @@ <table> ... </table> -

2. Zebra-striped

-

Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

-
Name
+

2. Striped table

+

Get a little fancy with your tables by adding zebra-striping—just add the .striped-table class.

+
@@ -626,12 +626,12 @@
#

Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

-<table class="zebra-striped">
+<table class="striped-table">
 ...
 </table>
-

3. Zebra-striped w/ TableSorter.js

+

3. Striped table w/ TableSorter.js

Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

- +
@@ -668,7 +668,7 @@ $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); }); </script> -<table class="zebra-striped"> +<table class="striped-table"> ... </table> @@ -682,19 +682,49 @@

Forms

+ +

Four types of forms

+
#
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameClassDescription
Vertical (default).vertical-form (not required)Stacked, left-aligned labels over controls
Horiztonal.horizontal-formFloat left, right-aligned labels on same line as controls
Inline.inline-formLeft-aligned label and inline-block controls for compact style
Search.search-formExtra-rounded text input for a typical search aesthetic
+ +
-

Four types of forms

-

With 2.0, we now have four types of forms to choose from:

-
    -
  • Search form for a super-rounded input and optional button
    • -
  • Inline form for a series of elements on one line
    • -
  • Horizontal form for left-aligned labels
    • -
  • Vertical form for stacked labels and inputs
    • -
+

Why four types

+

With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.

-

+

Vertical or horizontal

+

Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. They share the same exact markup; just swap the class.

@@ -875,79 +905,123 @@
+ + +

Buttons

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePreviewClassDescription
DefaultButton.btnStandard gray button with gradient
PrimaryButton.primaryMakes button blue for more visual weight to indicate the primary action in a set of buttons
InfoButton.infoUsed as an alternate to the default styles
SuccessButton.successUsed to indicate a successful or positive action will be taken
DangerButton.dangerUsed to indicate a dangerous or potentially negative action will be taken
+
-
-

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.

+
+

Buttons for actions

+

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

-
-

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

+
+

For anchors and forms

+

Button styles can be applied to anything with the .btn applied. However, typically you’ll want to apply these to only <a> and <button> elements.

+
+
+

Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.

+
+
+ +
+
+

Multiple 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

+

Button groups

+ +
+
+ Left + Middle + Right
-
-

Example

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