mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
nav cleanup and responsiveness
This commit is contained in:
Mark Otto
parent
35ddc8427e
commit
fed2b0f7eb
3 changed files with 147 additions and 39 deletions
|
|
@ -1,6 +1,76 @@
|
|||
<div id="top"></div>
|
||||
<header class="navbar navbar-static-top bs-docs-sidebar" id="top" role="banner">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-sidenav-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="../" class="navbar-brand">Bootstrap</a>
|
||||
</div>
|
||||
<nav class="collapse navbar-collapse bs-sidenav-collapse" role="navigation">
|
||||
<div class="bs-docs-toc-item{% if page.slug == "getting-started" %} active{% endif %}">
|
||||
<a class="bs-docs-toc-link" href="../getting-started">Getting started</a>
|
||||
{% if page.slug == "getting-started" %}
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
{% include nav/getting-started.html %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bs-docs-toc-item{% if page.slug == "css" %} active{% endif %}">
|
||||
<a class="bs-docs-toc-link" href="../css">CSS</a>
|
||||
{% if page.slug == "css" %}
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
{% include nav/css.html %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bs-docs-toc-item{% if page.slug == "components" %} active{% endif %}">
|
||||
<a class="bs-docs-toc-link" href="../components">Components</a>
|
||||
{% if page.slug == "components" %}
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
{% include nav/components.html %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bs-docs-toc-item{% if page.slug == "js" %} active{% endif %}">
|
||||
<a class="bs-docs-toc-link" href="../javascript">JavaScript</a>
|
||||
{% if page.slug == "js" %}
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
{% include nav/javascript.html %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bs-docs-toc-item{% if page.slug == "customize" %} active{% endif %}">
|
||||
<a class="bs-docs-toc-link" href="../customize">Customize</a>
|
||||
{% if page.slug == "customize" %}
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
{% include nav/customize.html %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bs-docs-toc-item{% if page.slug == "js" %} active{% endif %}">
|
||||
<a class="bs-docs-toc-link" href="../about">About</a>
|
||||
{% if page.slug == "js" %}
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
{% include nav/about.html %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="bs-docs-toc-item{% if page.slug == "migration" %} active{% endif %}">
|
||||
<a class="bs-docs-toc-link" href="../migration">Migrating to v3.x</a>
|
||||
{% if page.slug == "migration" %}
|
||||
<ul class="nav bs-docs-sidenav">
|
||||
{% include nav/migration.html %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bs-docs-sidebar">
|
||||
<div class="bs-docs-sidebar" style="display: none;">
|
||||
<a href="../" class="bs-docs-sidebar-brand">Bootstrap</a>
|
||||
|
||||
<div class="bs-docs-toc">
|
||||
|
|
|
|||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -396,9 +396,16 @@ body {
|
|||
.carbonad #azcarbon > img {
|
||||
display: none; /* hide what I assume are tracking images */
|
||||
}
|
||||
|
||||
/* In the lighter page headers */
|
||||
.bs-docs-header .carbonad {
|
||||
color: #cdbfe3;
|
||||
background-color: #866ab3 !important;
|
||||
color: #777;
|
||||
background-color: #fff !important;
|
||||
border-color: #eee !important;
|
||||
}
|
||||
.bs-docs-header .carbonad-text a,
|
||||
.bs-docs-header .carbonad-tag a {
|
||||
color: #563d7c !important;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
|
|
@ -535,9 +542,6 @@ body {
|
|||
* sections of docs content.
|
||||
*/
|
||||
|
||||
.bs-docs {
|
||||
padding-left: 240px;
|
||||
}
|
||||
.bs-docs-container {
|
||||
position: relative;
|
||||
max-width: 940px;
|
||||
|
|
@ -555,27 +559,60 @@ body {
|
|||
}
|
||||
|
||||
.bs-docs-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 240px;
|
||||
padding-bottom: 30px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 0;
|
||||
background-color: #322f38;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#29262f), to(#322f38));
|
||||
background-image: -webkit-linear-gradient(top, #29262f 0%, #322f38 100%);
|
||||
background-image: -o-linear-gradient(top, #29262f 0%, #322f38 100%);
|
||||
background-image: linear-gradient(to bottom, #29262f 0%, #322f38 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#29262f', endColorstr='#322f38', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.bs-docs-sidebar-brand {
|
||||
.bs-docs-sidebar .navbar-toggle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
.bs-docs-sidebar .navbar-toggle .icon-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bs-docs-sidebar .navbar-header {
|
||||
float: none;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.bs-docs-sidebar .navbar-collapse {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.bs-docs {
|
||||
padding-left: 240px;
|
||||
}
|
||||
.bs-docs-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 240px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#29262f), to(#322f38));
|
||||
background-image: -webkit-linear-gradient(top, #29262f 0%, #322f38 100%);
|
||||
background-image: -o-linear-gradient(top, #29262f 0%, #322f38 100%);
|
||||
background-image: linear-gradient(to bottom, #29262f 0%, #322f38 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#29262f', endColorstr='#322f38', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.bs-docs-sidebar .navbar-brand {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bs-docs-sidebar .navbar-brand {
|
||||
display: block;
|
||||
float: none;
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
|
|
@ -589,7 +626,6 @@ body {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.bs-docs-sidenav {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -602,12 +638,12 @@ body {
|
|||
}
|
||||
.bs-docs-toc-link:hover,
|
||||
.bs-docs-toc-link:focus {
|
||||
color: #fff;
|
||||
color: #ffe484;
|
||||
text-decoration: none;
|
||||
}
|
||||
.active > .bs-docs-toc-link {
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
color: #ffe484;
|
||||
}
|
||||
.active > .bs-docs-sidenav {
|
||||
display: block;
|
||||
|
|
@ -617,37 +653,39 @@ body {
|
|||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.bs-docs-toc-item:last-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* All levels of nav */
|
||||
.bs-docs-toc .nav > li > a {
|
||||
.bs-docs-sidebar .nav > li > a {
|
||||
display: block;
|
||||
padding: 4px 20px;
|
||||
font-size: 14px;
|
||||
color: #99979c;
|
||||
}
|
||||
.bs-docs-toc .nav > li > a:hover,
|
||||
.bs-docs-toc .nav > li > a:focus {
|
||||
color: #fff;
|
||||
.bs-docs-sidebar .nav > li > a:hover,
|
||||
.bs-docs-sidebar .nav > li > a:focus {
|
||||
color: #ffe484;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.bs-docs-toc .nav > .active > a,
|
||||
.bs-docs-toc .nav > .active:hover > a,
|
||||
.bs-docs-toc .nav > .active:focus > a {
|
||||
.bs-docs-sidebar .nav > .active > a,
|
||||
.bs-docs-sidebar .nav > .active:hover > a,
|
||||
.bs-docs-sidebar .nav > .active:focus > a {
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
color: #ffe484;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Nav: second level (shown on .active) */
|
||||
.bs-docs-toc .nav .nav {
|
||||
.bs-docs-sidebar .nav .nav {
|
||||
display: none;
|
||||
}
|
||||
.bs-docs-toc .nav > .active > .nav {
|
||||
.bs-docs-sidebar .nav > .active > .nav {
|
||||
display: block;
|
||||
}
|
||||
.bs-docs-toc .nav .nav > li > a {
|
||||
.bs-docs-sidebar .nav .nav > li > a {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 30px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue