rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

mo betta sidenav for responsive hotness

Browse Source
This commit is contained in:
Mark Otto 2013-01-16 13:20:32 -08:00
parent beb2c13f4d
commit 3e40e7dfbf
3 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/assets/css/docs.css
View File

@ -160,11 +160,20 @@ section > ul li {
/* Sidenav /* Sidenav
-------------------------------------------------- */ -------------------------------------------------- */
/* Base styles are not affixable given mobile-first */
.bs-docs-sidenav { .bs-docs-sidenav {
width: 218px;
margin: 20px 0 0; margin: 20px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} }
/* Chevrons */ .bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
/* Chevrons within each link */
.bs-docs-sidenav .glyphicon-chevron-right { .bs-docs-sidenav .glyphicon-chevron-right {
float: right; float: right;
margin-top: 1px; margin-top: 1px;
@ -180,17 +189,30 @@ section > ul li {
color: #fff; color: #fff;
opacity: 1; opacity: 1;
} }
.bs-docs-sidenav.affix {
top: 10px; /* Affix all the things, and set widths because they're positioned, depending on viewport size */
@media screen and (min-width: 768px) {
.bs-docs-sidenav.affix {
position: fixed;
top: 10px;
width: 170px;
}
.bs-docs-sidenav.affix-bottom {
position: absolute;
top: auto;
bottom: 270px;
}
} }
.bs-docs-sidenav.affix-bottom {
position: absolute; @media screen and (min-width: 992px) {
top: auto; .bs-docs-sidenav.affix {
bottom: 270px; width: 220px;
}
} }
/* Bootstrap code examples /* Bootstrap code examples
-------------------------------------------------- */ -------------------------------------------------- */

2
docs/css.html
View File

@ -91,7 +91,7 @@
<li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li> <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
<li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li> <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
<li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li> <li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li>
<li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li> <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li>
<li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li> <li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li>
</ul> </ul>
</div> </div>

2
docs/templates/pages/css.mustache vendored
View File

@ -23,7 +23,7 @@
<li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li> <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
<li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li> <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
<li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li> <li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li>
<li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li> <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li>
<li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li> <li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li>
</ul> </ul>
</div> </div>