JS组件Bootstrap按钮组与下拉按钮详解_

1、JS组件Bootstrap按钮组与下拉按钮详解_ 这篇文章主要为大家介绍了JS组件Bootstrap按钮组与下拉按钮的相关资料，感爱好的小伙伴们可以参考一下 本文先为大家分享按钮组的用法方法，具体内容如下 一、按钮组（Button Groups） 1、单个按钮组 用.btn-group封装多个带.btn的button div class=btn-group button class=btn1/button button class=btn2/button button class=btn3/button /div 2、多个按钮组 将多个div class=btn-group放进div clas

2、s=btn-toolbar中。 div class=btn-toolbar div class=btn-group . /div div class=btn-group . /div /div 3、垂直按钮组 向.btn-group添加.btn-group-vertical。 div class=btn-group btn-group-vertical . /div 二、下拉按钮（Button Dropdowns） 例子 div class=btn-group a class=btn dropdown-toggle data-toggle=dropdown href=# Action span

3、 class=caret/span /a ul class=dropdown-menu !- dropdown menu links - /ul /div 1、掌握大小 同样用法.btn-large、.btn-small、.btn-mini掌握大小。 2、分割的下拉按钮 div class=btn-group button class=btnAction/button button class=btn dropdown-toggle data-toggle=dropdown span class=caret/span /button ul class=dropdown-menu !- drop

4、down menu links - /ul /div 3、向上消失的菜单 div class=btn-group dropup button class=btnDropup/button button class=btn dropdown-toggle data-toggle=dropdown span class=caret/span /button ul class=dropdown-menu !- dropdown menu links - /ul /div 三、JavaScript 例子 加载状态。添加data-loading-text=Loading.。 代码如下: button t

5、ype=button class=btn btn-primary data-loading-text=Loading.Loading state/button 开关状态。添加data-toggle=button。 代码如下: button type=button class=btn btn-primary data-toggle=buttonSingle Toggle/button 复选框。在btn-group后添加data-toggle=buttons-checkbox。 div class=btn-group data-toggle=buttons-checkbox button type

6、=button class=btn btn-primaryLeft/button button type=button class=btn btn-primaryMiddle/button button type=button class=btn btn-primaryRight/button /div 单选。在btn-group后添加data-toggle=buttons-radio。 div class=btn-group data-toggle=buttons-radio button type=button class=btn btn-primaryLeft/button button

7、 type=button class=btn btn-primaryMiddle/button button type=button class=btn btn-primaryRight/button /div 用法 JavaScript代码触发开关状态。 $().button(toggle) 也可添加data-toggle属性自动触发。 button type=button class=btn data-toggle=button /button 用法JavaScript代码触发加载状态，同时按钮显示data-loading-text属性指定的值。 $().button(loading) button type=button class=btn data-loading-text=loading stuff. ./button 留意：Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用autocomplete=off。 用法JavaScript代码重置按钮状态。 $().button(reset) 重置按钮状态，并将按钮文字变成指定的文字。下例的complete仅为例子，可以替换。 b