使用Bootstrap，我如何将单选输入显示为按钮？
使用Bootstrap，我如何将单选输入显示为按钮？
提问于 2016-01-07 23:46:32
我的表单当前包含以下代码：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>
我不是将单选按钮显示为单选按钮，而是让它们看起来像普通按钮，如下所示：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>
我有收音机，我想让它们看起来像可切换的按钮。我该如何使用Bootstrap做到这一点呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-01-07 23:58:01
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Stack Overflow用户
发布于 2018-03-15 01:39:02
Bootstrap 4现在提供了一个toggleable button group，它可以在单击时为您管理活动状态。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Stack Overflow用户
发布于 2016-01-08 00:08:12
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34659366
复制相关文章
相似问题