Bootstrap Cookbook: Difference between revisions
Jump to navigation
Jump to search
(Created page with "Category:CSS Category:Web Development == Headers == <syntaxhighlight lang="html4strict"> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="c...") |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
[[Category:CSS]] [[Category:Web Development]] | [[Category:Bootstrap]] [[Category:CSS]] [[Category:Web Development]] | ||
== Bootstrap reference == | |||
* [http://getbootstrap.com/components/ Bootstrap components] | |||
* [http://getbootstrap.com/getting-started/#examples Bootstrap starter templates] | |||
== Headers == | == Headers == | ||
| Line 19: | 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> | ||
=== Fixed navbar overlapping page content === | |||
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 [http://getbootstrap.com/components/#navbar-fixed-top Bootstrap docs].<ref>[http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site Twitter Bootstrap Fixed Top Navbar Overlapping Site], Stackoverflow</ref> | |||
Body padding is required in a stylesheet that follows the Bootstrap stylesheets: | |||
<syntaxhighlight lang="css"> | |||
body { padding:70px; } | |||
</syntaxhighlight> | |||
And to make it responsive: | |||
<syntaxhighlight lang="css"> | |||
body { padding-top: 52px; } | |||
@media screen and (max-width: 768px) { | |||
body { padding-top: 0px; } | |||
} | |||
</syntaxhighlight> | |||
== Notes == | |||
<references /> | |||
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