mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki Activity

start to refactor justified nav example

Browse Source
This commit is contained in:
Mark Otto
2013-02-01 10:32:08 -08:00
parent 7528b6e10a
commit 725cf7f6ec
1 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/examples/justified-nav.html
View File

@@ -27,45 +27,40 @@
<style>
body {
padding-bottom: 30px;
padding-top: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile-first views */
.masthead,
.body-content,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom container */
.container {
margin: 0 auto;
max-width: 1000px;
}
.container > hr {
/* .container > hr {
margin: 60px 0;
}
*/
.footer {
border-top: 1px solid #ddd;
margin-top: 30px;
padding-top: 29px;
padding-bottom: 30px;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
max-height: 50px;
@@ -106,6 +101,20 @@
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 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;
}
/* Make the nav on the same line */
}
</style>
</head>
@@ -130,11 +139,12 @@
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Marketing stuff!</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="#">Get started today</a>
<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.</p>
<p><a class="btn btn-large btn-success" href="#">Get started today</a></p>
</div>
<hr>
<div class="body-content">
<!-- Example row of columns -->
<div class="row">
@@ -155,8 +165,9 @@
</div>
</div>
<hr>
</div><!-- /.body-content -->
<!-- Site footer -->
<div class="footer">
<p>&copy; Company 2013</p>
</div>