搜尋
首頁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...'

<button>加载</button>
<script>
$(function(){
    $("#loaddingBtn").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button(&#39;reset&#39;)
        },1000);
      });
});    
</script>

詳解Bootstrap中的按鈕組件

【相關推薦:《bootstrap教學」】

模擬單選

#  模擬單選按鈕是透過一組按鈕來實現單選擇操作。使用按鈕組來模擬單選按鈕組,能夠讓設計更具個性化,可以自訂出更美觀的單選按鈕組

  在Bootstrap框架中按鈕插件中,可以透過給按鈕組自訂屬性data-toggle="buttons"

<div>
    <label>
        <input>男
    </label>
    <label>
        <input>女
    </label>
</div>

詳解Bootstrap中的按鈕組件

#模擬多重選擇

##  使用按鈕組來模擬復選按鈕和模擬單選按鈕是一樣的,具有同等效果,也是透過在按鈕組上自訂

data-toggle="buttons"來實現。唯一不同的是,將input[type="radio"]換成input[type="checkbox"]

<div>
    <label>
        <input>电影
    </label>
    <label>
        <input>音乐
    </label>
    <label>
        <input>游戏
    </label>
    <label>
        <input>摄影
    </label>
</div>

詳解Bootstrap中的按鈕組件

#按鈕狀態

  使用 data-toggle 屬性還可以啟動按鈕的行為狀態,實現在啟動和未啟動之間進行狀態切換。單擊時將按鈕激活,再單擊可以讓按鈕恢復到預設狀態

<button>有状态的按钮</button>
<button>普通按钮</button>

詳解Bootstrap中的按鈕組件

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>

詳解Bootstrap中的按鈕組件

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的目的:建立一致且有吸引力的網站Bootstrap的目的:建立一致且有吸引力的網站Apr 19, 2025 am 12:07 AM

Bootstrap的主要用途是幫助開發者快速構建響應式、移動優先的網站。其核心功能包括:1.響應式設計,通過網格系統實現不同設備的佈局調整;2.預定義組件,如導航欄和模態框,確保美觀和跨瀏覽器兼容性;3.支持自定義和擴展,使用Sass變量和mixins調整樣式。

Bootstrap與其他框架:比較概述Bootstrap與其他框架:比較概述Apr 18, 2025 am 12:06 AM

Bootstrap優於TailwindCSS、Foundation和Bulma,因為它易用且快速開發響應式網站。 1.Bootstrap提供豐富的預定義樣式和組件庫。 2.其CSS和JavaScript庫支持響應式設計和交互功能。 3.適合快速開發,但自定義樣式可能較複雜。

在React中集成引導樣式:方法和技術在React中集成引導樣式:方法和技術Apr 17, 2025 am 12:04 AM

在React項目中整合Bootstrap可以通過兩種方法:1)使用CDN引入,適合小型項目或快速原型設計;2)使用npm包管理器安裝,適用於需要深度定制的場景。通過這些方法,你可以在React中快速構建美觀且響應式的用戶界面。

React的引導:優勢和最佳實踐React的引導:優勢和最佳實踐Apr 16, 2025 am 12:17 AM

將Bootstrap集成到React項目中的優勢包括:1)快速開發,2)一致性和可維護性,3)響應式設計。通過直接引入CSS文件或使用React-Bootstrap庫,可以在React項目中高效使用Bootstrap的組件和样式。

Bootstrap:網絡框架的快速指南Bootstrap:網絡框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter開發的框架,幫助快速搭建響應式、移動優先的網站和應用。 1.易用性和豐富組件庫使開發更快。 2.龐大社區提供支持和解決方案。 3.通過CDN引入並使用類名控製樣式,如創建響應式網格。 4.可自定義樣式和擴展組件。 5.優點包括快速開發和響應式設計,缺點是樣式一致性和學習曲線。

打破bootstrap:是什麼以及為什麼重要打破bootstrap:是什麼以及為什麼重要Apr 14, 2025 am 12:05 AM

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

Bootstrap:使網頁設計更容易Bootstrap:使網頁設計更容易Apr 13, 2025 am 12:10 AM

Bootstrap讓網頁設計更容易的原因是其預設組件、響應式設計和豐富的社區支持。 1)預設組件庫和样式讓開發者無需編寫複雜的CSS代碼;2)內置網格系統簡化了響應式佈局的創建;3)社區支持提供了豐富的資源和解決方案。

Bootstrap的影響:加速網絡開發Bootstrap的影響:加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發,通過提供預定義的樣式和組件,開發者可以快速搭建響應式網站。 1)它縮短了開發時間,例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins,Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能,提高加載速度。

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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境