我使用的引導按鈕類，具體如下：引導按鈕激活顏色變化
<button type="button" class="btn btn-success navbar-btn">Login</button>
眼下，顏色呈現綠色這是罰款。每次點擊按鈕時，按鈕都會變成深綠色的陰影。我想要的是讓按鈕不會改變顏色，但保持默認的引導程序顏色，並且除去它周圍的藍色輪廓。
對於藍色輪廓，我嘗試將輪廓設置爲none，但由於某種原因它沒有起作用。我知道我們必須使用
.btn : active:focus {
}
但我不知道，所以我有在想出來的難度引導成功按鈕的默認顏色。
這是btn-success：
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
.btn-success:active:hover {
color: #fff;
background-color: #398439;
border-color: #255625;
}
所以你只需要添加!important默認樣式（第一CSS塊） 您還可以添加outline: none !important;刪除藍框時，按鈕被激活
btn-success的默認顏色是＃5cb85c。你所要做的就是用DevTools檢查它，或者搜索你的引導樣式表，找到與這個類相關的所有規則，並在你自己的樣式表中改變你需要的任何規則來覆蓋它們。完全不需要使用!important，特異性是你的朋友。見MDN Specificity。
見工作片段（這個例子改變了所有國家相同的基本顏色只是作爲一個例子，還刪除box-shadow屬性爲好。你應該能夠改變任何你需要在這裏。）
.btn.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn.btn-success.focus,
.btn.btn-success:focus {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
box-shadow: none;
}
.btn.btn-success:hover {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
box-shadow: none;
}
.btn.btn-success.active,
.btn.btn-success:active {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
}
.btn.btn-success.active.focus,
.btn.btn-success.active:focus,
.btn.btn-success.active:hover,
.btn.btn-success:active.focus,
.btn.btn-success:active:focus,
.btn.btn-success:active:hover {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
box-shadow: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="btn btn-success navbar-btn">Changed BTN</button>
<button type="button" class="btn btn-info navbar-btn">Default BTN</button>
</div>
</div>
</nav>我把原來的樣式設置爲btn-success，發現有四種顏色。我提取它們並旋轉色調。然後我替換了所有相應的顏色。
/**
Original colors
===============
#28a745
#218838 <-- rgba(40, 167, 69, 0.5)
#1e7e34
#1c7430
Updated colors
===============
#8a458f
#703975 <-- rgba(112, 57, 117, 0.5)
#69346c
#613064
*/.btn.btn-success {
color: #fff;
background-color: #8a458f;
border-color: #8a458f;
}
.btn.btn-success:hover {
color: #fff;
background-color: #703975;
border-color: #69346c;
}
.btn.btn-success:focus, .btn-success.focus {
box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5);
}
.btn.btn-success.disabled, .btn-success:disabled {
color: #fff;
background-color: #8a458f;
border-color: #8a458f;
}
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
color: #fff;
background-color: #69346c;
border-color: #613064;
}
.btn.btn-success:not(:disabled):not(.disabled):active:focus,
.btn.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn.btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">NavBar</a>
<button type="button" class="btn btn-success navbar-btn">Modified Button</button>
<button type="button" class="btn btn-info navbar-btn">Regular Button</button>
</div>
</div>
</nav>這裏是我反向工程的SASS。
/** SASS */
$color-text: #ffffff
$color-highlight: #8a458f
$color-light: #703975
$color-dark: #69346c
$color-shadow: #613064
$box-shadow: 0 0 0 0.2rem transparentize($color-light, 0.5)
.btn-success
color: $color-text
background-color: $color-highlight
border-color: $color-highlight
&:hover
color: $color-text
background-color: #703975
border-color: $color-dark
&:focus, &.focus
box-shadow: $box-shadow
&.disabled, &:disabled
color: $color-text
background-color: $color-highlight
border-color: $color-highlight
&:not(:disabled):not(.disabled)
&:active, &.active
color: $color-text
background-color: $color-dark
border-color: $color-shadow
.show
>.btn-success.dropdown-toggle
color: $color-text
background-color: $color-dark
border-color: $color-shadow
>.btn-success.dropdown-toggle:focus
box-shadow: $box-shadow
.btn-success:not(:disabled):not(.disabled)
&:active:focus, &.active:focus
box-shadow: $box-shadow
要覆蓋引導的CSS，你必須調用'！important'。只要確保你在這樣做之前不需要再次重寫該類。 –
所以對於大綱我將不得不做大綱：無！重要 @DrewKennedy – halapgos1
試試看看會發生什麼，然後告訴我們。 :) –