Bootsnipp單選按鈕

我試圖將這個bootsnipp：https://bootsnipp.com/user/snippets/kl7nQ 添加到我的項目中，但它不起作用。Bootsnipp單選按鈕

我的html頁面：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script> 
     <link rel="stylesheet" href="new 1.css"> 
    </head> 
    <body> 

<div class="container">   
    <div class="well well-sm text-center"> 
     <h3>Radio</h3> 
     <div class="btn-group" data-toggle="buttons"> 

      <label class="btn btn-success active"> 
       <input type="radio" name="options" id="option2" autocomplete="off" chacked> 
       <span class="glyphicon glyphicon-ok"></span> 
      </label> 

      <label class="btn btn-primary"> 
       <input type="radio" name="options" id="option1" autocomplete="off"> 
       <span class="glyphicon glyphicon-ok"></span> 
      </label> 
     </div> 
    </div> 
</div> 
    </body> 
</html>

我的CSS頁面：

.btn span.glyphicon {    
    opacity: 0;    
} 
.btn.active span.glyphicon {     
    opacity: 1;    
}

你能幫助我。

來源

2017-08-26 Cliffe

你的代碼看起來很好，你只是錯過了包括bootstrap.min.js文件的單選按鈕的工作。我已將您的代碼更新爲工作的代碼

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Snippet - Touch Friendly Bootstrap Radio buttons and Checkboxes</title> 
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> 
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<style> 
.btn span.glyphicon { 
    opacity: 0; 
} 

.btn.active span.glyphicon { 
    opacity: 1; 
} 

</style> 

<body> 
    <div class="container"> 
    <div class="well well-sm text-center"> 
     <h3>Radio</h3> 
     <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-success"> 
      <input type="radio" name="options" id="option2" autocomplete="off" checked> 
      <span class="glyphicon glyphicon-ok"></span> 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="options" id="option1" autocomplete="off"> 
      <span class="glyphicon glyphicon-ok"></span> 
     </label> 
     </div> 
    </div> 
    </div> 
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
</body> 

</html>

來源

2017-08-26 13:50:32 k13k

Bootsnipp單選按鈕

回答

相關問題