更改Bootstrap 4 Carousel控件颜色 [英] Change Bootstrap 4 Carousel Control Colors
问题描述
我为使用Bootstrap 4.0的Carousel使用白色背景，并且希望更改控件的颜色。看来引导程序现在使用SVG作为它们的传送带图标。这意味着改变属性直接不起作用。
我现在对网站上的其他元素使用Font Awesome，所以如果有一种方法可以使用fa- V形和相应的格式，而且它在调整大小和格式方面的表现仍然相同，这也可能是一种有效的解决方案。
这是我目前的控制元素代码：
< ; a class =carousel-control-prevhref =＃carouselExampleIndicatorsrole =buttondata-slide =prev>
< span class =sr-only>上一个< / span>
< / a>
< a class =carousel-control-nexthref =＃carouselExampleIndicatorsrole =buttondata-slide =next>
< span class =sr-only>下一步< / span>
< / a>
我发现了一个类似的问题这里，但无法理解那里提供的答案。
我还发现 在GitHub上的页面，但无法使我的任何答案都适用于我。
不需要任何不必要的CSS黑客。你想修改任何Bootstrap css（或特别是旋转木马控件的颜色），你可以很容易地做到这一点。
以下是控制旋转木马控件颜色的规则：
.carousel-control-prev-icon {
background-image：url（data：image / svg + xml; charset = utf8，％3Csvg xmlns ='http：//www.w3.org/2000/svg'fill ='％23fff'viewBox ='0 0 8 8'％3E％3Cpath d ='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/％3E％3C / svg％3E）;
$ b $ .carousel-control-next-icon {
background-image：url（data：image / svg + xml; charset = utf8，％3Csvg xmlns =' http://www.w3.org/2000/svg'fill ='％23fff'viewBox ='0 0 8 8'％3E％3Cpath d ='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4 -4-4-4z'/％3E％3C / SVG％3E）;
}
将 fff 在 fill ='％23fff'部分中加上所需颜色的十六进制代码。
这是一个工作代码其中 fill ='％23fff'的片段已被 fill ='％23f00'替换为红色而不是白色：
< link rel =stylesheethref =https：// maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.cssintegrity =sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXmcrossorigin =anonymous>< script src =https：// code。 jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous>< / script>< script src =https：/ /cdnjs.cloudflare.com/ajax/libs/popper.js/1.1 2.9 / umd / popper.min.jsintegrity =sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Qcrossorigin =anonymous>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap /4.0.0/js/bootstrap.min.jsintegrity =sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYlcrossorigin =anonymous>< / script> < style> .carousel-control-prev-icon {background-image：url（data：image / svg + xml; charset = utf8，％3Csvg xmlns ='http：//www.w3.org/2000/svg 'fill ='％23f00'viewBox ='0 0 8 8'％3E％3Cpath d ='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/％3E ％3C / svg％3E）;}。carousel-control-next-icon {background：image（data：image / svg + xml; charset = utf8，％3Csvg xmlns ='http：//www.w3 .org / 2000 / svg'fill ='％23f00'viewBox ='0 0 8 8'％3E％3Cpath d ='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z' /％3E％3C / svg％3E）;}< / style>< div class =container> < div class =row> < div class =col> < div id =carouselExampleControlsclass =carousel slidedata-ride =carousel> < div class =carousel-inner> < div class =carousel-item active> < img class =d-block w-100src =https://placeimg.com/800/400/animalsalt =第一张幻灯片> < / DIV> < div class =carousel-item> < img class =d-block w-100src =https://placeimg.com/800/400/archalt =第二张幻灯片> < / DIV> < div class =carousel-item> < img class =d-block w-100src =https://placeimg.com/800/400/naturealt =第三张幻灯片> < / DIV> < / DIV> < a class =carousel-control-prevhref =＃carouselExampleControlsrole =buttondata-slide =prev> < span class =carousel-control-prev-iconaria-hidden =true>< / span> < span class =sr-only>上一步< / span> < / A> < a class =carousel-control-nexthref =＃carouselExampleControlsrole =buttondata-slide =next> < span class =carousel-control-next-iconaria-hidden =true>< / span> < span class =sr-only>下一步< / span> < / A> < / DIV> < / DIV> < / div>< / div>
I am using a white background for a Carousel using Bootstrap 4.0 and would like to change the color of the controls. It seems that bootstrap now uses SVG for their carousel icons. This means altering the attributes directly does not work.
I am currently using Font Awesome for other elements on the site as well, so if there is a way to use fa-chevrons and format those instead, and it will still behave the same regarding resizing and formatting, that could be an effective solution as well.
Here is my current code for the control elements:
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
I found a similar question here but was not able to make sense of the answer provided there.
I also found this page on GitHub but was not able to make any of the answers there work for me either.
There's no need for any unnecessary css hacks.
If you want to modify any Bootstrap css (or the carousel control colors in particular), you can easily do that.
Here are the rules that control the color of the carousel controls:
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
Replace the fff in the fill='%23fff' parts with the hex code of the desired color.
Here's a working code snippet where fill='%23fff' has been replaced with fill='%23f00' for red instead of white:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
</style>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/800/400/animals" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
这篇关于更改Bootstrap 4 Carousel控件颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
