diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/docs.css | 25 | ||||
| -rw-r--r-- | docs/base-css.html | 53 | ||||
| -rw-r--r-- | docs/components.html | 229 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 53 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 229 |
5 files changed, 355 insertions, 234 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index cf4b1962f..5a6bd971f 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 7552fb9b9..167cb5e69 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -388,59 +388,6 @@ </tbody> </table> - <!-- Labels --> - <h2>Inline labels <small>for special attention</small></h2> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 190px;">Labels</th> - <th>Markup</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <span class="label">Default</span> - </td> - <td> - <code><span class="label">Default</span></code> - </td> - </tr> - <tr> - <td> - <span class="label success">New</span> - </td> - <td> - <code><span class="label success">New</span></code> - </td> - </tr> - <tr> - <td> - <span class="label warning">Warning</span> - </td> - <td> - <code><span class="label warning">Warning</span></code> - </td> - </tr> - <tr> - <td> - <span class="label important">Important</span> - </td> - <td> - <code><span class="label important">Important</span></code> - </td> - </tr> - <tr> - <td> - <span class="label info">Info</span> - </td> - <td> - <code><span class="label info">Info</span></code> - </td> - </tr> - </tbody> - </table> - </section> 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 @@ <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> <div class="subnav"> <ul class="nav pills"> - <li><a href="#buttonGroups">Button groups</a></li> - <li><a href="#buttonDropdowns">Button dropdowns</a></li> - <li><a href="#navs">Nav, tabs, pills</a></li> - <li><a href="#navbar">Navbar</a></li> - <li><a href="#breadcrumbs">Breadcrumbs</a></li> - <li><a href="#pagination">Pagination</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#buttonGroups">Button groups</a></li> + <li><a href="#buttonDropdowns">Button dropdowns</a></li> + </ul> + </li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#navs">Nav, tabs, pills</a></li> + <li><a href="#navbar">Navbar</a></li> + <li><a href="#breadcrumbs">Breadcrumbs</a></li> + <li><a href="#pagination">Pagination</a></li> + </ul> + </li> + <li><a href="#labels">Labels</a></li> <li><a href="#thumbnails">Thumbnails</a></li> <li><a href="#alerts">Alerts</a></li> <li><a href="#progress">Progress bars</a></li> + <li><a href="#misc">Miscellaneous</a></li> </ul> </div> </header> @@ -927,6 +939,66 @@ +<!-- Labels +================================================== --> +<section id="labels"> + <div class="page-header"> + <h1>Inline labels <small>Label and annotate text</small></h1> + </div> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th style="width: 190px;">Labels</th> + <th>Markup</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <span class="label">Default</span> + </td> + <td> + <code><span class="label">Default</span></code> + </td> + </tr> + <tr> + <td> + <span class="label success">New</span> + </td> + <td> + <code><span class="label success">New</span></code> + </td> + </tr> + <tr> + <td> + <span class="label warning">Warning</span> + </td> + <td> + <code><span class="label warning">Warning</span></code> + </td> + </tr> + <tr> + <td> + <span class="label important">Important</span> + </td> + <td> + <code><span class="label important">Important</span></code> + </td> + </tr> + <tr> + <td> + <span class="label info">Info</span> + </td> + <td> + <code><span class="label info">Info</span></code> + </td> + </tr> + </tbody> + </table> +</section> + + + <!-- Thumbnails ================================================== --> <section id="thumbnails"> @@ -1168,32 +1240,32 @@ <!-- Progress bars ================================================== --> - <section id="progress"> - <div class="page-header"> - <h1>Progress bars <small>For loading, redirecting, or action status</small></h1> - </div> +<section id="progress"> + <div class="page-header"> + <h1>Progress bars <small>For loading, redirecting, or action status</small></h1> + </div> - <h2>Examples and markup</h2> - <div class="row"> - <div class="span4"> - <h3>Basic</h3> - <p>Default progress bar with a vertical gradient.</p> - <div class="progress"> - <div class="bar" style="width: 60%;"></div> - </div> + <h2>Examples and markup</h2> + <div class="row"> + <div class="span4"> + <h3>Basic</h3> + <p>Default progress bar with a vertical gradient.</p> + <div class="progress"> + <div class="bar" style="width: 60%;"></div> + </div> <pre class="prettyprint linenums"> <div class="progress"> <div class="bar" style="width: 60%;"></div> </div> </pre> - </div> - <div class="span4"> - <h3>Striped</h3> - <p>Uses a gradient to create a striped effect.</p> - <div class="progress info striped"> - <div class="bar" style="width: 20%;"></div> - </div> + </div> + <div class="span4"> + <h3>Striped</h3> + <p>Uses a gradient to create a striped effect.</p> + <div class="progress info striped"> + <div class="bar" style="width: 20%;"></div> + </div> <pre class="prettyprint linenums"> <div class="progress info striped"> @@ -1201,13 +1273,13 @@ style="width: 20%;"></div> </div> </pre> - </div> - <div class="span4"> - <h3>Animated</h3> - <p>Takes the striped example and animates it.</p> - <div class="progress danger active striped"> - <div class="bar" style="width: 45%"></div> - </div> + </div> + <div class="span4"> + <h3>Animated</h3> + <p>Takes the striped example and animates it.</p> + <div class="progress danger active striped"> + <div class="bar" style="width: 45%"></div> + </div> <pre class="prettyprint linenums"> <div class="progress danger striped active"> @@ -1215,34 +1287,75 @@ style="width: 40%;"></div> </div> </pre> - </div> - </div> + </div> + </div> + + <h2>Options and browser support</h2> + <div class="row"> + <div class="span4"> + <h3>Additional colors</h3> + <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p> + <ul> + <li><code>.info</code></li> + <li><code>.success</code></li> + <li><code>.danger</code></li> + </ul> + <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p> + </div> + <div class="span4"> + <h3>Behavior</h3> + <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p> + <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p> + </div> + <div class="span4"> + <h3>Browser support</h3> + <p>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.</p> + <p>Opera does not support animations at this time.</p> + </div> + </div> + +</section> + + + + + +<!-- Miscellaneous +================================================== --> +<section id="misc"> + <div class="page-header"> + <h1>Miscellaneous <small>Wells, badges, and close icon</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h2>Wells</h2> + <p>Use the well as a simple effect on an element to give it an inset effect.</p> + <div class="well"> + Look, I'm in a well! + </div> +<pre class="prettyprint linenums"> +<div class="well"> + ... +</div> +</pre> + </div><!--/span--> + <div class="span4" style="display: none;"> + <h2>Badges</h2> + <p>Use a badge on an element for an unread count or as a simple indicator.</p> +<pre class="prettyprint linenums"><span class="badge">3</div></pre> + </div><!--/span--> + <div class="span4"> + <h2>Close icon</h2> + <p>Use the generic close icon for dismissing content like modals and alerts.</p> + <p><a class="close" style="float: none;">×</a></p> +<pre class="prettyprint linenums"><a class="close">&times;</a></pre> + </div><!--/span--> + </div><!--/row--> +</section> + + - <h2>Options and browser support</h2> - <div class="row"> - <div class="span4"> - <h3>Additional colors</h3> - <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p> - <ul> - <li><code>.info</code></li> - <li><code>.success</code></li> - <li><code>.danger</code></li> - </ul> - <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p> - </div> - <div class="span4"> - <h3>Behavior</h3> - <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p> - <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p> - </div> - <div class="span4"> - <h3>Browser support</h3> - <p>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.</p> - <p>Opera does not support animations at this time.</p> - </div> - </div> - </section> <!-- Footer 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 @@ </tbody> </table> - <!-- Labels --> - <h2>{{_i}}Inline labels <small>for special attention</small>{{/i}}</h2> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 190px;">{{_i}}Labels{{/i}}</th> - <th>{{_i}}Markup{{/i}}</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <span class="label">{{_i}}Default{{/i}}</span> - </td> - <td> - <code><span class="label">{{_i}}Default{{/i}}</span></code> - </td> - </tr> - <tr> - <td> - <span class="label success">{{_i}}New{{/i}}</span> - </td> - <td> - <code><span class="label success">{{/_i}}New{{/i}}</span></code> - </td> - </tr> - <tr> - <td> - <span class="label warning">{{_i}}Warning{{/i}}</span> - </td> - <td> - <code><span class="label warning">{{_i}}Warning{{/i}}</span></code> - </td> - </tr> - <tr> - <td> - <span class="label important">{{_i}}Important{{/i}}</span> - </td> - <td> - <code><span class="label important">{{_i}}Important{{/i}}</span></code> - </td> - </tr> - <tr> - <td> - <span class="label info">{{_i}}Info{{/i}}</span> - </td> - <td> - <code><span class="label info">{{_i}}Info{{/i}}</span></code> - </td> - </tr> - </tbody> - </table> - </section> 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 @@ <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p> <div class="subnav"> <ul class="nav pills"> - <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li> - <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li> - <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li> - <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li> - <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li> - <li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#buttonGroups">Button groups</a></li> + <li><a href="#buttonDropdowns">Button dropdowns</a></li> + </ul> + </li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Navigation{{/i}} <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li> + <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li> + <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li> + <li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li> + </ul> + </li> + <li><a href="#labels">{{_i}}Labels{{/i}}</a></li> <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li> <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li> <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li> + <li><a href="#misc">{{_i}}Miscellaneous{{/i}}</a></li> </ul> </div> </header> @@ -862,6 +874,66 @@ +<!-- Labels +================================================== --> +<section id="labels"> + <div class="page-header"> + <h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1> + </div> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th style="width: 190px;">{{_i}}Labels{{/i}}</th> + <th>{{_i}}Markup{{/i}}</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <span class="label">{{_i}}Default{{/i}}</span> + </td> + <td> + <code><span class="label">{{_i}}Default{{/i}}</span></code> + </td> + </tr> + <tr> + <td> + <span class="label success">{{_i}}New{{/i}}</span> + </td> + <td> + <code><span class="label success">{{/_i}}New{{/i}}</span></code> + </td> + </tr> + <tr> + <td> + <span class="label warning">{{_i}}Warning{{/i}}</span> + </td> + <td> + <code><span class="label warning">{{_i}}Warning{{/i}}</span></code> + </td> + </tr> + <tr> + <td> + <span class="label important">{{_i}}Important{{/i}}</span> + </td> + <td> + <code><span class="label important">{{_i}}Important{{/i}}</span></code> + </td> + </tr> + <tr> + <td> + <span class="label info">{{_i}}Info{{/i}}</span> + </td> + <td> + <code><span class="label info">{{_i}}Info{{/i}}</span></code> + </td> + </tr> + </tbody> + </table> +</section> + + + <!-- Thumbnails ================================================== --> <section id="thumbnails"> @@ -1103,32 +1175,32 @@ <!-- Progress bars ================================================== --> - <section id="progress"> - <div class="page-header"> - <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1> - </div> +<section id="progress"> + <div class="page-header"> + <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1> + </div> - <h2>{{_i}}Examples and markup{{/i}}</h2> - <div class="row"> - <div class="span4"> - <h3>{{_i}}Basic{{/i}}</h3> - <p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p> - <div class="progress"> - <div class="bar" style="width: 60%;"></div> - </div> + <h2>{{_i}}Examples and markup{{/i}}</h2> + <div class="row"> + <div class="span4"> + <h3>{{_i}}Basic{{/i}}</h3> + <p>{{_i}}Default progress bar with a vertical gradient.{{/i}}</p> + <div class="progress"> + <div class="bar" style="width: 60%;"></div> + </div> <pre class="prettyprint linenums"> <div class="progress"> <div class="bar" style="width: 60%;"></div> </div> </pre> - </div> - <div class="span4"> - <h3>{{_i}}Striped{{/i}}</h3> - <p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p> - <div class="progress info striped"> - <div class="bar" style="width: 20%;"></div> - </div> + </div> + <div class="span4"> + <h3>{{_i}}Striped{{/i}}</h3> + <p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p> + <div class="progress info striped"> + <div class="bar" style="width: 20%;"></div> + </div> <pre class="prettyprint linenums"> <div class="progress info striped"> @@ -1136,13 +1208,13 @@ style="width: 20%;"></div> </div> </pre> - </div> - <div class="span4"> - <h3>{{_i}}Animated{{/i}}</h3> - <p>{{_i}}Takes the striped example and animates it.{{/i}}</p> - <div class="progress danger active striped"> - <div class="bar" style="width: 45%"></div> - </div> + </div> + <div class="span4"> + <h3>{{_i}}Animated{{/i}}</h3> + <p>{{_i}}Takes the striped example and animates it.{{/i}}</p> + <div class="progress danger active striped"> + <div class="bar" style="width: 45%"></div> + </div> <pre class="prettyprint linenums"> <div class="progress danger striped active"> @@ -1150,31 +1222,72 @@ style="width: 40%;"></div> </div> </pre> - </div> - </div> + </div> + </div> + + <h2>{{_i}}Options and browser support{{/i}}</h2> + <div class="row"> + <div class="span4"> + <h3>{{_i}}Additional colors{{/i}}</h3> + <p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p> + <ul> + <li><code>.info</code></li> + <li><code>.success</code></li> + <li><code>.danger</code></li> + </ul> + <p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p> + </div> + <div class="span4"> + <h3>{{_i}}Behavior{{/i}}</h3> + <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p> + <p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p> + </div> + <div class="span4"> + <h3>{{_i}}Browser support{{/i}}</h3> + <p>{{_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}}</p> + <p>{{_i}}Opera does not support animations at this time.{{/i}}</p> + </div> + </div> + +</section> + + + + + +<!-- Miscellaneous +================================================== --> +<section id="misc"> + <div class="page-header"> + <h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Wells, badges, and close icon{{/i}}</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h2>{{_i}}Wells{{/i}}</h2> + <p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p> + <div class="well"> + {{_i}}Look, I'm in a well!{{/i}} + </div> +<pre class="prettyprint linenums"> +<div class="well"> + ... +</div> +</pre> + </div><!--/span--> + <div class="span4" style="display: none;"> + <h2>{{_i}}Badges{{/i}}</h2> + <p>{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}</p> +<pre class="prettyprint linenums"><span class="badge">3</div></pre> + </div><!--/span--> + <div class="span4"> + <h2>{{_i}}Close icon{{/i}}</h2> + <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p> + <p><a class="close" style="float: none;">×</a></p> +<pre class="prettyprint linenums"><a class="close">&times;</a></pre> + </div><!--/span--> + </div><!--/row--> +</section> + + - <h2>{{_i}}Options and browser support{{/i}}</h2> - <div class="row"> - <div class="span4"> - <h3>{{_i}}Additional colors{{/i}}</h3> - <p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p> - <ul> - <li><code>.info</code></li> - <li><code>.success</code></li> - <li><code>.danger</code></li> - </ul> - <p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p> - </div> - <div class="span4"> - <h3>{{_i}}Behavior{{/i}}</h3> - <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p> - <p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p> - </div> - <div class="span4"> - <h3>{{_i}}Browser support{{/i}}</h3> - <p>{{_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}}</p> - <p>{{_i}}Opera does not support animations at this time.{{/i}}</p> - </div> - </div> - </section> |