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/templates/pages/base-css.mustache | 53 ------- docs/templates/pages/components.mustache | 229 +++++++++++++++++++++++-------- 2 files changed, 171 insertions(+), 111 deletions(-) (limited to 'docs/templates') diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 23a6a37a2..ad27d2be8 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -323,59 +323,6 @@ - -

{{_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 48de1f8bf..98e7c3f3f 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}}

-
-
-
-- cgit v1.2.3