Question

我需要更改下拉按钮的默认颜色。

<button class="btn-btn-primary dropdown-toogle" type="button" data-toggle="dropdown">Select Course
<span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#">Physics</a></li>
  <li><a href="#">Chemistry</a></li>
  <li><a href="#">Math</a></li>
</ul>

我得到默认颜色的下拉按钮。我需要用其他颜色更改

Answer 1

有很多方法可以做到这一点或者您可以更改按钮类“ btn-info”，它是引导程序btn类，它将更改blue（Cyan）中的btn颜色，或者可以创建您可以将自己的类放在btn类旁边，并根据该颜色给该类提供任何颜色根据您的需要。

<pre>
<button class="btn btn-info dropdown-toogle" type="button" data-toggle="dropdown">Select Course<span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Physics</a></li>
        <li><a href="#">Chemistry</a></li>
        <li><a href="#">Math</a></li>
      </ul>
    </div>

<pre>

<pre>
<style>
.my-btn{
  background:red !important;
}
</style>

<button class="btn btn-info my-btn dropdown-toogle" type="button" data-toggle="dropdown">Select Course<span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Physics</a></li>
        <li><a href="#">Chemistry</a></li>
        <li><a href="#">Math</a></li>
      </ul>
</pre>

Answer 2

尝试一下：-

使用Bootstrap类：-

btn-primary



btn成功


btn-danger

btn-info

btn警告

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<button class="btn btn-primary  dropdown-toggle" type="button" data-toggle="dropdown">Select Course
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Physics</a></li>
                            <li><a href="#">Chemistry</a></li>
                            <li><a href="#">Math</a></li>
                        </UL>
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">success
                            <span class="caret"></span></button>
<button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">warning
                            <span class="caret"></span></button>
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">info
                            <span class="caret"></span></button>
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">danger
                            <span class="caret"></span></button>

更改下拉按钮的默认颜色

2 个答案: