详解Bootstrap中的按钮组件-Bootstrap教程-PHP中文网

首页

web前端

Bootstrap教程

详解Bootstrap中的按钮组件

青灯夜游

Apr 19, 2021 pm 07:19 PM

bootstrap

本篇文章带大家详细了解一下Bootstrap中的按钮组件。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

按钮插件提供了一组可以控制按钮多种状态的功能，比如按钮的禁用状态、正在加载状态、正常状态等。本文将详细介绍Bootstrap按钮插件

加载状态

　　通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态

　　通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态，但从 v3.3.5 版本开始，此特性不再建议使用，并且已经在 v4 版本中删除了

　　[注意]如果不设置data-loading-text，则按钮文本在Loading状态时，默认显示的是'loading...'

3e12984cc4b2743b0e22ec797cbcb388加载65281c5ac262bf6d81768915a4a77ac0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(function(){
    $("#loaddingBtn").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button('reset')
        },1000);
      });
});    
2cacc6d41bbb37262a98f745aa00fbf0

【相关推荐：《bootstrap教程》】

模拟单选

　　模拟单选按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组

　　在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle="buttons"

16f501a688f37bdef311eee2a5428a39
    7738f54b83deb1a51e6cada3afd9a541
        5a612b70d5562e865f4381538dcdd3a7男
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        2d231ed76ecd4f1484321b5938d00a4d女
    8c1ecd4bb896b2264e0711597d40766c
16b28748ea4df4d9c2150843fecfba68

模拟多选

　　使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]

16f501a688f37bdef311eee2a5428a39
    7738f54b83deb1a51e6cada3afd9a541
        1a01211f270fbe786da4c30eb6877b3c电影
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        eca06fa1a663335fb4524c52571e0a0d音乐
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        c634eb5d543f9b3a98041f3c19fa36b5游戏
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        5414359f1de489e9aadb9070d77a68ee摄影
    8c1ecd4bb896b2264e0711597d40766c
16b28748ea4df4d9c2150843fecfba68

按钮状态

　　使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。单击时将按钮激活，再单击可以让按钮恢复到默认状态

a8d9c283128161270f7b7529cd531745有状态的按钮65281c5ac262bf6d81768915a4a77ac0
c0da018427a22f22a069c7d690eece88普通按钮65281c5ac262bf6d81768915a4a77ac0

JS触发

　　按钮插件可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset。其他的都可以随意定义：

$("#mybutton").button("toggle");//反转按钮状态
$("#mybutton").button("reset");//重置按钮状态
$("#mybutton").button("任意字符参数名");//替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值

<button class="btn btn-primary" data-complete-text="加载完成" type="button" id="mybutton">加载</button>
<script>
$(function(){
    $("#mybutton").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button(&#39;complete&#39;);
        },1000);
      });
});    
</script>

JS源码

【1】IIFE

　　使用立即调用函数，防止插件内代码外泄，从而形成一个闭环，并且只能从jQuery的fn里进行扩展

+function ($) {
    //使用es5严格模式
    &#39;use strict&#39;;
    //
}(window.jQuery);

【2】初始设置

var Button = function (element, options) {
    //要触发的元素
    this.$element  = $(element)
    //合并参数
    this.options   = $.extend({}, Button.DEFAULTS, options)
    //是否是加载状态
    this.isLoading = false
  }
  //版本号为3.3.7
  Button.VERSION  = &#39;3.3.7&#39;
  //默认loadinf时的文本内容为&#39;loading...&#39;
  Button.DEFAULTS = {
    loadingText: &#39;loading...&#39;
  }

【3】插件核心代码

