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 +++++++++++++++++++++++++++++++++----------------- docs/javascript.html | 10 +-- docs/less.html | 2 +- docs/scaffolding.html | 4 +- 4 files changed, 159 insertions(+), 85 deletions(-) (limited to 'docs') 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
-
+
diff --git a/docs/javascript.html b/docs/javascript.html index c9ac7e21d..3175d261e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -88,7 +88,7 @@

What's included

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

- +
@@ -151,7 +151,7 @@

Using bootstrap-modal

$('#my-modal').modal(options)

Options

-
File
+
@@ -209,7 +209,7 @@ $('#my-modal').modal({

Notice Alternatively, this can be retrieved with $().data('modal').

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

-
Name
+
@@ -457,7 +457,7 @@ $('#my-modal').bind('hidden', function () {

Using bootstrap-twipsy.js

$('#example').twipsy(options)

Options

-
Event
+
@@ -574,7 +574,7 @@ $('#my-modal').bind('hidden', function () {

Using boostrap-popover.js

$('#example').popover(options)

Options

-
Name
+
diff --git a/docs/less.html b/docs/less.html index d5a467bfa..4fa0f0bdd 100644 --- a/docs/less.html +++ b/docs/less.html @@ -166,7 +166,7 @@

Compiling Less

After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.

Ways to compile

-
Name
+
diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 4a5aa9a0b..de50caf8d 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -161,7 +161,7 @@

Grid customization

-
Method
+
@@ -273,7 +273,7 @@

Supported devices

Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

-
Variable
+
-- cgit v1.2.3
Label