标准自举轮播可以包含更换幻灯片的点(例如
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;
}
您甚至可以将整个CSS包装在媒体查询中,这样当屏幕大小变得有限时,您会默认返回点而不是笨拙地堆叠列表项：
@media screen and (min-width: 550px) {
/* Wrap CSS Here */
}
