如何更改 Bootstrap 滑块的颜色

Question

请告诉我如何更改 Bootstrap 滑块的颜色。在我的代码中，我进行了样式更改，但它们没有生效。滑块依然是经典的白色。

{% extends 'dashboard_base.html' %}

{% block content %}
    <div style="width: 100%; height: 100%; margin: 0; padding: 0;">
        <meta charset="UTF-8">
        <style>
            body {
                background-color: #152A3D;
            }
        </style>
    </div>
    
    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel" style="background-color: #152A3D !important;">
        <div class="carousel-inner" style="background-color: #152A3D;">
            {% for manager, plot_html in plots.items %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}" data-bs-interval="5000" style="background-color: #152A3D !important;">
                    {{ plot_html | safe }}
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

Answer 1

要更改 Bootstrap 滑块的颜色，您需要覆盖这些默认样式。

请注意，您需要定位与滑块相关的特定元素，并且可能需要使用更具体的选择器或增加样式的特异性来覆盖 Bootstrap 的默认样式。

{% extends 'dashboard_base.html' %}

{% block content %}
    <style>
        body {
            background-color: #152A3D;
        }

        /* Customize the background color of the carousel */
        #carouselExampleInterval {
            background-color: #152A3D !important;
        }

        /* Customize the background color of the carousel items */
        .carousel-inner .carousel-item {
            background-color: #152A3D !important;
        }

        /* Customize the color of the slider controls (optional) */
        .carousel-control-prev, .carousel-control-next {
            background-color: #152A3D !important;
        }
    </style>
    
    <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            {% for manager, plot_html in plots.items %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}" data-bs-interval="5000">
                    {{ plot_html | safe }}
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

!important

声明用于确保您的样式优先于 Bootstrap 的默认样式。

如果样式仍未生效，请使用浏览器的开发人员工具检查元素，确保正确应用自定义样式。