Bootstrap Cookbook: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 3: | Line 3: | ||
* [http://getbootstrap.com/components/ Bootstrap components] | * [http://getbootstrap.com/components/ Bootstrap components] | ||
* [http://getbootstrap.com/getting-started/#examples Bootstrap starter templates] | |||
== Headers == | == Headers == | ||
Revision as of 14:54, 28 January 2015
Bootstrap reference
Headers
<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"> <h1>Page Title</h1> <!--// etc... //--> </body>
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
- ↑ Twitter Bootstrap Fixed Top Navbar Overlapping Site, Stackoverflow