如何使用Bootstrap 4更改下拉菜单的活动背景颜色？_如何更改bootstrap 4的背景颜色_更改bootstrap 4中按钮过渡的目标背景颜色 - 腾讯云开发者社区

使用Bootstrap 4更改下拉菜单的活动背景颜色可以通过以下步骤：

首先，确保你已经引入了Bootstrap 4的CSS文件和jQuery库。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

创建一个下拉菜单的HTML结构，并添加相应的class来定义下拉菜单样式。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">选项一</a>
    <a class="dropdown-item" href="#">选项二</a>
    <a class="dropdown-item" href="#">选项三</a>
  </div>
</div>

在CSS中定义自定义样式来更改活动背景颜色。

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f8f9fa; /* 自定义颜色 */
}

通过JavaScript代码初始化下拉菜单。

$('.dropdown-toggle').dropdown();

完整的示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Dropdown</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">
  <style>
    .dropdown-item:hover,
    .dropdown-item:focus {
      background-color: #f8f9fa; /* 自定义颜色 */
    }
  </style>
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      下拉菜单
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">选项一</a>
      <a class="dropdown-item" href="#">选项二</a>
      <a class="dropdown-item" href="#">选项三</a>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.dropdown-toggle').dropdown();
    });
  </script>
</body>

</html>

这样，你就可以使用Bootstrap 4更改下拉菜单的活动背景颜色了。通过自定义CSS样式，你可以根据需要定义不同的颜色来适应你的项目需求。

请注意，本回答给出的是使用Bootstrap 4的方法，如果你想了解更多关于Bootstrap 4的使用方法和其他组件，请参考腾讯云的Bootstrap相关产品和文档：