2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00

Merge pull request #41 from twbs/carousel-item

rename .item => .carousel-item
This commit is contained in:
Chris Rebert
2014-12-18 15:31:35 -08:00
7 changed files with 96 additions and 96 deletions
+2 -2
View File
@@ -21,11 +21,11 @@ body {
}
/* Declare heights because of positioning of img element */
.carousel .item {
.carousel-item {
height: 32rem;
background-color: #777;
}
.carousel-inner > .item > img {
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
+3 -3
View File
@@ -50,7 +50,7 @@
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-item active">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
@@ -60,7 +60,7 @@
</div>
</div>
</div>
<div class="item">
<div class="carousel-item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
@@ -70,7 +70,7 @@
</div>
</div>
</div>
<div class="item">
<div class="carousel-item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
+8 -8
View File
@@ -15,13 +15,13 @@ A slideshow component for cycling through elements—images or slides of text—
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<div class="carousel-item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<div class="carousel-item">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
@@ -48,7 +48,7 @@ A slideshow component for cycling through elements—images or slides of text—
### Optional captions
Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
@@ -58,21 +58,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<div class="carousel-item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="Second slide image">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
<div class="carousel-caption">
<h3>Third slide label</h3>
@@ -92,7 +92,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
{% highlight html %}
<div class="item">
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>