如何在Bootstrap中创建切换按钮
我最初用HTML、CSS和JavaScript创建了一个web应用，然后又被要求在Bootstrap中重新创建它。我已经做得很好了，但是我不得不在web应用程序中切换按钮，这些按钮已经变成了单选按钮(最初是复选框)，而不是我原来的切换按钮。
按钮的代码为：
<label>
Notifications
<span class='toggle'>
<input type='radio'
class='notifications'
name='notifications'
id='notifications' />
</span>
</li>
<label>
Preview
<span class='toggle'>
<input type='radio'
class='preview'
name='preview'
id='preview' />
</span>
</li>页面所链接的JavaScript和CSS文件是：
<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">有没有办法更改代码，这样我就可以拿回切换按钮了？
回答 9
Stack Overflow用户
发布于 2013-03-01 23:16:59
2013年的初步答案
一个优秀的(非官方的) Bootstrap Switch is available。
<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();它使用单选类型或复选框作为开关。从V.1.8开始添加了type属性。
源代码是available on Github。
2018年的笔记
我不建议现在使用那些旧的开关按钮，因为它们似乎总是像许多人所指出的那样suffer of usability issues。
请考虑从React Component framework看一下modern Switches like this one (与Bootstrap无关，但可以集成到Bootstrap网格和UI中)。
对于Angular、View或jQuery存在其他实现。
import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'
class Switcher extends React.Component {
state = {
disabled: false,
}
toggle = () => {
this.setState({
disabled: !this.state.disabled,
})
}
render() {
return (
<div style={{ margin: 20 }}>
<Switch
disabled={this.state.disabled}
checkedChildren={'开'}
unCheckedChildren={'关'}
/>
</div>
</div>
)
}
}
ReactDOM.render(<Switcher />, document.getElementById('__react-content'))本机引导开关
Stack Overflow用户
发布于 2014-01-21 13:02:26
如果你不介意改变你的超文本标记语言，你可以在<button>上使用data-toggle属性。
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>Stack Overflow用户
发布于 2014-09-19 02:37:15
Bootstrap 3具有基于复选框或单选按钮创建切换按钮的选项：http://getbootstrap.com/javascript/#buttons
复选框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>单选按钮
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</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>为了让它们正常工作，你必须用Bootstrap的Javascript来初始化.btn：
$('.btn').button();https://stackoverflow.com/questions/13511368
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号