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:
parent
391661f14b
commit
9e7f5025b4
Binary file not shown.
7
docs/assets/css/bootstrap-responsive.css
vendored
7
docs/assets/css/bootstrap-responsive.css
vendored
@ -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 {
|
||||||
|
2
docs/assets/css/bootstrap.css
vendored
2
docs/assets/css/bootstrap.css
vendored
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
2
docs/templates/layout.mustache
vendored
2
docs/templates/layout.mustache
vendored
@ -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>
|
||||||
|
4
docs/templates/pages/components.mustache
vendored
4
docs/templates/pages/components.mustache
vendored
@ -669,7 +669,7 @@
|
|||||||
</form>
|
</form>
|
||||||
</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">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
@ -686,7 +686,7 @@
|
|||||||
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
||||||
|
|
||||||
<!-- Everything you want hidden at 940px or less, place within here -->
|
<!-- Everything you want hidden at 940px or less, place within here -->
|
||||||
<div class="nav-collapse">
|
<div class="nav-collapse collapse">
|
||||||
<!-- .nav, .navbar-search, .navbar-form, etc -->
|
<!-- .nav, .navbar-search, .navbar-form, etc -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
2
docs/templates/pages/scaffolding.mustache
vendored
2
docs/templates/pages/scaffolding.mustache
vendored
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user