eduardomart
10/1/2013 - 1:03 AM
jsbin.eyUkuME.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Bootstrap 3 Carrousel Jumbotron with Fixed Nav" />
</head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="bs-custom.css" rel="stylesheet">
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse" id="jumbo-nav" data-spy="affix" data-offset-top="20">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="http://www.bootply.com" target="ext">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- /container -->
</div><!-- /navbar wrapper -->
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/g/1500/600/city/1">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.
<a title="Bootstrap 3" href="http://getbootstrap.com" class="">Bootstrap 3 RC 1 is now available!</a></p>
<p><a class="btn btn-large btn-primary" href="#">Sign up today</a>
</p></div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Mobile-first</h2>
<p>Tablets, phones, laptops. The new 3 promises to be mobile friendly from the start.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>One Fluid Grid</h2>
<p>There is now just one percentage-based grid for Bootstrap 3. Customize for fixed widths.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>LESS is More</h2>
<p>Improved support for mixins make the new Bootstrap 3 easier to customize.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image img-circle pull-right" src="http://placehold.it/512">
<h2 class="featurette-heading">Responsive Design. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">In simple terms, a responsive web design figures out what resolution of device it's being served on. Flexible grids then size correctly to fit the screen.</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image img-circle pull-left" src="http://placehold.it/512">
<h2 class="featurette-heading">Smaller Footprint. <span class="text-muted">Lightweight.</span></h2>
<p class="lead">The new Bootstrap 3 promises to be a smaller build. The separate Bootstrap base and responsive.css files have now been merged into one. There is no more fixed grid, only fluid.</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image img-circle pull-right" src="http://placehold.it/512">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Flatness.</span></h2>
<p class="lead">A big design trend for 2013 is "flat" design. Gone are the days of excessive gradients and shadows. Designers are producing cleaner flat designs, and Bootstrap 3 takes advantage of this minimalist trend.</p>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>This Bootstrap layout is compliments of Bootply. · <a href="http://www.bootply.com/62603">Edit on Bootply.com</a></p>
</footer>
</div><!-- /.container -->
</body>
</html>/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
width:100%;
}
.navbar-wrapper #jumbo-nav{
width:100%;
}
#jumbo-nav.affix {
top:0;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
padding-left: 15px;
padding-right: 15px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
text-align: center;
margin-bottom: 20px;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Remve the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}