adding wells and close icon to the docs under misc in components, with a new subnav style
This commit is contained in:
Mark Otto
parent
ad78caa726
commit
cb8606f2c8
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue