在浏览器

Question

我试图在浏览器中点击这些单选按钮。我在此link here找到了一个示例，但同样的实现并不适用于我的浏览器，也不在此片段中。当鼠标滑过时会改变颜色，当压下时会再次变暗，但是他们不会像我在我找到的例子中那样保留该信息或显示复选标记。

这里缺少什么？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它是一类btn-group，它也需要导入javascript。 https://dnntracker.atlassian.net/browse/DNN-7063

Answer 2

你没有bootstrap 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">
	<h1 class="text-center">Checkbox/Radio - CSS Only</h1>
</div>

<div class="container">

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

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

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

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

	</div>

</div>


<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>

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

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

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

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


	</div>

</div>