rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +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 c3fefca1be
commit 7c55cf0660
1 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
jumbotron-narrow.html
View File

@ -25,8 +25,30 @@
<!-- Custom styles for this template -->
<style>
/* Space out content a bit */
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 */
@ -40,7 +62,6 @@
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
@ -54,11 +75,26 @@
/* Supporting marketing content */
.marketing {
margin: 60px 0;
margin: 40px 0;
}
.marketing p + h4 {
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>
</head>
@ -76,13 +112,10 @@
<h3 class="muted">Project name</h3>
</div>
<hr>
<div class="jumbotron">
<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>
<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 class="row marketing">