Bootstrap 按钮组

按钮组

将按钮组放在特定的容器中，不必编写JavaScript代码，就可以让按钮组具有HTML的复选框（checkbox）或单选框（radio）的效果。

1）复选按钮组

复选按钮组是类似于复选框的一组按钮，用户可以选择按钮组中的多个按钮。要添加这个功能，只需给 .btn-group 的按钮组容器添加 data-toggle="buttons-checkbox" 属性即可：

1. <div class="btn-group" data-toggle="buttons-checkbox">
2.   <button type="button" class="btn btn-primary">Left</button>
3.   <button type="button" class="btn btn-primary">Middle</button>
4.   <button type="button" class="btn btn-primary">Right</button>
5. </div>

复选按钮组跟HTML中的复选框使用方法相同，单击按钮组中的某个按钮，按钮将被选中，再次单击，将取消选中。被选中的按钮以深色背景显示，取消选中的按钮以默认的浅色背景显示。效果如图 5‑16所示：

图5-16 Bootstrap复选按钮组

2）单选按钮组

单选按钮组是类似于单选框的一组按钮，用户每次只能选择按钮组中的一个按钮。要添加这个功能，只需给 .btn-group 的按钮组容器添加 data-toggle="buttons-radio" 属性即可：

1. <div class="btn-group" data-toggle="buttons-radio">
2.   <button type="button" class="btn btn-primary">Left</button>
3.   <button type="button" class="btn btn-primary">Middle</button>
4.   <button type="button" class="btn btn-primary">Right</button>
5. </div>

单选按钮组跟HTML中的单选框使用方法相同，单击按钮组中的某个按钮，该按钮将被选中，其它按钮将取消选中。被选中的按钮以深色背景显示，取消选中的按钮以默认的浅色背景显示。效果如图 5‑17所示：

图5-17 Bootstrap单选按钮组

说明：

在按钮组功能时，Bootstrap并没有限制一定要用 button 元素，只要应用了 .btn 类，它可以是任何元素，比如 <a>、<span>、<input>、<div>等。如：

1. <div class="btn-group" data-toggle="buttons-checkbox">
2.   <a class="btn btn-primary">Left</a>
3.   <a class="btn btn-primary">Middle</a>
4.   <a class="btn btn-primary">Right</a>
5. </div>

   关于作者

   歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。