前端框架Bootstrap--按钮和折叠插件

以下是前端框架Bootstrap相关的按钮和折叠插件知识，希望对读者们有所帮助：

Bootstrap框架

一． 按钮

可以通过按钮插件创建不同状态的按钮
（1）单个切换

单个切换

已点击选中的按钮

注意:在Firefox多次页面加载时，按钮可能保持表单的禁用或选择状态
解决方案添加autocomplete=”off”
（2）单选按钮

单选按钮

选中男

（3）复选按钮

复选按钮

选中电脑，音乐

（4）加载状态

加载状态

点击加载后显示的效果图

Button插件中的button方法中有三个参数:toggle、reset、string（比如loading、complete）
（5）可代替data-toggle=”button”

Paste_Image.png

二.折叠

通过点击可以折叠内容
基本实例

Paste_Image.png

点击展开的效果图

手风琴折叠

手风琴折叠

效果图

data-parent： 默认值为false，设置需指定父元素选择器，也就是说，选定其中一个折叠区，其他折叠将隐藏，实现手风琴效果。
data-toggle： 如果前面加data-*，设置’collapse’表示实现折叠；如果是javascript中的属性，默认为true，实现反转

在手风琴例子前提上+jq设置

Paste_Image.png

选定其中一个折叠区，其他折叠将隐藏

手动调用

Paste_Image.png

效果图

collapse方法还提供了三个参数：hide、show、toggle

Paste_Image.png

效果图

Collapse插件中事件有四种

Show.bs.collapse ： 在show方法调用时立即触发
Shown.bs.collapse ： 折叠区完全显示出来是触发
Hide.bs.collapse ： 在hide方法调用时触发
Hidden.bs.collapse ： 该事件是折叠区域完全隐藏之后触发
例子

show.bs.collapse

效果图

往后还会更新前端Bootstrap其他知识部分，谢谢大家阅读本人文章，祝愿大家心想事成！

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping