twitter-bootstrap 如何更改轮播活动指示器颜色 - Bootstrap

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/39536075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:17:24  来源:igfitidea点击:

How to change the carousel active indicator color - Bootstrap

htmlcsstwitter-bootstrap

提问by Gabriel Souza

I want to change the carousel active indicator color. Here is the example

我想更改轮播活动指示器颜色。这是例子

http://www.w3schools.com/bootstrap/trybs_theme_band_full.htm#band

http://www.w3schools.com/bootstrap/trybs_theme_band_full.htm#band

I want to change from white to red

我想从白色变成红色

回答by leigero

The Bootstrap style the controls the carousel active dot is .carousel-indicators .activeso:

控制轮播活动点的 Bootstrap 样式是.carousel-indicators .active这样的:

.carousel-indicators .active{
    background-color: #f00;
}

回答by cormacio100

Can change the content of the control links by removing the SVG icon and changing it to a font-awesome icon. The icon can then be styled by adding a class to it. E.G.

可以通过删除 SVG 图标并将其更改为字体真棒图标来更改控件链接的内容。然后可以通过向其添加类来设置图标的样式。例如

<a class="carousel-control-prev" href="#carouselProfileMedia" role="button" data-slide="prev">
    <i class="fa fa-arrow-circle-left fa-2x your-custom-class" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
</a>

回答by thyda

Try this:

试试这个:

// CSS rule and invert the color, from black to white, using invert() .5 is gray

// we can use sepia() to turn our gray into a brown

// Using saturate() and hue-rotate(), we can fiddle with these values until we arrive at the desired color.

filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);