如何使Bootstrap單選按鈕在選中後變暗

在普通的HTML單選按鈕中，可以非常方便地查看選中了哪個按鈕（即使將光標移開，它仍保持選中狀態）。如何使用Bootstrap製作相同的樣式（即在將光標移開後使所選按鈕保持較暗）？以下是我的代碼：如何使Bootstrap單選按鈕在選中後變暗

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Button example</title> 
     <link rel="stylesheet" href="./styles/bootstrap.min.css" /> 
     <script type="text/javascript" scr="./scripts/jquery-3.1.1.min.js"></script> 
     <script type="text/javascript" src="./scripts/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container"> 


     <div class="form-group" name="option6" style="text-align: center;"> 
      <div class="btn-group-vertical" data-toggle="buttons"> 

       <label class="btn btn-primary"> 
        <input type="radio" name="option6" checked="checked" value="have">have<br> 
       </label> 

       <label class="btn btn-primary"> 
        <input type="radio" name="option6" value="is having">is having<br> 
       </label> 
      </div>   
     </div> 

    </div>   

    </body> 

</html>

但是，在將光標移開後，此按鈕保持未選中狀態。

來源

2016-11-09 Alex F

您可以添加** **類以單選按鈕，當他們檢查 '.darker { 的box-shadow：1px的2px的3px的; }' 使用javscript – Dherya

沒有看到什麼不好，你的代碼...在這裏工作JSFiddle

確保兩個JS負載和CSS。

（也許./styles/bootstrap.min.css應該是css/bootstrap.min.css？）

來源

2016-11-09 11:29:19 Vino

我剛剛將我的Bootstrap css命名爲「styles」的文件夾。是的，我很奇怪。它在JSFiddle中工作，但不在我的瀏覽器中。 –

你能在瀏覽器控制檯看到任何錯誤嗎？ –

Chrome控制檯爲我提供了錯誤消息：「未捕獲的錯誤：Bootstrap的Javascript需要jQuery（...）」。我能做什麼呢？ –

如何使Bootstrap單選按鈕在選中後變暗

回答

相關問題