Bootstrap3 按钮组插件

按钮组

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

1)复选按钮组

复选按钮组是类似于复选框的一组按钮,用户可以选择按钮组中的多个按钮。要添加这个功能,只需给 .btn-group 的按钮组容器添加 data-toggle="buttons " 属性,并将一组包含复选框的 <label> 元素放入容器中即可:

  1. <div class="btn-group" data-toggle="buttons">
  2.   <label class="btn btn-primary active">
  3.     <input type="checkbox" autocomplete="off" checked>Checkbox 1(pre-checked)
  4.   </label>
  5.   <label class="btn btn-primary">
  6.     <input type="checkbox" autocomplete="off">Checkbox 2
  7.   </label>
  8.   <label class="btn btn-primary">
  9.     <input type="checkbox" autocomplete="off">Checkbox 3
  10.   </label>
  11. </div>

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

复选按钮组

图4-17 复选按钮组

2)单选按钮组

单选按钮组是类似于单选框的一组按钮,用户每次只能选择按钮组中的一个按钮。要添加这个功能,只需给 .btn-group 的按钮组容器添加 data-toggle="buttons-radio" 属性,并将一组包含单选按钮的 <label> 元素放入容器中即可:

 
  1. <div class="btn-group" data-toggle="buttons">
  2.   <label class="btn btn-primary active">
  3.     <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  4.   </label>
  5.   <label class="btn btn-primary">
  6.     <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  7.   </label>
  8.   <label class="btn btn-primary">
  9.     <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  10.   </label>
  11. </div>

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

单选按钮组

图4-18 单选按钮组

关于作者

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页

打赏

ixygj197875

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者