2015-09-04 53 views
2

我试图让这些单选按钮在浏览器中可点击。我在link here处找到了一个例子,但是相同的实现在我的浏览器中不起作用,在这里也不在这个片段中。变黑时变色,变黑时再变黑,但不会保留该信息或显示复选标记,就像在我发现的示例中那样。风格的引导程序单选按钮不能在浏览器中点击

这里缺少什么?

.btn span.glyphicon {   
 
    opacity: 0;  
 
} 
 
.btn.active span.glyphicon {   
 
    opacity: 1;  
 
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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" for="option1" active"> 
 
     <input type="radio" name="options" id="option1" autocomplete="off" chacked> 
 
     <span class="glyphicon glyphicon-ok"></span> 
 
     </label> 
 

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

 
     <label class="btn btn-info" for="option3"> 
 
     <input type="radio" name="options" id="option3" autocomplete="off"> 
 
     <span class="glyphicon glyphicon-ok"></span> 
 
     </label> 
 

 
     <label class="btn btn-default" for="option4"> 
 
     <input type="radio" name="options" id="option4" autocomplete="off"> 
 
     <span class="glyphicon glyphicon-ok"></span> 
 
     </label> 
 

 
     <label class="btn btn-warning" for="option5"> 
 
     <input type="radio" name="options" id="option5" autocomplete="off"> 
 
     <span class="glyphicon glyphicon-ok"></span> 
 
     </label> 
 

 
     <label class="btn btn-danger" for="option6"> 
 
     <input type="radio" name="options" id="option6" autocomplete="off"> 
 
     <span class="glyphicon glyphicon-ok"></span> 
 
     </label> 
 
    
 
    </div> 
 

 

 
    </div> 
 

 
</div>

+0

他说谎,他已经用jQuery来的'active'类添加到'label'标签!从技术上讲,他使用** bootstrap.js **中的'data-toggle =“button”',你可以在[Boostrap文档]上检查它(http://getbootstrap.com/javascript/#buttons-checkbox-radio) –

回答

1

你没有有引导js文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

.btn span.glyphicon {   
 
    opacity: 0;  
 
} 
 
.btn.active span.glyphicon {   
 
    opacity: 1;  
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
\t <h1 class="text-center">Checkbox/Radio - CSS Only</h1> 
 
</div> 
 

 
<div class="container"> 
 

 
\t <div class="well well-sm text-center"> 
 

 
\t \t <h3>Checkbox</h3> 
 
\t \t 
 
\t \t <div class="btn-group" data-toggle="buttons"> 
 
\t \t \t 
 
\t \t \t <label class="btn btn-success active"> 
 
\t \t \t \t <input type="checkbox" autocomplete="off" checked /> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> 
 

 
\t \t \t <label class="btn btn-primary"> 
 
\t \t \t \t <input type="checkbox" autocomplete="off"> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> \t \t \t 
 
\t \t 
 
\t \t \t <label class="btn btn-info"> 
 
\t \t \t \t <input type="checkbox" autocomplete="off"> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> \t \t \t 
 
\t \t 
 
\t \t \t <label class="btn btn-default"> 
 
\t \t \t \t <input type="checkbox" autocomplete="off"> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> \t \t \t 
 

 
\t \t \t <label class="btn btn-warning"> 
 
\t \t \t \t <input type="checkbox" autocomplete="off"> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> \t \t \t 
 
\t \t 
 
\t \t \t <label class="btn btn-danger"> 
 
\t \t \t \t <input type="checkbox" autocomplete="off"> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> \t \t \t 
 
\t \t 
 
\t \t </div> 
 

 
\t </div> 
 

 
</div> 
 

 

 
<div class="container"> \t \t \t 
 

 
\t <div class="well well-sm text-center"> 
 

 
\t \t <h3>Radio</h3> 
 
\t \t 
 
\t \t <div class="btn-group" data-toggle="buttons"> 
 
\t \t \t 
 
\t \t \t <label class="btn btn-success active"> 
 
\t \t \t \t <input type="radio" name="options" id="option2" autocomplete="off" chacked/> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> 
 

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

 
\t \t \t <label class="btn btn-info"> 
 
\t \t \t \t <input type="radio" name="options" id="option2" autocomplete="off"/> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> 
 

 
\t \t \t <label class="btn btn-default"> 
 
\t \t \t \t <input type="radio" name="options" id="option2" autocomplete="off"/> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> 
 

 
\t \t \t <label class="btn btn-warning"> 
 
\t \t \t \t <input type="radio" name="options" id="option2" autocomplete="off"/> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> 
 

 
\t \t \t <label class="btn btn-danger"> 
 
\t \t \t \t <input type="radio" name="options" id="option2" autocomplete="off"/> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> 
 
\t \t \t </label> 
 
\t \t 
 
\t \t </div> 
 

 

 
\t </div> 
 

 
</div>