rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Refactor jumbotron-narrow.html example

Browse Source 
* Make it mobile-first
* Add a handful of comments to explain CSS
* Instead of an <hr> between custom header and jumbotron, use border for a tighter mobile layout
This commit is contained in:
Mark Otto 2013-01-31 18:34:12 -08:00
parent 19b5ebcf24
commit 755f1776da
1 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/examples/jumbotron-narrow.html
View File

@ -25,8 +25,30 @@
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<style> <style>
/* Space out content a bit */
body { body {
padding-bottom: 30px; padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile-first views */
.masthead,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.masthead {
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.masthead h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
} }
/* Custom container */ /* Custom container */
@ -40,7 +62,6 @@
/* Main marketing message and sign up button */ /* Main marketing message and sign up button */
.jumbotron { .jumbotron {
margin: 40px 0;
text-align: center; text-align: center;
} }
.jumbotron h1 { .jumbotron h1 {
@ -54,11 +75,26 @@
/* Supporting marketing content */ /* Supporting marketing content */
.marketing { .marketing {
margin: 60px 0; margin: 40px 0;
} }
.marketing p + h4 { .marketing p + h4 {
margin-top: 28px; margin-top: 28px;
} }
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.masthead {
margin-bottom: 30px;
}
}
</style> </style>
</head> </head>
@ -76,13 +112,10 @@
<h3 class="muted">Project name</h3> <h3 class="muted">Project name</h3>
</div> </div>
<hr>
<div class="jumbotron"> <div class="jumbotron">
<h1>Super awesome marketing speak!</h1> <h1>Super awesome marketing speak!</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a class="btn btn-large btn-success" href="#">Sign up today</a> <p><a class="btn btn-large btn-success" href="#">Sign up today</a></p>
</div> </div>
<div class="row marketing"> <div class="row marketing">