使用标题而不是点创建bootstrap轮播

Question

标准自举轮播可以包含更改幻灯片的点（bootstrap page上的示例）。

但是，我最近阅读了Why Users Aren't Clicking Your Home Page Carousel，建议使用字幕代替下面的点：

引导程序中是否可以使用此选项？如果是这样，我该怎么办？

Answer 1

您可以通过覆盖carousel-indicators列表项目上的样式来执行此操作。

这是一个典型的指标部分：

<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样式：

通过添加width和height并删除border-radius来将显示从点转换为矩形：

然后通过删除Bootstrap添加的否定text-indent来获取文本：

最后，添加您自己的background和border以及您喜欢的风格。
完整样式应如下所示：

.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;
}

Working Demo in Fiddle

---

你甚至可以将整个CSS包装在媒体查询中，这样当屏幕尺寸变得有限时，你会默认返回点而不是笨拙地堆叠列表项：

@media screen and (min-width: 550px) {
    /* Wrap CSS Here */
}

Responsive Demo in Fiddle