You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Bootstrap轮播(bootstrap-carousel)激活指示器的内联样式设置

回答:可以通过内联样式设置激活指示器的颜色

当然可以用内联样式的方式给激活状态的轮播指示器设置专属样式啦!内联样式的优先级较高,会直接作用在对应的元素上,能快速覆盖默认样式或者你统一设置的基础样式。

你只需要修改带有active类的<li>标签里的style属性,把background-color替换成你想要的颜色即可。比如下面的示例中,我将激活状态的指示器颜色改成了#ff4500(橙红色),和其他未激活的灰色形成明显区分:

<ol class="carousel-indicators"> 
  <li class="active" data-target="#DemoCarousel" style="background-color:#ff4500; border-radius: 2px; border-color: transparent; height: 3px; width: 15px;">&nbsp;</li> 
  <li data-target="#DemoCarousel" style="background-color:#cccccc; border-radius: 2px; border-color: transparent; height: 3px; width: 15px;">&nbsp;</li> 
  <li data-target="#DemoCarousel" style="background-color:#cccccc; border-radius: 2px; border-color: transparent; height: 3px; width: 15px;">&nbsp;</li> 
</ol>

另外给个小优化提示:border-radius: 2px 2px 2px 2px可以简化写成border-radius: 2px,二者的视觉效果完全一致哦~

内容的提问来源于stack exchange,提问作者ekxz900

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.28 04:09:02