mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 03:41:19 +02:00
Code Issues Releases Wiki Activity

new look for carousel example, convert to rems

Browse Source
This commit is contained in:
Mark Otto
2014-12-04 14:18:13 -08:00
parent 908f776c08
commit b811553147
3 changed files with 47 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
docs/examples/carousel/carousel.css
View File

@@ -3,44 +3,17 @@
/* Padding below the footer and lighter body text */ /* Padding below the footer and lighter body text */
body { body {
padding-bottom: 40px; padding-bottom: 3rem;
color: #5a5a5a; color: #5a5a5a;
} }
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL /* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */ -------------------------------------------------- */
/* Carousel base class */ /* Carousel base class */
.carousel { .carousel {
height: 500px; margin-bottom: 4rem;
margin-bottom: 60px;
} }
/* Since positioning the image, we need to help out the caption */ /* Since positioning the image, we need to help out the caption */
.carousel-caption { .carousel-caption {
@@ -49,7 +22,7 @@ body {
/* Declare heights because of positioning of img element */ /* Declare heights because of positioning of img element */
.carousel .item { .carousel .item {
height: 500px; height: 32rem;
background-color: #777; background-color: #777;
} }
.carousel-inner > .item > img { .carousel-inner > .item > img {
@@ -57,7 +30,20 @@ body {
top: 0; top: 0;
left: 0; left: 0;
min-width: 100%; min-width: 100%;
height: 500px; height: 32rem;
}
.carousel-indicators {
top: 1.5rem;
right: 1.5rem;
bottom: auto;
left: auto;
width: 1rem;
margin-left: 0;
}
.carousel-indicators > li {
margin-bottom: .25rem;
} }
@@ -66,15 +52,15 @@ body {
/* Center align the text within the three columns below the carousel */ /* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 { .marketing .col-lg-4 {
margin-bottom: 20px; margin-bottom: 1.5rem;
text-align: center; text-align: center;
} }
.marketing h2 { .marketing h2 {
font-weight: normal; font-weight: normal;
} }
.marketing .col-lg-4 p { .marketing .col-lg-4 p {
margin-right: 10px; margin-right: .75rem;
margin-left: 10px; margin-left: .75rem;
} }
@@ -82,43 +68,25 @@ body {
------------------------- */ ------------------------- */
.featurette-divider { .featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */ margin: 5rem 0; /* Space out the Bootstrap <hr> more */
} }
/* Thin out the marketing headings */ /* Thin out the marketing headings */
.featurette-heading { .featurette-heading {
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
letter-spacing: -1px; letter-spacing: -.05rem;
} }
/* RESPONSIVE CSS /* RESPONSIVE CSS
-------------------------------------------------- */ -------------------------------------------------- */
@media (min-width: 768px) { @media (min-width: 40em) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */ /* Bump up size of carousel content */
.carousel-caption p { .carousel-caption p {
margin-bottom: 20px; margin-bottom: 1.25rem;
font-size: 21px; font-size: 1.25rem;
line-height: 1.4; line-height: 1.4;
} }
@@ -127,8 +95,8 @@ body {
} }
} }
@media (min-width: 992px) { @media (min-width: 62em) {
.featurette-heading { .featurette-heading {
margin-top: 120px; margin-top: 7rem;
} }
} }

60
docs/examples/carousel/index.html
View File

@@ -19,47 +19,25 @@
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet"> <link href="carousel.css" rel="stylesheet">
</head> </head>
<!-- NAVBAR
================================================== -->
<body> <body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top"> <nav class="navbar navbar-default navbar-static-top">
<div class="container"> <a href="#" class="navbar-brand">Carousel</a>
<div class="navbar-header"> <ul class="nav nav-pills">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <li class="nav-item active">
<span class="sr-only">Toggle navigation</span> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<span class="icon-bar"></span> </li>
<span class="icon-bar"></span> <li class="nav-item">
<span class="icon-bar"></span> <a class="nav-link" href="#">Features</a>
</button> </li>
<a class="navbar-brand" href="#">Project name</a> <li class="nav-item">
</div> <a class="nav-link" href="#">Pricing</a>
<div id="navbar" class="navbar-collapse collapse"> </li>
<ul class="nav navbar-nav"> <li class="nav-item">
<li class="active"><a href="#">Home</a></li> <a class="nav-link" href="#">About</a>
<li><a href="#about">About</a></li> </li>
<li><a href="#contact">Contact</a></li> </ul>
<li class="dropdown"> </nav>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" role="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 class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Carousel <!-- Carousel
@@ -75,7 +53,7 @@
<div class="item active"> <div class="item active">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption text-left">
<h1>Example headline.</h1> <h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@@ -95,7 +73,7 @@
<div class="item"> <div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption text-right">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>

2
scss/_navbar.scss
View File

@@ -68,7 +68,7 @@
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .55rem .75rem; padding: .725rem .75rem;
margin-right: $spacer; margin-right: $spacer;
margin-bottom: 0; // For headings margin-bottom: 0; // For headings
font-size: $font-size-lg; font-size: $font-size-lg;