Skip to content

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

fix up subnav styles, add subnav search form styles, add some basic docs for subnav

parent a645664e
Show whitespace changes
Inline Side-by-side
Showing with 149 additions and 7 deletions
docs/assets/css/bootstrap.css
View file @ c6ee96c0
...@@ -4185,13 +4185,12 @@ input[type="submit"].btn.btn-mini { ...@@ -4185,13 +4185,12 @@ input[type="submit"].btn.btn-mini {
-------------------------------------------------- */ -------------------------------------------------- */
.navbar-subnav .navbar-inner { .navbar-subnav .navbar-inner {
padding: 0;
background-color: #f9f9f9; background-color: #f9f9f9;
background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1); background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -o-linear-gradient(top, #ffffff, #f1f1f1); background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
background-image: linear-gradient(top, #ffffff, #f1f1f1); background-image: linear-gradient(top, #ffffff, #f1f1f1);
background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
background-repeat: repeat-x; background-repeat: repeat-x;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
...@@ -4229,6 +4228,23 @@ input[type="submit"].btn.btn-mini { ...@@ -4229,6 +4228,23 @@ input[type="submit"].btn.btn-mini {
border-bottom-color: #0088cc; border-bottom-color: #0088cc;
} }
.navbar-subnav .search-query {
background-color: #fff;
border-color: #ccc;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-subnav .search-query:focus,
.navbar-subnav .search-query.focused {
padding: 4px 9px;
border: 1px solid rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
.navbar-subnav .nav .open > a { .navbar-subnav .nav .open > a {
color: #005580; color: #005580;
} }
......
docs/assets/js/application.js
View file @ c6ee96c0
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
// fix sub nav on scroll // fix sub nav on scroll
var $win = $(window) var $win = $(window)
, $nav = $('.navbar-subnav') , $nav = $('.subhead .navbar-subnav')
, navTop = $('.navbar-subnav').length && $('.navbar-subnav').offset().top - 40 , navTop = $('.subhead .navbar-subnav').length && $('.subhead .navbar-subnav').offset().top - 40
, isFixed = 0 , isFixed = 0
processScroll() processScroll()
......
docs/components.html
View file @ c6ee96c0
...@@ -1254,6 +1254,63 @@ ...@@ -1254,6 +1254,63 @@
<strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>. <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div> </div>
<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>
<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">
<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">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>
</section> </section>
......
docs/templates/pages/components.mustache
View file @ c6ee96c0
...@@ -1177,6 +1177,63 @@ ...@@ -1177,6 +1177,63 @@
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>. <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div> </div>
<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>
<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">
<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">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">{{_i}}Link{{/i}}</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>{{! /example }}
</section> </section>
......
less/navbar.less
View file @ c6ee96c0
...@@ -379,10 +379,7 @@ ...@@ -379,10 +379,7 @@
// Override the default .navbar // Override the default .navbar
.navbar-subnav {
}
.navbar-subnav .navbar-inner { .navbar-subnav .navbar-inner {
padding: 0;
#gradient > .vertical(#ffffff, #f1f1f1); #gradient > .vertical(#ffffff, #f1f1f1);
.box-shadow(none); .box-shadow(none);
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
...@@ -421,6 +418,21 @@ ...@@ -421,6 +418,21 @@
border-bottom-color: @linkColor; border-bottom-color: @linkColor;
} }
// Reset search input form
.navbar-subnav .search-query {
background-color: #fff;
border-color: #ccc;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
// On :focus, keep the same padding and border
&:focus,
&.focused {
padding: 4px 9px;
border: 1px solid rgba(82,168,236,.8);
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
}
}
// Open dropdown dropdown-toggle // Open dropdown dropdown-toggle
.navbar-subnav .nav .open > a { .navbar-subnav .nav .open > a {
color: @linkColorHover; color: @linkColorHover;
......
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