//设置按钮状态的方法
  Button.prototype.setState = function (state) {
    //按钮需要禁用时使用它，先赋值一个临时变量
    var d    = &#39;disabled&#39;
    //当前元素
    var $el  = this.$element
    //如果是input，则使用val获取值，否则，使用html获取值
    var val  = $el.is(&#39;input&#39;) ? &#39;val&#39; : &#39;html&#39;
    //获取当前元素的自定义属性，所有以data-开头的属性
    var data = $el.data()
    //组装需要用到的属性，如传入loading，则组装成loadingText
    state += &#39;Text&#39;
    //如果data里不包含data-reset-text值，则将当前元素的值临时存放，以便过后再恢复使用它
    if (data.resetText == null) $el.data(&#39;resetText&#39;, $el[val]())

    //不阻止事件，以允许表单的提交
    setTimeout($.proxy(function () {
      //给元素赋值，如果是元素默认没有值，则从options里查询，否则，从自定义属性里查询
      $el[val](data[state] == null ? this.options[state] : data[state])
      //如果传入的是loading
      if (state == &#39;loadingText&#39;) {
        //设置加载状态为true
        this.isLoading = true
        //禁用该元素(即添加disabled样式和disabled属性)
        $el.addClass(d).attr(d, d).prop(d, true)
      } else if (this.isLoading) {
        this.isLoading = false
        //如果不是，则删除disabled样式和disabled属性
        $el.removeClass(d).removeAttr(d).prop(d, false)
      }
    }, this), 0)
  }
  //切换按钮状态
  Button.prototype.toggle = function () {
    //设置change标记
    var changed = true
    //查找带有[data-toggle="buttons"]属性的最近父元素
    var $parent = this.$element.closest(&#39;[data-toggle="buttons"]&#39;)
    //如果父元素存在
    if ($parent.length) {
      //查找触发元素内是否存在input元素
      var $input = this.$element.find(&#39;input&#39;)
      //如果是单选按钮
      if ($input.prop(&#39;type&#39;) == &#39;radio&#39;) {
        //如果被选中，则设置changed为false
        if ($input.prop(&#39;checked&#39;)) changed = false
        //查找同级元素是否有active样式，如果有，则删除active样式
        $parent.find(&#39;.active&#39;).removeClass(&#39;active&#39;)
        //给当前元素添加active样式
        this.$element.addClass(&#39;active&#39;)
      //如果是多选按钮
      } else if ($input.prop(&#39;type&#39;) == &#39;checkbox&#39;) {
        //如果多选按钮选中了，但元素没有active样式
        //或者多选按钮没有选中，但元素却有active样式，则设置changed为false
        if (($input.prop(&#39;checked&#39;)) !== this.$element.hasClass(&#39;active&#39;)) changed = false
        //重置元素的active样式
        this.$element.toggleClass(&#39;active&#39;)
      }
      //将多选按钮的checked设置为是否有active样式
      $input.prop(&#39;checked&#39;, this.$element.hasClass(&#39;active&#39;))
      //如果changed为true，则触发change事件
      if (changed) $input.trigger(&#39;change&#39;)
    } else {
      this.$element.attr(&#39;aria-pressed&#39;, !this.$element.hasClass(&#39;active&#39;))
      //重置元素的active样式
      this.$element.toggleClass(&#39;active&#39;)
    }
  }

【4】jQuery插件定义

function Plugin(option) {
    //根据选择器，遍历所有符合规则的元素
    return this.each(function () {
      var $this   = $(this)
      //获取自定义属性bs.button的值
      var data    = $this.data(&#39;bs.button&#39;)
      var options = typeof option == &#39;object&#39; && option
      //如果值不存在，则将Button实例设置为bs.button值
      if (!data) $this.data(&#39;bs.button&#39;, (data = new Button(this, options)))
      //如果option是toggle，则直接调用该方法  
      if (option == &#39;toggle&#39;) data.toggle()
      //否则调用setState()方法
      else if (option) data.setState(option)
    })
  }

  var old = $.fn.button
  //保留其他库的$.fn.button代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
  $.fn.button             = Plugin
  //重设插件构造器，可以通过该属性获取插件的真实类函数
  $.fn.button.Constructor = Button

【5】防冲突处理

$.fn.button.noConflict = function () {
    //恢复以前的旧代码
    $.fn.button = old
    //将$.fn.button.noConflict()设置为Bootstrap的Tab插件
    return this
  }

【6】绑定触发事件

$(document)
    //查询所有以button开头，data-toggle属性的值，绑定click事件
    .on(&#39;click.bs.button.data-api&#39;, &#39;[data-toggle^="button"]&#39;, function (e) {
      //查找当前单击对象的最近的有btn样式的父元素
      var $btn = $(e.target).closest(&#39;.btn&#39;)
      Plugin.call($btn, &#39;toggle&#39;)
      //如果单击对象不是单选或多选按钮
      if (!($(e.target).is(&#39;input[type="radio"], input[type="checkbox"]&#39;))) {
        //阻止默认行为
        e.preventDefault()
        //如果$btn是单选或多选按钮，触发focus事件
        if ($btn.is(&#39;input,button&#39;)) $btn.trigger(&#39;focus&#39;)
        //否则，找到子元素中的第一个具有visible状态的input或button，触发focus事件
        else $btn.find(&#39;input:visible,button:visible&#39;).first().trigger(&#39;focus&#39;)
      }
    })
    //查询所有以button开头，data-toggle属性的值，绑定focus事件
    .on(&#39;focus.bs.button.data-api blur.bs.button.data-api&#39;, &#39;[data-toggle^="button"]&#39;, function (e) {
      $(e.target).closest(&#39;.btn&#39;).toggleClass(&#39;focus&#39;, /^focus(in)?$/.test(e.type))
    })

更多编程相关知识，请访问：编程入门！！

以上是详解Bootstrap中的按钮组件的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：博客园。如有侵权，请联系admin@php.cn删除

Bootstrap：网络框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter开发的框架，帮助快速搭建响应式、移动优先的网站和应用。1.易用性和丰富组件库使开发更快。2.庞大社区提供支持和解决方案。3.通过CDN引入并使用类名控制样式，如创建响应式网格。4.可自定义样式和扩展组件。5.优点包括快速开发和响应式设计，缺点是样式一致性和学习曲线。

打破bootstrap：是什么以及为什么重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree，开放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem，流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap：使网页设计更容易Apr 13, 2025 am 12:10 AM

Bootstrap让网页设计更容易的原因是其预设组件、响应式设计和丰富的社区支持。1)预设组件库和样式让开发者无需编写复杂的CSS代码；2)内置网格系统简化了响应式布局的创建；3)社区支持提供了丰富的资源和解决方案。

Bootstrap的影响：加速网络开发Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web开发，通过提供预定义的样式和组件，开发者可以快速搭建响应式网站。1)它缩短了开发时间，例如在项目中几天内完成基本布局。2)通过Sass变量和mixins，Bootstrap允许定制样式以满足特定需求。3)使用CDN版本可以优化性能，提高加载速度。

理解引导：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一个开源的前端框架，主要作用是帮助开发者快速构建响应式网站。1)它提供了预定义的CSS类和JavaScript插件，方便实现复杂的UI效果。2)Bootstrap的工作原理依赖于其CSS和JavaScript组件，通过媒体查询实现响应式设计。3)使用示例包括基本用法，如创建按钮，以及高级用法，如自定义样式。4)常见错误包括类名拼写错误和未正确引入文件，建议使用浏览器开发者工具调试。5)性能优化可通过自定义构建工具实现，最佳实践包括使用语义化HTML和Bootstrap的预定义

Bootstrap Deep Dive：响应式设计和高级布局技术Apr 10, 2025 am 09:35 AM

Bootstrap通过网格系统和媒体查询实现响应式设计，使网站适应不同设备。1.使用预定义类（如col-sm-6）定义列宽。2.网格系统基于12列，需注意总和不超12。3.使用断点（如sm、md、lg）定义不同屏幕尺寸下的布局。

Bootstrap面试问题：降落您梦想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套开源的前端框架，用于快速开发响应式网站和应用。1.它提供了响应式设计、一致的UI组件和快速开发的优势。2.网格系统使用flexbox布局，基于12列结构，通过.container、.row和.col-sm-6等类实现。3.自定义样式可以通过修改SASS变量或覆盖CSS实现。4.常用JavaScript组件包括模态框、轮播图和折叠。5.优化性能可以通过只加载必要组件、使用CDN和压缩合并文件来实现。