0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00

update collapsible nav in navbar

This commit is contained in:
Mark Otto 2012-01-29 14:07:14 -08:00
parent 391661f14b
commit 9e7f5025b4
17 changed files with 27 additions and 20 deletions

Binary file not shown.

View File

@ -218,7 +218,7 @@
position: static; position: static;
margin-bottom: 18px; margin-bottom: 18px;
} }
.navbar-inner { .navbar-fixed-top .navbar-inner {
padding: 5px; padding: 5px;
background-image: none; background-image: none;
} }
@ -305,10 +305,13 @@
.btn-navbar { .btn-navbar {
display: block; display: block;
} }
.nav-collapse { .nav-collapse.collapse {
overflow: hidden; overflow: hidden;
height: 0; height: 0;
} }
.nav-collapse.collapse.in {
height: auto;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.thumbnails { .thumbnails {

View File

@ -2396,7 +2396,7 @@ button.btn.small, input[type="submit"].btn.small {
margin-top: 3px; margin-top: 3px;
} }
.nav-collapse.collapse { .nav-collapse.collapse {
height: auto !important; height: auto;
} }
.navbar .brand:hover { .navbar .brand:hover {
text-decoration: none; text-decoration: none;

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class="active"> <li class="active">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>
@ -127,7 +127,7 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p> <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
<p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p> <p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.</p>
</div> </div>
<div class="span4"> <div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class="{{index}}"> <li class="{{index}}">
<a href="./index.html">{{_i}}Overview{{/i}}</a> <a href="./index.html">{{_i}}Overview{{/i}}</a>

View File

@ -669,7 +669,7 @@
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<h3>{{_i}}Optional responsive variation{{/i}}</h3> <h3>{{_i}}Optional responsive variation{{/i}}</h3>
<p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p> <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="navbar"&gt; &lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt; &lt;div class="navbar-inner"&gt;
@ -686,7 +686,7 @@
&lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt; &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
&lt;!-- Everything you want hidden at 940px or less, place within here --&gt; &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
&lt;div class="nav-collapse"&gt; &lt;div class="nav-collapse collapse"&gt;
&lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt; &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
&lt;/div&gt; &lt;/div&gt;

View File

@ -55,7 +55,7 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p> <p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
<p>{{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}</p> <p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}</p>
</div> </div>
<div class="span4"> <div class="span4">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">

View File

@ -39,7 +39,7 @@
<span class="i-bar"></span> <span class="i-bar"></span>
</a> </a>
<a class="brand" href="./index.html">Bootstrap</a> <a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse"> <div class="nav-collapse collapse">
<ul class="nav"> <ul class="nav">
<li class=""> <li class="">
<a href="./index.html">Overview</a> <a href="./index.html">Overview</a>

View File

@ -42,8 +42,9 @@
.btn-navbar .i-bar + .i-bar { .btn-navbar .i-bar + .i-bar {
margin-top: 3px; margin-top: 3px;
} }
// Override the default collapsed state
.nav-collapse.collapse { .nav-collapse.collapse {
height: auto !important; // Required to be !important to override native collapse plugin height: auto;
} }

View File

@ -240,7 +240,7 @@
position: static; position: static;
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
} }
.navbar-inner { .navbar-fixed-top .navbar-inner {
padding: 5px; padding: 5px;
background-image: none; background-image: none;
} }
@ -335,10 +335,13 @@
} }
// Hide everything in the navbar save .brand and toggle button */ // Hide everything in the navbar save .brand and toggle button */
.nav-collapse { .nav-collapse.collapse {
overflow: hidden; overflow: hidden;
height: 0; height: 0;
} }
.nav-collapse.collapse.in {
height: auto;
}
} }