更改Bootstrap 4下拉按钮颜色
Bootstrap 4是一个流行的前端开发框架，它提供了丰富的组件和样式，方便开发人员快速构建响应式网页。下拉按钮是Bootstrap 4中常用的组件之一，可以通过更改其颜色来实现个性化的设计。
要更改Bootstrap 4下拉按钮的颜色，可以通过以下步骤进行操作：
- 首先，在HTML文件中引入Bootstrap 4的CSS文件。可以通过以下方式引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">- 在HTML文件中创建一个下拉按钮。可以使用
<div>元素和<button>元素来创建一个下拉按钮，如下所示：
<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">
<!-- 下拉菜单项 -->
</div>
</div>- 更改下拉按钮的颜色。Bootstrap 4提供了一系列的颜色类，可以通过为按钮添加相应的类来更改颜色。例如，要将下拉按钮的颜色更改为红色，可以将按钮的类改为
btn btn-danger dropdown-toggle。 - 添加下拉菜单项。在
<div class="dropdown-menu">中添加下拉菜单项，每个菜单项使用<a>元素表示。例如：
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">菜单项1</a>
<a class="dropdown-item" href="#">菜单项2</a>
<a class="dropdown-item" href="#">菜单项3</a>
</div>至此，你已经成功更改了Bootstrap 4下拉按钮的颜色。
关于Bootstrap 4下拉按钮的更多信息，你可以参考腾讯云的相关产品文档：
相关·内容
1回答
我正在尝试更改按钮的颜色，但到目前为止，我只在悬停时更改了颜色。这是我的HTML，这是我的CSS，当它通过悬停改变颜色时： .nav > li > a:focus, .nav > li > a:hover { } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.co
浏览 19提问于2020-09-02得票数 0
回答已采纳
1回答
我有一个引导下拉。我想做的是，只有当下拉菜单展开时，按钮的背景色才会变成蓝色。我通过在按钮中添加一个单击监听器来实现它的样式，但问题是当菜单展开，用户单击其他地方时，菜单就会隐藏，而按钮仍然是蓝色的。我如何修改它，使按钮仅为蓝色，只有时，菜单被展开？
浏览 0提问于2021-03-25得票数 2
回答已采纳
我做了下面的下拉按钮()。当前，当下拉列表打开时，当我悬停在列出的项目上时，按钮本身会将其颜色更改为深蓝色。我不希望这种情况发生；我希望它将其颜色更改为#1abc9c。有人知道怎么做吗？<html> <link rel="stylesheet" href="https://maxcdn.bootstrapc
浏览 3提问于2017-03-23得票数 0
回答已采纳
2回答
我有一个菜单，里面有作为菜单项的按钮。其中一个菜单项是下拉按钮。我是在Bootstrap和CSS编码。除了我点击下拉菜单项之外，一切都很正常。当我这样做时，名为"More“的下拉按钮变成绿色，"More”一词消失，所以我看到的只是一个绿色的不透明按钮。我已经将"More“按钮的文本轮廓设置为绿色，因此它可以从中提取颜色。否则，当未单击菜单下拉项链接时，按钮</e
浏览 32提问于2021-03-24得票数 0
回答已采纳
我有这个bootstrap 4 dropdown (fiddle here)，在这里我想改变按钮的背景颜色@click。但是当我添加click事件时，它不再隐藏下拉菜单。另外，如何在不破坏其原有功能的情况下更改下拉按钮的背景颜色？
浏览 42提问于2021-03-25得票数 0
回答已采纳
1回答
我使用react-bootstrap在我的导航栏中创建了一个下拉菜单，但无法更改文本的颜色，并且使用css.It的下拉按钮始终具有默认的蓝色。我更改了它的其他属性，它们都使用css更改得非常好，但只有颜色值没有任何effect.It将是有帮助的，如果有人可以帮助我。
浏览 22提问于2020-09-16得票数 0
每次我按下Login下拉菜单时，按钮的颜色都继承了背景图像的颜色。但是，当我将光标从Login按钮移开时，它上方会出现一个白色方块。我没有任何css支持的按钮。代码和示例图像都在下面。我正在尝试使它，以便当我移动我的光标离开时，登录按钮仍然继承背景图像的颜色，而不是更改为白色方块。业余在bootstrap编码，所以如果有任何其他错误，请让我知道！
浏览 0提问于2018-05-14得票数 0
我在一个网站上使用了一个带有Bootstrap 4的Hugo Bigspring主题。我的主要行动号召按钮是橙色的，而第二个是绿色的。然而，我的橙色按钮在悬停时变成了绿色，我不知道为什么。按钮的代码：CSS：
.btn-primary橙色
浏览 0提问于2021-02-07得票数 0
在twitter bootstrap中有一个"dropdown-menu“类，例如<ul class="dropdown-submenu">。正如您所观察到的，it.How右侧有一个箭头，用于在悬停时将箭头的颜色设置为黑色？
浏览 0提问于2013-03-05得票数 1
回答已采纳
在Bootstrap 3中，你可以很容易地从下拉按钮中删除“脱字符”(指向下拉的小箭头)，但我不知道如何在Bootstrap 4中做到这一点，因为他们不再使用<span class="caret"><
浏览 55提问于2018-01-10得票数 39
回答已采纳
在导航栏中，当我点击“下拉菜单”时，我想打开一个不同的页面，而只有当我点击插入符号时，才会打开下拉菜单。例如，在下面的代码片段中，当我点击下拉菜单时，我想打开一个新的html页面，而当我点击caret.How时，我只想打开下拉菜单，我能做到这一点吗？
浏览 2提问于2020-04-20得票数 0
4回答
在bootstrap.css中改变了按钮btn-primary在不同状态下的颜色，但不知何故能够悬停，它只有一半。在哪里可以修复呢？谢谢。
浏览 9提问于2013-10-05得票数 4
2回答
我想隐藏下拉箭头和按钮的颜色，我使用的是vue-bootstrap。在没有箭头和按钮颜色的情况下，我还可以使用其他方法在我的navbar中进行下拉列表吗？我已经尝试了很多方法，但似乎我所做的每一个样式都不是在使用vue-bootstrap。
浏览 0提问于2021-03-08得票数 1
回答已采纳
我正在使用bootstrap 4设计一个带有下拉菜单项的菜单。悬停时，下拉链接的背景颜色会更改，并打开下拉链接。当我向下移动鼠标以选择其中一个下拉项时，下拉链接的颜色将恢复为其原始颜色。我希望下拉列表打开时，悬停颜色保持不变。 /4.0.0/js/bootstrap.min.js"><
浏览 11提问于2020-04-10得票数 1
回答已采纳
3回答
我的表单由单个和多个下拉选项组成。因此，我更喜欢只对我的单个和多个类使用一个类，即selectpicker。不过，我想改变默认的灰色的引导4下拉selectpicker类的颜色，以清除颜色。.bootstrap-select类的CSS文件中需要更改的颜色到底在哪里？当前视图(实际上没有禁用，但视图类似于禁用)
与类似(我尝试使用custom-select2类作为透明颜色的示例)
<div class="f
浏览 1提问于2019-11-06得票数 3
回答已采纳
1回答
这是我的代码，也是下拉菜单不显示下拉项目。它不显示下拉items.Help我与此，这将是非常有帮助的。另外，允许多个按钮的选择，包括更改我选择的每个按钮的颜色。}
margin-bottom: 0; margin-right- Latest compiled and minified CSS
浏览 0提问于2018-06-18得票数 5
回答已采纳
14回答
Twitter-Bootstrap按钮非常漂亮。但它们在颜色上是有限的。
有没有办法改变按钮的基色，同时保持bootstrap所带来的漂亮的悬停效果？
浏览 6提问于2012-05-19得票数 96
回答已采纳
我不能覆盖bootstrap 4和sass中的默认链接颜色。下面是我用来覆盖_variables.scss默认值为far的代码： $body-bg: #f4f4f4;$link-color: #c0b283;$theme-colors: ( "danger
浏览 6提问于2019-08-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
