我正在尝试使用Twitter Bootstrap 按钮组 http://twitter.github.com/bootstrap/javascript.html#buttons作为一组实际的表单输入控件。默认情况下,这些按钮组的功能类似于单选按钮或复选框组,但由于它们使用<button>
元素,它们实际上不能像单选按钮或复选框一样使用。
在我的研究中,我发现这个网站 http://labs.thecssninja.com/bootleg/index.html#buttons它使用 CSS 使这些引导按钮实际上控制单选按钮和复选框。唯一的问题是它们使用 CSS 的最新功能来工作,因此需要 IE9 或更高版本才能工作。
我想扩展对 IE8 的支持。是否有另一个(可能是 JS 控制的)解决方案可以提供与上述链接相同的功能,而无需严格的 CSS 要求?
感谢您的时间。
Bootstrap 3 有一个“本机”解决方案......
现在有一个针对这个问题的“真正的”Bootstrap 解决方案,它似乎在旧版浏览器上也能正常工作。它看起来是这样的:
// get selection
$('.colors input[type=radio]').on('change', function() {
console.log(this.value);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group colors" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" value="red" autocomplete="off" checked> Red
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="orange" autocomplete="off"> Orange
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
</label>
</div>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
See 相关的 Bootstrap 文档 https://getbootstrap.com/docs/3.3/javascript/#buttons-checkbox-radio了解更多信息。
引导程序4
引导程序4支持组件的方式与 Bootstrap 3 相同 https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons,但是 Bootstrap 4不支持IE9 https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#internet-explorer。您可能想查看引导IE8 https://github.com/coliff/bootstrap-ie8项目。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)