标准自举轮播可以包含更换幻灯片的点(例如
bootstrap page).
但是,我最近阅读了Why Users Aren’t Clicking Your Home Page Carousel,建议使用字幕代替下面的点:
引导程序中是否可以使用此选项?如果是这样,我该怎么办?
解决方法
您可以通过覆盖轮播指示器列表项上的样式来执行此操作.
这是一个典型的指标部分:
<ul class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active">One</li> <li data-target="#myCarousel" data-slide-to="1">Two</li> <li data-target="#myCarousel" data-slide-to="2">Three</li> </ul>
您将要覆盖一些默认的Bootstrap样式:
通过添加宽度和高度并删除border-radius,将显示从点转换为矩形:
然后通过删除Bootstrap添加的否定文本缩进来获取文本:
最后,添加你自己的背景和边框和风格,不管你喜欢什么.
完整样式应如下所示:
.carousel-indicators > li,.carousel-indicators > li.active{ width: 100px; height: 25px; border-radius: 0; border: solid 1px grey; background: lightgrey; text-indent: 0; } .carousel-indicators > li.active { background: white; }
@L_502_3@
您甚至可以将整个CSS包装在媒体查询中,这样当屏幕大小变得有限时,您会默认返回点而不是笨拙地堆叠列表项:
@media screen and (min-width: 550px) { /* Wrap CSS Here */ }