更改Bootstrap中的颜色箭头

在Bootstrap中更改颜色箭头通常涉及到修改CSS样式。Bootstrap使用伪元素来创建箭头，例如在导航栏的下拉菜单中。下面是一个基本的指南，说明如何更改这些箭头的颜色。

基础概念

Bootstrap的箭头是通过CSS的::before或::after伪元素与边框技巧结合来创建的。这些伪元素被添加到元素上，通过设置透明边框和一个非透明的边框来形成一个三角形。

类型

Bootstrap中的箭头类型通常包括：

下拉菜单箭头
按钮箭头（如分页组件的箭头）
工具提示或弹出框的箭头

应用场景

在导航栏、下拉菜单、工具提示、模态框等组件中，经常可以看到Bootstrap的箭头。

如何更改颜色

假设我们要更改下拉菜单的箭头颜色，可以通过覆盖Bootstrap的默认样式来实现。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change Bootstrap Arrow Color</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .dropdown-toggle::after {
      border-top-color: #ff0000; /* 更改为你想要的颜色 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解决问题的步骤

定位箭头样式：首先找到Bootstrap中定义箭头的CSS规则。
覆盖样式：使用更具体的选择器或!important来覆盖默认样式。
测试更改：在不同的浏览器和设备上测试更改，确保兼容性和响应性。

参考链接

通过以上步骤，你可以轻松地更改Bootstrap中的颜色箭头。记得在实际项目中，根据需要调整选择器和样式，以确保与其他样式的兼容性。

页面内容是否对你有帮助？

有帮助

没帮助

更改Bootstrap中的颜色箭头

、

我在我的网站上有手风琴：https://getbootstrap.com/docs/5.0/components/accordion/ 代码如下： <div class="accordion pb-3"我想把手风琴箭头的颜色改成绿色。如何做到这一点呢？请帮帮我

浏览 91提问于2021-02-23得票数 2

回答已采纳

3回答

更改打开的下拉菜单上向上箭头的颜色

、、

我正在使用twitter bootstrap 2.0.1我已经设法改变了容器的颜色，但是我似乎找不到箭头是从哪里来的。谁知道我可以在哪里找到箭头的代码(以及如何改变它的颜色)？

浏览 0提问于2012-02-17得票数 14

回答已采纳

2回答

ngx-bootstrap工具提示箭头随其不同颜色的边界更改颜色

、、

我正在使用ngx bootstrap工具提示。我正在尝试将箭头的颜色更改为： border-right-color: white;问题是整个箭头变成白色，与页面背景白色相匹配我想让箭头的两个边界保持不同的颜色，比如“黑色”，这样我就会看到一个带有两个黑色边界的白色箭头。我希望它看起来

浏览 0提问于2017-10-03得票数 0

2回答

你能在选择下拉箭头上改变背景颜色吗？

、、

在窗体上使用select时，有没有办法更改箭头位于右侧的背景颜色？另外，我也可以改变箭头本身的颜色吗？我使用的是bootstrap的最新稳定版本，不知道他们是否有内置的东西，或者是否有CSS可以做到这一点。我附上了它现在的样子和我试图改变它的图像

浏览 0提问于2017-06-25得票数 1

2回答

引导工具提示箭头边框和背景色

、、

如何更改工具提示箭头的背景色和边框颜色？我用的是自带4。<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.

浏览 0提问于2018-11-30得票数 1

回答已采纳

1回答

Bootstrap 4 carousel-控制颜色-条件颜色- SVG

我正在尝试为渲染的SVG图标获取不同的颜色，用于控制旋转木马。$carousel-control-color: $secondary !default; 这会使箭头变成我想要的绿色。但是现在我有了一个主要背景颜色的卡片，我想让箭头在这个特定的div中有一个白色。因为您可以想象，$primary背景上的$p

浏览 4提问于2018-05-13得票数 0

1回答

如何更改角度材料日期拾取器的弹出式日历样式

、、、、

我只被允许使用角度材质(没有Bootstrap或任何其他库)。 📷 如何更改此弹出日历的样式？喜欢的字体，背景颜色，或而不是圆形，我希望它在方形按钮或箭头的风格，来回导航。

浏览 10提问于2020-01-27得票数 0

回答已采纳

2回答

是否可以在jstree中更改虚线的颜色

我正在使用带有黑色背景的jstree，所以我想知道如何更改每个节点之间的虚线的颜色(不确定我是否正确地调用它)。使用CSS可以吗？BR Nima

浏览 1提问于2018-05-21得票数 1

1回答

如何在Bootstrap 4中更改工具提示箭头颜色？

、、、、

我正在尝试更改工具提示的箭头颜色。我使用的是Bootstrap 4。我当前的代码如下：<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title我想要实现的是附加的布局

浏览 0提问于2019-02-10得票数 3

3回答

更改下拉箭头设计

、

我想要更改下拉箭头的颜色和箭头模型。必填项(不同样式的蓝色箭头)我的代码 <div id="contentBottom">

浏览 0提问于2019-06-14得票数 0

1回答

更改Back Button iOS中箭头的颜色

、、

我正在尝试更改导航栏中“后退”按钮的箭头颜色。我可以改变文本的颜色，但不能改变箭头。下面是我更改文本颜色的代码：如果有人能建议我如何改变

浏览 0提问于2013-12-13得票数 0

1回答

如何在bootstrap弹出窗口中设置箭头样式？

、

当用户点击联系人链接时，我有一个bootstrap弹出窗口。我设法设计了弹出窗口本身的样式，但不知道指向链接的小箭头是如何设置样式的。基本上我希望箭头的背景颜色与弹出的颜色相匹配。

浏览 18提问于2017-08-25得票数 1

回答已采纳

2回答

在Twitter Bootstrap中创建custom.css

、、、

在twitter bootstrap中有一个"dropdown-menu“类，例如<ul class="dropdown-submenu">。正如您所观察到的，it.How右侧有一个箭头，用于在悬停时将箭头的颜色设置为黑色？

浏览 0提问于2013-03-05得票数 1

回答已采纳

1回答

角度材质日期选择器箭头颜色

、

在材料日期选择器中有一个用于更改年份的小箭头，我设法更改了日历中每个组件的颜色，但不是这个箭头。 ? 我在浏览器中检查了它，发现了一个mat-calendar-arrow类，但我只能更改它的背景色，而不能更改箭头的颜色。有没有可能把它改成白色的？我需要它来做我的黑暗主题。

浏览 11提问于2021-09-13得票数 0

回答已采纳

2回答

在materailize css中更改面包屑的颜色

、、、

如何在materialize css中更改面包屑文本和箭头的颜色。我可以通过应用适当的类来做到这一点，但我无法更改面包屑中箭头标记的颜色。

浏览 9提问于2017-02-13得票数 1

回答已采纳

2回答

我如何隐藏按钮，并从Vue引导下拉箭头？

、、

我想隐藏下拉箭头和按钮的颜色，我使用的是vue-bootstrap。在没有箭头和按钮颜色的情况下，我还可以使用其他方法在我的navbar中进行下拉列表吗？我已经尝试了很多方法，但似乎我所做的每一个样式都不是在使用vue-bootstrap。<b-dropdown-item>A</b-dropdown-item> <b-dropdown-item>B

浏览 0提问于2021-03-08得票数 1

回答已采纳

2回答