kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code 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
-------------------------------------------------- */
/* Base styles are not affixable given mobile-first */
.bs-docs-sidenav {
width: 218px;
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 {
float: right;
margin-top: 1px;
@ -180,17 +189,30 @@ section > ul li {
color: #fff;
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;
top: auto;
bottom: 270px;
@media screen and (min-width: 992px) {
.bs-docs-sidenav.affix {
width: 220px;
}
}
/* 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="#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="#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>
</ul>
</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="#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="#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>
</ul>
</div>