Bootstrap Cookbook: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[Category:CSS]] [[Category:Web Development]] | [[Category:Bootstrap]] [[Category:CSS]] [[Category:Web Development]] | ||
== Bootstrap reference == | == Bootstrap reference == | ||
| Line 23: | Line 23: | ||
</div> | </div> | ||
</nav> | </nav> | ||
<div class="container"> | <div class="container" role="main"> | ||
<h1>Page Title</h1> | <div class="page-header"> | ||
<h1>Page Title</h1> | |||
<p>Teaser...</p> | |||
</div> | |||
<!--// page content... //--> | |||
</div> | |||
</body> | </body> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Latest revision as of 11:47, 10 February 2015
Bootstrap reference[edit]
Headers[edit]
<body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand">Project Name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active">lorem ipsum dolor</li> <li class="active">lorem ipsum dolor</li> <!--// etc... //--> </ul> </div> </div> </nav> <div class="container" role="main"> <div class="page-header"> <h1>Page Title</h1> <p>Teaser...</p> </div> <!--// page content... //--> </div> </body>
[edit]
If you simply copy the sample HTML from the Bootstrap site (see [#Headers] above), the fixed navbar will overlap the site content. This is addressed in the Bootstrap docs.[1]
Body padding is required in a stylesheet that follows the Bootstrap stylesheets:
body { padding:70px; }
And to make it responsive:
body { padding-top: 52px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
Notes[edit]
- ↑ Twitter Bootstrap Fixed Top Navbar Overlapping Site, Stackoverflow