From cb8606f2c84adb57c82dd7bd401574a2376ff952 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 22:52:45 -0800 Subject: adding wells and close icon to the docs under misc in components, with a new subnav style --- docs/components.html | 229 ++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 171 insertions(+), 58 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 6ebf6a4f0..a52558220 100644 --- a/docs/components.html +++ b/docs/components.html @@ -70,15 +70,27 @@

Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

@@ -927,6 +939,66 @@ + +
+
+

Inline labels Label and annotate text

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelsMarkup
+ Default + + <span class="label">Default</span> +
+ New + + <span class="label success">New</span> +
+ Warning + + <span class="label warning">Warning</span> +
+ Important + + <span class="label important">Important</span> +
+ Info + + <span class="label info">Info</span> +
+
+ + +
@@ -1168,32 +1240,32 @@ -
-
-

Progress bars For loading, redirecting, or action status

-
+
+
+

Progress bars For loading, redirecting, or action status

+
-

Examples and markup

-
-
-

Basic

-

Default progress bar with a vertical gradient.

-
-
-
+

Examples and markup

+
+
+

Basic

+

Default progress bar with a vertical gradient.

+
+
+ 
 <div class="progress">
   <div class="bar"
        style="width: 60%;"></div>
 </div>
-
-
-

Striped

-

Uses a gradient to create a striped effect.

-
-
-
+
+
+

Striped

+

Uses a gradient to create a striped effect.

+
+
+ 
 <div class="progress info
      striped">
@@ -1201,13 +1273,13 @@
        style="width: 20%;"></div>
 </div>
-
-
-

Animated

-

Takes the striped example and animates it.

-
-
-
+
+
+

Animated

+

Takes the striped example and animates it.

+
+
+ 
 <div class="progress danger
      striped active">
@@ -1215,34 +1287,75 @@
        style="width: 40%;"></div>
 </div>
-
-
+
+
+ +

Options and browser support

+
+
+

Additional colors

+

Progress bars utilize some of the same classes as buttons and alert messages for quick styling.

+
    +
  • .info
    • +
  • .success
    • +
  • .danger
    • +
+

Alternatively, you can customize the LESS files and roll your own colors and sizes.

+
+
+

Behavior

+

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

+

If you use the .active class, your .striped progress bars will animate the stripes left to right.

+
+
+

Browser support

+

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

+

Opera does not support animations at this time.

+
+
+ +
+ + + + + + +
+
+

Miscellaneous Wells, badges, and close icon

+
+
+
+

Wells

+

Use the well as a simple effect on an element to give it an inset effect.

+
+ Look, I'm in a well! +
+
+<div class="well">
+  ...
+</div>
+
+
+ +
+

Close icon

+

Use the generic close icon for dismissing content like modals and alerts.

+

×

+
<a class="close">&times;</a>
+
+
+
+ + -

Options and browser support

-
-
-

Additional colors

-

Progress bars utilize some of the same classes as buttons and alert messages for quick styling.

-
    -
  • .info
    • -
  • .success
    • -
  • .danger
    • -
-

Alternatively, you can customize the LESS files and roll your own colors and sizes.

-
-
-

Behavior

-

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

-

If you use the .active class, your .striped progress bars will animate the stripes left to right.

-
-
-

Browser support

-

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

-

Opera does not support animations at this time.

-
-
-