4-5 按钮插件(Button)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

按钮插件(Button)

插件源文件: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框架中“按钮插件”的使用。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>按钮插件Button</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>body{padding:10px;margin:10px}</style>
  8. </head>
  9. <body>
  10. <div class="btn-group" data-toggle="buttons">
  11. <button type="button" data-toggle="button" class="btn btn-primary">确认</button>
  12. </div>
  13.  
  14. </body>
  15. </html>
下一节