搜索
首页web前端Bootstrap教程详解Bootstrap中的按钮组件

详解Bootstrap中的按钮组件

Apr 19, 2021 pm 07:19 PM
bootstrap

本篇文章带大家详细了解一下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

1.gif

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

模拟单选

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

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

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

2.gif

模拟多选

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

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

3.gif

按钮状态

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

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

4.gif

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>

5.gif

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:简化响应式Web开发Bootstrap:简化响应式Web开发May 09, 2025 am 12:13 AM

Bootstrap简化开发流程主要通过其栅格系统、预定义组件和JavaScript插件。1.栅格系统允许灵活布局,2.预定义组件如按钮和导航栏简化样式设计,3.JavaScript插件增强交互功能,提升开发效率。

Bootstrap:响应式Web设计的关键Bootstrap:响应式Web设计的关键May 08, 2025 am 12:24 AM

Bootstrap是由Twitter开发的开源前端框架,提供了丰富的CSS和JavaScript组件,简化了响应式网站的构建。1)其网格系统基于12列布局,通过类名控制元素在不同屏幕尺寸下的显示。2)组件库包括按钮、导航栏等,易于定制和使用。3)工作原理依赖于CSS和JavaScript文件,需注意处理依赖关系和样式冲突。4)使用示例展示了基本和高级用法,强调了自定义功能的重要性。5)常见错误包括网格系统计算错误和样式覆盖,需使用开发者工具调试。6)性能优化建议只引入必要组件,使用预处理器定制样

Bootstrap:一个强大的Web设计框架Bootstrap:一个强大的Web设计框架May 07, 2025 am 12:05 AM

Bootstrap是一个开源的前端框架,由Twitter团队开发,旨在简化和加速网页开发过程。1.Bootstrap基于HTML、CSS和JavaScript,提供了丰富的组件和工具,用于创建现代化的用户界面。2.它的核心在于响应式设计,通过预定义的类和组件实现各种布局和样式。3.Bootstrap提供了预定义的UI组件,如导航栏、按钮、表单等,易于使用和调整。4.使用示例包括创建简单的导航栏和高级的可折叠侧边栏。5.常见错误包括版本冲突、CSS覆盖和JavaScript错误,可通过版本管理工具

Bootstrap在React中的力量:详细的外观Bootstrap在React中的力量:详细的外观May 06, 2025 am 12:06 AM

Bootstrap在React中可以通过两种方式集成:1)使用Bootstrap的CSS和JavaScript文件;2)使用React-Bootstrap库。React-Bootstrap提供了封装好的React组件,使得在React中使用Bootstrap更加自然和高效。

在React中使用Bootstrap组件:逐步教程在React中使用Bootstrap组件:逐步教程May 05, 2025 am 12:09 AM

在React项目中使用Bootstrap组件可以通过两种方式:1)使用原始Bootstrap的CSS和JavaScript;2)使用专门为React设计的库如react-bootstrap或reactstrap。1)通过npm安装Bootstrap并在入口文件中引入其CSS文件,然后在React组件中使用Bootstrap类名。2)安装react-bootstrap或reactstrap后,直接使用其提供的React组件。使用这些方法可以快速构建响应式UI,但需注意样式加载、JavaScript

简单英语的引导程序:简化网络开发简单英语的引导程序:简化网络开发May 04, 2025 am 12:02 AM

Bootstrap是开源的前端框架,简化网页开发。1.它基于HTML、CSS、JavaScript,提供预定义样式和组件。2.使用预定义类和JavaScript插件,实现响应式布局和交互功能。3.基本用法是引入CSS和JavaScript文件,使用类创建导航栏等。4.高级用法包括自定义复杂布局。5.调试时检查类名和文件引入,使用开发者工具。6.优化建议是只引入必要文件,使用CDN,自定义时用LESS或Sass。

引导和反应:创建响应式Web应用程序引导和反应:创建响应式Web应用程序May 03, 2025 am 12:13 AM

如何利用Bootstrap和React打造响应式Web应用?通过结合Bootstrap的CSS框架和React的组件化架构,可以创建现代、灵活且易于维护的Web应用。具体步骤包括:1)导入Bootstrap的CSS文件并使用其类样式化React组件;2)利用React的组件化管理状态和逻辑;3)按需加载Bootstrap样式以优化性能;4)使用React的Hooks和Bootstrap的JavaScript组件创建动态界面。

Bootstrap:前端开发变得更加容易Bootstrap:前端开发变得更加容易May 02, 2025 am 12:10 AM

Bootstrap是一种开源的前端框架,帮助开发者快速构建响应式网站。1)它提供了预定义的样式和组件,如网格系统和导航栏。2)通过CSS和JavaScript文件实现样式和动态交互。3)基本用法是引入文件并使用类名构建页面。4)高级用法包括通过Sass自定义样式。5)常见问题包括样式冲突和JavaScript组件问题,可通过开发者工具和模块化管理解决。6)性能优化建议选择性引入模块和合理使用网格系统。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。