按钮组用class="btn-group",模拟单选按钮效果也是以单选按钮为基础的,在Bootstrap中可以给按钮组设置data-toggle="buttons"来实现该效果,代码如下:
代码中定义了一个按钮组,单击按钮时我们永远只能选中一个,被单击的按钮颜色会加深显示,运行代码后页面效果如图所示
Bootstrap中的bu插件还可以实现多选按钮的效果。用法和单选按钮一样,我们需要在按钮组的容器上定义data-toggle="buttons"
代码中定义了一个按钮组,这里使用的元素不再是radio而是checkbox,这样我们就可以实现多选按钮的效果,在效果图中,总体样式和单选按钮的效果差不多,但是按钮可以选中多个,被选中的按钮颜色加深显示。对于单选或者多选按钮,我们单击的时候颜色会加深,再次单击的时候颜色恢复到之前状态,这就是data-toggle="buttons"属性的原因。页面运行效果如图所示