插件源文件:button.js
引用地址:
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-button.min.js"></script>
样式文件:
☑ LESS版本:源文件buttons.less
☑ Sass版本:源文件_buttons.scss
☑ 编译后的Bootstrap版本:对应bootstrap.css文件第2723行~第3082行
首先要说的是这一节,讨论的不是按钮组件的制作,前面我们专门花了一节的篇幅介绍了Bootstrap框架中的“按钮Buttons”的制作。在此处我们要讨论的是Bootstrap框架中的“按钮插件”。
大家在平时制作Web页面时,或多或少碰到过下列这些情形:
☑ 点击按钮时,按钮文字变为“正在加载…”,一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态,比如禁用状态、正在加载状态、正常状态等;
☑ 按钮切换状态
☑ 按钮模仿单选按钮
☑ 按钮模仿复选按钮
如何使用Bootstrap框架中的按钮,在此不做过多阐述,接下来的内容,主要和大家一起探讨Bootstrap框架中“按钮插件”的使用。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>按钮插件Button</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style>body{padding:10px;margin:10px}</style> </head> <body> <div class="btn-group" data-toggle="buttons"> <button type="button" data-toggle="button" class="btn btn-primary">确认</button> </div> </body> </html>