Skip to content

B
bootstrap
Commit cb8606f2 authored by Mark Otto's avatar Mark Otto
Browse files
Options

adding wells and close icon to the docs under misc in components, with a new subnav style

parent ad78caa7
Show whitespace changes
Inline Side-by-side
Showing with 355 additions and 234 deletions
docs/assets/css/docs.css
View file @ cb8606f2
...@@ -154,7 +154,6 @@ hr.soften { ...@@ -154,7 +154,6 @@ hr.soften {
.subnav { .subnav {
width: 100%; width: 100%;
height: 36px; height: 36px;
overflow: hidden;
background-color: #eeeeee; /* Old browsers */ background-color: #eeeeee; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */ background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
...@@ -172,37 +171,39 @@ hr.soften { ...@@ -172,37 +171,39 @@ hr.soften {
.subnav .nav { .subnav .nav {
margin-bottom: 0; margin-bottom: 0;
} }
.subnav .nav a { .subnav .nav > li > a {
margin: 0; margin: 0;
padding-top: 11px; padding-top: 11px;
padding-bottom: 11px; padding-bottom: 11px;
font-size: 13px; font-size: 13px;
color: #777; text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-left: 1px solid #f5f5f5; border-left: 1px solid #f5f5f5;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
} }
.subnav .nav a:hover, .subnav .nav > .active > a,
.subnav .nav .active a { .subnav .nav > .active > a:hover {
background-color: transparent; padding-left: 13px;
color: #333; color: #777;
}
.subnav .nav .active a {
background-color: #e9e9e9; background-color: #e9e9e9;
border-right-color: #ddd; border-right-color: #ddd;
border-left: 0; border-left: 0;
padding-left: 13px;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
-moz-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); 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; border-left: 0;
padding-left: 12px; padding-left: 12px;
} }
.subnav .nav li:last-child a { .subnav .nav > li:last-child > a {
border-right: 0; border-right: 0;
} }
......
docs/base-css.html
View file @ cb8606f2
...@@ -388,59 +388,6 @@ ...@@ -388,59 +388,6 @@
</tbody> </tbody>
</table> </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>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label success">New</span>
</td>
<td>
<code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label warning">Warning</span>
</td>
<td>
<code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label important">Important</span>
</td>
<td>
<code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label info">Info</span>
</td>
<td>
<code>&lt;span class="label info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section> </section>
......
docs/components.html
View file @ cb8606f2
...@@ -70,15 +70,27 @@ ...@@ -70,15 +70,27 @@
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<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="#buttonGroups">Button groups</a></li>
<li><a href="#buttonDropdowns">Button dropdowns</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="#navs">Nav, tabs, pills</a></li>
<li><a href="#navbar">Navbar</a></li> <li><a href="#navbar">Navbar</a></li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li> <li><a href="#breadcrumbs">Breadcrumbs</a></li>
<li><a href="#pagination">Pagination</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="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li> <li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li> <li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Miscellaneous</a></li>
</ul> </ul>
</div> </div>
</header> </header>
...@@ -927,6 +939,66 @@ ...@@ -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>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label success">New</span>
</td>
<td>
<code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label warning">Warning</span>
</td>
<td>
<code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label important">Important</span>
</td>
<td>
<code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label info">Info</span>
</td>
<td>
<code>&lt;span class="label info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section>
<!-- Thumbnails <!-- Thumbnails
================================================== --> ================================================== -->
<section id="thumbnails"> <section id="thumbnails">
...@@ -1168,7 +1240,7 @@ ...@@ -1168,7 +1240,7 @@
<!-- Progress bars <!-- Progress bars
================================================== --> ================================================== -->
<section id="progress"> <section id="progress">
<div class="page-header"> <div class="page-header">
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1> <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
</div> </div>
...@@ -1242,7 +1314,48 @@ ...@@ -1242,7 +1314,48 @@
</div> </div>
</div> </div>
</section> </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">
&lt;div class="well"&gt;
...
&lt;/div&gt;
</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">&lt;span class="badge"&gt;3&lt;/div&gt;</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;">&times;</a></p>
<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
</div><!--/span-->
</div><!--/row-->
</section>
<!-- Footer <!-- Footer
......
docs/templates/pages/base-css.mustache
View file @ cb8606f2
...@@ -323,59 +323,6 @@ ...@@ -323,59 +323,6 @@
</tbody> </tbody>
</table> </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>&lt;span class="label"&gt;{{_i}}Default{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label success">{{_i}}New{{/i}}</span>
</td>
<td>
<code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label warning">{{_i}}Warning{{/i}}</span>
</td>
<td>
<code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label important">{{_i}}Important{{/i}}</span>
</td>
<td>
<code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label info">{{_i}}Info{{/i}}</span>
</td>
<td>
<code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section> </section>
......
docs/templates/pages/components.mustache
View file @ cb8606f2
...@@ -5,15 +5,27 @@ ...@@ -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> <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"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li> <li class="dropdown">
<li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li> <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="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
<li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li> <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
<li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li> <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
<li><a href="#pagination">{{_i}}Pagination{{/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="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/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="#progress">{{_i}}Progress bars{{/i}}</a></li>
<li><a href="#misc">{{_i}}Miscellaneous{{/i}}</a></li>
</ul> </ul>
</div> </div>
</header> </header>
...@@ -862,6 +874,66 @@ ...@@ -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>&lt;span class="label"&gt;{{_i}}Default{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label success">{{_i}}New{{/i}}</span>
</td>
<td>
<code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label warning">{{_i}}Warning{{/i}}</span>
</td>
<td>
<code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label important">{{_i}}Important{{/i}}</span>
</td>
<td>
<code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label info">{{_i}}Info{{/i}}</span>
</td>
<td>
<code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</section>
<!-- Thumbnails <!-- Thumbnails
================================================== --> ================================================== -->
<section id="thumbnails"> <section id="thumbnails">
...@@ -1103,7 +1175,7 @@ ...@@ -1103,7 +1175,7 @@
<!-- Progress bars <!-- Progress bars
================================================== --> ================================================== -->
<section id="progress"> <section id="progress">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1> <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
</div> </div>
...@@ -1177,4 +1249,45 @@ ...@@ -1177,4 +1249,45 @@
</div> </div>
</div> </div>
</section> </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">
&lt;div class="well"&gt;
...
&lt;/div&gt;
</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">&lt;span class="badge"&gt;3&lt;/div&gt;</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;">&times;</a></p>
<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
</div><!--/span-->
</div><!--/row-->
</section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment