Question

我在Bootstrap中创建了这个按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-3">
  <div class="dropdown2">
    <button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown">Carello (99)
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li class="dropdown-header">Dropdown header 1</li>

    </ul>
  </div>

</div>

我已经使用了一些Bootstrap类用于按钮，但是当我尝试在css中更改此按钮的颜色时似乎没有发生任何事情..如何在Bootstrap中更改此按钮的颜色？这是我的css：

.dropdown-menu{
	background: #ff6600;
}

谢谢！

Answer 1

您目前正在使用.btn-default。现在，您可以使用任何其他默认的Bootstrap按钮颜色：.btn-primary，.btn-info，.btn-success，.btn-warning，.btn-danger。

或者，您可以通过编写以下样式将此按钮的颜色修改为您选择的颜色：

.dropdown2 .btn-default { 
  background: YOURCOLORHERE;
  color: YOURCOLORHERE;
}

Answer 2

你需要覆盖css。我建议您不要直接在glyphicon上使用button课程，而是在<i></i>内使用button，并在此答案中设置课程。这样你就可以得到正确的对齐。你们有一些对齐问题

＆＃13;

.btn.btn-default,
.btn.btn-default:focus{
  background-color:#0066ff;
  color:#fff;
}

.btn.btn-default:active,
.btn.btn-default.dropdown-toggle:active,
.btn.btn-default:hover{
  background-color:#0099ff;
  color:#fff;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-3">
               <div class="dropdown2">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-shopping-cart""></i> Carello (99)
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
     <li class="dropdown-header">Dropdown header 1</li>
   
    </ul>
  </div>

 </div>

＆＃13;

Answer 3

添加如下所需的样式。

button.btn {
  background-color: coral;
  color: white;
  border-color: red;
}
button.btn:hover {
  background-color: darkviolet;
  color: white;
  border-color: darkviolet;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-3">
  <div class="dropdown2">
    <button class="btn btn-default dropdown-toggle glyphicon glyphicon-shopping-cart" type="button" data-toggle="dropdown"> Carello (99)
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li class="dropdown-header">Dropdown header 1</li>

    </ul>
  </div>

</div>

无法更改引导程序中的按钮颜色

3 个答案: