mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
1a2ef331fd
A .navbar-wrapper followed by a .carousel works well in this example, but when the navbar is not followed by a carousel, content flows underneath the navbar because it is absolutely positioned. Letting .navbar-wrapper be part of the flow and moving the negative margin to the .carousel to bring it underneath the navbar makes these example styles suitable for pages without carousels.
135 lines
2.7 KiB
CSS
135 lines
2.7 KiB
CSS
|
|
/* GLOBAL STYLES
|
|
-------------------------------------------------- */
|
|
/* Padding below the footer and lighter body text */
|
|
|
|
body {
|
|
padding-bottom: 40px;
|
|
color: #5a5a5a;
|
|
}
|
|
|
|
|
|
|
|
/* CUSTOMIZE THE NAVBAR
|
|
-------------------------------------------------- */
|
|
|
|
/* Special class on .container surrounding .navbar, used for positioning it into place. */
|
|
.navbar-wrapper {
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
|
|
/* CUSTOMIZE THE CAROUSEL
|
|
-------------------------------------------------- */
|
|
|
|
/* Carousel base class */
|
|
.carousel {
|
|
margin-bottom: 60px;
|
|
|
|
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
|
|
margin-top: -90px;
|
|
}
|
|
/* 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;
|
|
}
|
|
.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;
|
|
}
|
|
/* 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;
|
|
}
|
|
|
|
}
|