diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index cf4b1962f1..5a6bd971fb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -154,7 +154,6 @@ hr.soften { .subnav { width: 100%; height: 36px; - overflow: hidden; background-color: #eeeeee; /* Old browsers */ background-repeat: repeat-x; /* Repeat the gradient */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ @@ -172,37 +171,39 @@ hr.soften { .subnav .nav { margin-bottom: 0; } -.subnav .nav a { +.subnav .nav > li > a { margin: 0; padding-top: 11px; padding-bottom: 11px; font-size: 13px; - color: #777; + text-shadow: 0 1px 0 rgba(255,255,255,.5); border-left: 1px solid #f5f5f5; border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } -.subnav .nav a:hover, -.subnav .nav .active a { - background-color: transparent; - color: #333; -} -.subnav .nav .active a { +.subnav .nav > .active > a, +.subnav .nav > .active > a:hover { + padding-left: 13px; + color: #777; background-color: #e9e9e9; border-right-color: #ddd; border-left: 0; - padding-left: 13px; -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); box-shadow: inset 0 3px 5px rgba(0,0,0,.05); } -.subnav .nav li:first-child a { +.subnav .nav > .active > a .caret, +.subnav .nav > .active > a:hover .caret { + border-top-color: #777; +} +.subnav .nav > li:first-child > a, +.subnav .nav > li:first-child > a:hover { border-left: 0; padding-left: 12px; } -.subnav .nav li:last-child a { +.subnav .nav > li:last-child > a { border-right: 0; } diff --git a/docs/base-css.html b/docs/base-css.html index 7552fb9b91..167cb5e694 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -388,59 +388,6 @@ - -

Inline labels for special attention

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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> -
- diff --git a/docs/components.html b/docs/components.html index 6ebf6a4f06..a525582203 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.

-
-
-
-

{{_i}}Inline labels for special attention{{/i}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
- {{_i}}Default{{/i}} - - <span class="label">{{_i}}Default{{/i}}</span> -
- {{_i}}New{{/i}} - - <span class="label success">{{/_i}}New{{/i}}</span> -
- {{_i}}Warning{{/i}} - - <span class="label warning">{{_i}}Warning{{/i}}</span> -
- {{_i}}Important{{/i}} - - <span class="label important">{{_i}}Important{{/i}}</span> -
- {{_i}}Info{{/i}} - - <span class="label info">{{_i}}Info{{/i}}</span> -
-
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 48de1f8bf2..98e7c3f3f7 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -5,15 +5,27 @@

{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}

@@ -862,6 +874,66 @@ + +
+
+

{{_i}}Inline labels{{/i}} {{_i}}Label and annotate text{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
+ {{_i}}Default{{/i}} + + <span class="label">{{_i}}Default{{/i}}</span> +
+ {{_i}}New{{/i}} + + <span class="label success">{{/_i}}New{{/i}}</span> +
+ {{_i}}Warning{{/i}} + + <span class="label warning">{{_i}}Warning{{/i}}</span> +
+ {{_i}}Important{{/i}} + + <span class="label important">{{_i}}Important{{/i}}</span> +
+ {{_i}}Info{{/i}} + + <span class="label info">{{_i}}Info{{/i}}</span> +
+
+ + +
@@ -1103,32 +1175,32 @@ -
-
-

{{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

-
+
+
+

{{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}

+
-

{{_i}}Examples and markup{{/i}}

-
-
-

{{_i}}Basic{{/i}}

-

{{_i}}Default progress bar with a vertical gradient.{{/i}}

-
-
-
+

{{_i}}Examples and markup{{/i}}

+
+
+

{{_i}}Basic{{/i}}

+

{{_i}}Default progress bar with a vertical gradient.{{/i}}

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

{{_i}}Striped{{/i}}

-

{{_i}}Uses a gradient to create a striped effect.{{/i}}

-
-
-
+
+
+

{{_i}}Striped{{/i}}

+

{{_i}}Uses a gradient to create a striped effect.{{/i}}

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

{{_i}}Animated{{/i}}

-

{{_i}}Takes the striped example and animates it.{{/i}}

-
-
-
+
+
+

{{_i}}Animated{{/i}}

+

{{_i}}Takes the striped example and animates it.{{/i}}

+
+
+ 
 <div class="progress danger
      striped active">
@@ -1150,31 +1222,72 @@
        style="width: 40%;"></div>
 </div>
-
-
+
+
+ +

{{_i}}Options and browser support{{/i}}

+
+
+

{{_i}}Additional colors{{/i}}

+

{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}

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

{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}

+
+
+

{{_i}}Behavior{{/i}}

+

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

+

{{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}

+
+
+

{{_i}}Browser support{{/i}}

+

{{_i}}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.{{/i}}

+

{{_i}}Opera does not support animations at this time.{{/i}}

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

{{_i}}Miscellaneous{{/i}} {{_i}}Wells, badges, and close icon{{/i}}

+
+
+
+

{{_i}}Wells{{/i}}

+

{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

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

{{_i}}Close icon{{/i}}

+

{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

+

×

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

{{_i}}Options and browser support{{/i}}

-
-
-

{{_i}}Additional colors{{/i}}

-

{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}

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

{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}

-
-
-

{{_i}}Behavior{{/i}}

-

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

-

{{_i}}If you use the .active class, your .striped progress bars will animate the stripes left to right.{{/i}}

-
-
-

{{_i}}Browser support{{/i}}

-

{{_i}}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.{{/i}}

-

{{_i}}Opera does not support animations at this time.{{/i}}

-
-
-