mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-25 12:22:50 +01:00
Code Issues Releases Wiki Activity

convert narrow jumbotron to rems

Browse Source
This commit is contained in:
Mark Otto 2014-12-04 01:10:26 -08:00
parent 7c391867d7
commit 0d7115928b
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/examples/narrow-jumbotron/index.html
View File

@ -26,9 +26,15 @@
<div class="header"> <div class="header">
<nav> <nav>
<ul class="nav nav-pills pull-right"> <ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a></li> <li class="nav-item active">
<li role="presentation"><a href="#">About</a></li> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li role="presentation"><a href="#">Contact</a></li> </li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul> </ul>
</nav> </nav>
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>

36
docs/examples/narrow-jumbotron/narrow-jumbotron.css
View File

@ -1,62 +1,62 @@
/* Space out content a bit */ /* Space out content a bit */
body { body {
padding-top: 20px; padding-top: 1.5rem;
padding-bottom: 20px; padding-bottom: 1.5rem;
} }
/* Everything but the jumbotron gets side spacing for mobile first views */ /* Everything but the jumbotron gets side spacing for mobile first views */
.header, .header,
.marketing, .marketing,
.footer { .footer {
padding-right: 15px; padding-right: 1rem;
padding-left: 15px; padding-left: 1rem;
} }
/* Custom page header */ /* Custom page header */
.header { .header {
border-bottom: 1px solid #e5e5e5; border-bottom: .05rem solid #e5e5e5;
} }
/* Make the masthead heading the same height as the navigation */ /* Make the masthead heading the same height as the navigation */
.header h3 { .header h3 {
padding-bottom: 19px; padding-bottom: 1.5rem;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
line-height: 40px; line-height: 3rem;
} }
/* Custom page footer */ /* Custom page footer */
.footer { .footer {
padding-top: 19px; padding-top: 1.5rem;
color: #777; color: #777;
border-top: 1px solid #e5e5e5; border-top: .05rem solid #e5e5e5;
} }
/* Customize container */ /* Customize container */
@media (min-width: 768px) { @media (min-width: 48em) {
.container { .container {
max-width: 730px; max-width: 46rem;
} }
} }
.container-narrow > hr { .container-narrow > hr {
margin: 30px 0; margin: 2rem 0;
} }
/* Main marketing message and sign up button */ /* Main marketing message and sign up button */
.jumbotron { .jumbotron {
text-align: center; text-align: center;
border-bottom: 1px solid #e5e5e5; border-bottom: .05rem solid #e5e5e5;
} }
.jumbotron .btn { .jumbotron .btn {
padding: 14px 24px; padding: .75rem 1.5rem;
font-size: 21px; font-size: 1.5rem;
} }
/* Supporting marketing content */ /* Supporting marketing content */
.marketing { .marketing {
margin: 40px 0; margin: 3rem 0;
} }
.marketing p + h4 { .marketing p + h4 {
margin-top: 28px; margin-top: 1.5rem;
} }
/* Responsive: Portrait tablets and up */ /* Responsive: Portrait tablets and up */
@ -70,7 +70,7 @@ body {
} }
/* Space out the masthead */ /* Space out the masthead */
.header { .header {
margin-bottom: 30px; margin-bottom: 2rem;
} }
/* Remove the bottom border on the jumbotron for visual effect */ /* Remove the bottom border on the jumbotron for visual effect */
.jumbotron { .jumbotron {