更改 Bootstrap 4 Carousel 控件颜色 [英] Change Bootstrap 4 Carousel Control Colors

查看：12
本文介绍了更改 Bootstrap 4 Carousel 控件颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 Bootstrap 4.0 为 Carousel 使用白色背景，并想更改控件的颜色.似乎 bootstrap 现在使用 SVG 作为他们的轮播图标.这意味着直接更改属性不起作用.

我目前也在为网站上的其他元素使用 Font Awesome，所以如果有一种方法可以使用 fa-V 形并对其进行格式化，并且它在调整大小和格式方面的行为仍然相同，那可能是也是有效的解决方案.

这是我当前的控制元素代码:

<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">以前的</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">下一步</span></a>

我在这里发现了一个类似的问题无法理解那里提供的答案.

我还在 GitHub 上找到了 this 页面，但无法制作任何那里的答案对我也有用.

解决方案

无需任何不必要的 css hack.

如果您想修改任何 Bootstrap css(或特别是轮播控件颜色)，您可以轻松地做到这一点.

以下是控制轮播控件颜色的规则:

.carousel-control-prev-icon {背景图像:url(数据:图像/svg+xml；字符集=utf8，%3Csvg xmlns='http://www.w3.org/2000/svg'fill='%23fff' viewBox='0 0 88'%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 {背景图像:url(数据:图像/svg+xml；字符集=utf8，%3Csvg xmlns='http://www.w3.org/2000/svg'fill='%23fff' viewBox='0 0 88'%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");}

将 fill='%23fff' 部分中的 fff 替换为所需颜色的十六进制代码.

这是一个有效的代码片段，其中 fill='%23fff' 已被替换为 fill='%23f00' 代表红色而不是白色:

<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"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><风格>.carousel-control-prev-icon {背景图像:url(数据:图像/svg+xml；字符集=utf8，%3Csvg xmlns='http://www.w3.org/2000/svg'fill='%23f00' viewBox='0 0 88'%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 {背景图像:url(数据:图像/svg+xml；字符集=utf8，%3Csvg xmlns='http://www.w3.org/2000/svg'fill='%23f00' viewBox='0 0 88'%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");}</风格><div class="容器"><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="第一张幻灯片">

<div class="carousel-item"><img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="第二张幻灯片">

<div class="carousel-item"><img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="第三张幻灯片">

<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">以前的</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">下一步</span></a>

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