root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

clean up docs for subnav

This commit is contained in:
Mark Otto 2012-07-12 13:50:27 -07:00
parent 338c7ef2b6
commit c884d6eaa6
5 changed files with 76 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/assets/css/bootstrap.css vendored
View File

@ -4301,6 +4301,48 @@ input[type="submit"].btn.btn-mini {
color: #005580;
}
.navbar-subnav .btn-navbar {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ededed;
*background-color: #e4e4e4;
background-image: -moz-linear-gradient(top, #f2f2f2, #e4e4e4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e4e4e4));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e4e4e4);
background-image: -o-linear-gradient(top, #f2f2f2, #e4e4e4);
background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
background-repeat: repeat-x;
border-color: #e4e4e4 #e4e4e4 #bebebe;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe4e4e4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-subnav .btn-navbar:hover,
.navbar-subnav .btn-navbar:active,
.navbar-subnav .btn-navbar.active,
.navbar-subnav .btn-navbar.disabled,
.navbar-subnav .btn-navbar[disabled] {
color: #ffffff;
background-color: #e4e4e4;
*background-color: #d7d7d7;
}
.navbar-subnav .btn-navbar:active,
.navbar-subnav .btn-navbar.active {
background-color: #cbcbcb \9;
}
.navbar .btn-navbar .icon-bar {
background-color: #999;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-subnav-fixed {
position: fixed;
top: 40px;

5
docs/assets/css/docs.css
View File

@ -570,6 +570,11 @@ h2 + .row {
padding: 0;
height: 90px;
}
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
margin-left: 0;
margin-right: 0;
}
.bs-navbar-top-example {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;

13
docs/components.html
View File

@ -1228,19 +1228,19 @@
<hr class="bs-docs-separator">
<h2>Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<h2>Subnav variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-subnav</code>. Perfect for a secondary nav, or just a replacement to the default dark navbar.</p>
<div class="bs-docs-example">
<div class="navbar navbar-subnav" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse">
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
@ -1280,6 +1280,11 @@
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-subnav"&gt;
...
&lt;/div&gt;
</pre>
</section>

13
docs/templates/pages/components.mustache vendored
View File

@ -1158,19 +1158,19 @@
<hr class="bs-docs-separator">
<h2>{{_i}}Responsive navbar{{/i}}</h2>
<p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<h2>{{_i}}Subnav variation{{/i}}</h2>
<p>{{_i}}Modify the look of the navbar by adding <code>.navbar-subnav</code>. Perfect for a secondary nav, or just a replacement to the default dark navbar.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar navbar-subnav" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
<div class="nav-collapse">
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
@ -1210,6 +1210,11 @@
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>{{! /example }}
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-subnav"&gt;
...
&lt;/div&gt;
</pre>
</section>

11
less/navbar.less
View File

@ -439,6 +439,17 @@
color: @linkColorHover;
}
// Collapse button
.navbar-subnav .btn-navbar {
.buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)");
}
.navbar .btn-navbar .icon-bar {
background-color: #999;
.box-shadow(0 1px 0 rgba(0,0,0,.25));
}
// Fixed subnav on scroll, but only for 980px and up (sorry IE!)
.navbar-subnav-fixed {
position: fixed;