杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。
在之前的Bootstrap教程中我们学习了Bootstrap按钮组的使用方法以及Bootstrap按钮样式的使用方法,在这篇教程中我们将学习一下如何使用Bootstrap按钮组件

如何加载Bootstrap按钮组件

如果你已经引入了bootstrap.js文件,那就不必再额外引入其他文件,如果你是自定义引入js文件,那么就需要单独引入button.js文件从而实现Bootstrap按钮JS交互效果。

调用Bootstrap按钮的Loading交互效果

Bootstrap按钮的JS交互效果主要调用button()方法,让我们通过一个loading加载的交互效果来看看如何进行简单地调用:

<button type="button" id="myButton" data-loading-text="加载中..." class="btn btn-primary" autocomplete="off">
加载状态
</button>

<script>
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// 业务逻辑
$btn.button('reset')
})
</script>

通过上述一系列代码, 就能够实现基本的按钮加载交互效果,使用起来非常方便。

Bootstrap按钮单独切换效果

如果你需要通过一个按钮来达到切换的效果,那么你可以使用button的toggle方法,例如:<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off"> 单独按钮切换</button>以上代码能够通过一个按钮来切换不同状态,从而实现一些想要的效果。

Bootstrap按钮实现复选框和单选框的效果

如果你想要通过Bootstrap按钮来实现复选框或者单选框的效果,也同样能够通过Bootstrap按钮组件轻易实现:<div class="btn-group" data-toggle="buttons">  <label class="btn btn-primary active">   <input type="checkbox" autocomplete="off" checked> 复选框1  </label>  <label class="btn btn-primary">    <input type="checkbox" autocomplete="off"> 复选框2  </label>  <label class="btn btn-primary">    <input type="checkbox" autocomplete="off"> 复选框3  </label></div>以上代码就能够将按钮组变成一个复选框(checkbox),从而达到你想要的交互效果。
同样,你也能够用一系列代码实现按钮组变成单选框的效果:<div class="btn-group" data-toggle="buttons">  <label class="btn btn-primary active">    <input type="radio" name="options" id="option1" autocomplete="off" checked>单选框1  </label>  <label class="btn btn-primary">    <input type="radio" name="options" id="option2" autocomplete="off"> 单选框2  </label>  <label class="btn btn-primary">    <input type="radio" name="options" id="option3" autocomplete="off"> 单选框3  </label></div>怎么样,是不是非常简单?

写在文章最后

Bootstrap对于按钮的样式和交互效果都投入了相当多的精力,希望大家通过这篇介绍能够尽快掌握Bootstrap按钮组件使用方法。


佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。