kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

drop the .carousel-control base class

Browse source
This commit is contained in:
Mark Otto 2016-12-04 23:19:54 -08:00
parent 6d9ded8375
commit 4ef547f4bb
4 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/components/carousel.md
View file

@ -59,11 +59,11 @@ Adding in the previous and next controls:
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div> </div>
</div> </div>
<a class="carousel-control carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" 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="carousel-control carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" 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>
@ -92,11 +92,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
<img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide"> <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div> </div>
</div> </div>
<a class="carousel-control carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" 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="carousel-control carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" 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>

4
docs/examples/carousel/index.html
View file

@ -75,11 +75,11 @@
</div> </div>
</div> </div>
</div> </div>
<a class="carousel-control carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" 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="carousel-control carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" 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>

2
docs/migration.md
View file

@ -187,7 +187,7 @@ Dropped entirely for the new card component.
- All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`. - All CSS has been un-nested and renamed, ensuring each class is prefixed with `.carousel-`.
- For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`. - For carousel items, `.next`, `.prev`, `.left`, and `.right` are now `.carousel-item-next`, `.carousel-item-prev`, `.carousel-item-left`, and `.carousel-item-right`.
- `.item` is also now `.carousel-item`. - `.item` is also now `.carousel-item`.
- For prev/next controls, `.right` and `.left` modifiers are now `.carousel-control-left` and `.carousel-control-left`. - For prev/next controls, `.carousel-control.right` and `.carousel-control.left` are now `.carousel-control-left` and `.carousel-control-left`, meaning they no longer require a specific base class.
- Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed. - Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
- Removed image overrides for images in carousel items, deferring to utilities. - Removed image overrides for images in carousel items, deferring to utilities.
- Tweaked the Carousel example to include the new markup and styles. - Tweaked the Carousel example to include the new markup and styles.

3
scss/_carousel.scss
View file

@ -56,7 +56,8 @@
// Left/right controls for nav // Left/right controls for nav
// //
.carousel-control { .carousel-control-prev,
.carousel-control-next {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;