rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

redo the carousel example to match

Browse Source
This commit is contained in:
Mark Otto 2016-12-04 22:18:49 -08:00
parent 7c3bda24f0
commit e40a09ba2e
2 changed files with 15 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ body {
/* 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 {
z-index: 10; z-index: 10;
bottom: 3rem;
} }
/* Declare heights because of positioning of img element */ /* Declare heights because of positioning of img element */
@ -34,17 +35,12 @@ body {
height: 32rem; height: 32rem;
} }
.carousel-indicators { .carousel-indicators li {
top: 1.5rem; width: .75rem;
right: 1.5rem; height: .75rem;
bottom: auto; margin-right: .25rem;
left: auto; margin-left: .25rem;
width: 1rem; border-radius: 50%;
margin-left: 0;
}
.carousel-indicators > li {
margin-bottom: .25rem;
} }

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

@ -37,11 +37,7 @@
</ul> </ul>
</nav> </nav>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <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="1"></li>
@ -51,7 +47,7 @@
<div class="carousel-item active"> <div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-left"> <div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1> <h1>Example headline.</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">Sign up today</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@ -61,7 +57,7 @@
<div class="carousel-item"> <div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1> <h1>Another example headline.</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">Learn more</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
@ -71,7 +67,7 @@
<div class="carousel-item"> <div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-right"> <div class="carousel-caption d-none d-md-block 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>
@ -79,15 +75,15 @@
</div> </div>
</div> </div>
</div> </div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <a class="carousel-control carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <a class="carousel-control carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div><!-- /.carousel --> </div>
<!-- Marketing messaging and featurettes <!-- Marketing messaging and featurettes