1. Home
  2. Bootstrap (Przycisk) widget

Najlepszy samouczek Bootstrap (Przycisk) widget W 2024 r. W tym samouczku możesz dowiedzieć się Status załadowania,Przykłady,Pojedynczy przełącznik,Przykłady,Pole wyboru (checkbox),Przykłady,Przycisk radiowy (Radio),Przykłady,zwyczaj,Opcje,sposób,Przykłady,

Bootstrap (Przycisk) widget

(Przycisk) w przycisku Bootstrap wprowadzone w tym rozdziale. Przycisk (przycisk) plug-in, można dodać kilka interaktywnych, takich jak przycisk sterowania stanów lub tworzyć grupy przycisków dla innych składników (takich jak paski narzędzi).

Jeśli chcesz zapoznać się z poszczególnymi funkcjami typu plug-in, trzeba odwołaćbutton.js.Albo, jak Bootstrap Przegląd wtyczki rozdziale wspomniano, można zwrócić się dobootstrap.jslub skompresowanej wersjibootstrap.min.js.

Status załadowania

Aby dodać do stanu obciążenia przycisku, wystarczy dodać element przyciskuDane ładowania-text = "Loading pl." , jak na swoje właściwości może, jak pokazano na poniższych przykładach:

Przykłady

<Przycisk id = "fat-btn" class = "btn btn-podstawowej" Dane ładowania-text = "Ładowanie pl." type = "button"> Stan obciążenia </ button> <Script> $ (function () {$ ( ". Btn"). Click (function () {$ (this) .button ( "loading"). Delay (1000) .queue (function () {// $ ( ta) .button ( "reset") ;});});}); </ script>

Spróbuj »

Wyniki przedstawiają się następująco:

Przycisk (przycisk) plug-in stanie załadowanym

Pojedynczy przełącznik

Aby aktywować pojedyncze przełączniki przycisk (czyli zmienić stan normalny przycisk jest wciśnięty stan i vice versa), po prostu dodajdanych przełączania = "button" elementu przycisku jako jego właściwości można, jak pokazano na poniższych przykładach:

Przykłady

<Przycisk type = "link" class = "btn btn-podstawowej" Dane-przełączania = "button"> pojedynczy przełącznik </ button>

Spróbuj »

Wyniki przedstawiają się następująco:

Przycisk (przycisk) plug-in jednego przełącznika

Pole wyboru (checkbox)

Można utworzyć grupę pole wyboru, a dodając dane atrybutdata-przełączanie się btn-group= "Przyciski", aby dodać grupę skrzynki elektrycznej.

Przykłady

<div class = "btn-grupy" Dane-przełączania = "przyciski"> <Label class = "btn btn-primary" > <Wejście type = "checkbox"> Opcja 1 </ label> <Label class = "btn btn-primary" > <Wejście type = "checkbox"> Opcja 2 </ label> <Label class = "btn btn-primary" > <Wejście type = "checkbox"> Opcja 3 </ label> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Przycisk (przycisk) plug-in box

Przycisk radiowy (Radio)

Podobnie, można utworzyć grupę radiową, a dodając atrybut danychdata-przełączanie = "przyciski", aby dodać btn-grupy,aby przełączyć grupy przycisków opcji.

Przykłady

<div class = "btn-grupy" Dane-przełączania = "przyciski"> <Label class = "btn btn-primary" > <Wejście type = "radio" name = "Opcje" id = "Opcja 1"> Opcja 1 </ label> <Label class = "btn btn-primary" > <Wejście type = "radio" name = "Opcje" id = "Opcja 2"> Opcja 2 </ label> <Label class = "btn btn-primary" > <Wejście type = "radio" name = "Opcje" id = "opcja3"> Opcja 3 </ label> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Przycisk (przycisk) plug-in przycisku radiowego

zwyczaj

przycisk (przycisk) Można włączyć wtyczkępoprzez javascript, jak następuje:

$ ( '. Btn "). Przycisk ()

Opcje

Nie ma opcji.

sposób

Oto niektóre z przycisków (przycisk) plug-in przydatnych sposobów:

方法描述实例
button('toggle')切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 
$().button('toggle')
.button('loading')当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 
$().button('loading')
.button('reset')重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 
$().button('reset')
.button(string)该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 
$().button(string)

Przykłady

Poniższy przykład pokazuje zastosowanie powyższych metod:

Przykłady

<H2> Kliknij na każdego przycisku, aby zobaczyć efekt tej metody </ h2> <H4> Demo .button ( "przełącznik") Metoda </ h4> <div id = "myButtons1" class = "bs-example"> <Przycisk type = "link" class = "btn btn-primary" > oryginalny </ button> </ Div> <H4> Demo .button ( "loading") Metoda </ h4> <div id = "myButtons2" class = "bs-example"> <Przycisk type = "link" class = "btn btn-podstawowej" Dane ładowania-text = "Ładowanie pl."> oryginalny </ button> </ Div> <H4> Demo .button ( "reset") Metoda </ h4> <div id = "myButtons3" class = "bs-example"> <Przycisk type = "link" class = "btn btn-podstawowej" Dane ładowania-text = "Ładowanie pl."> oryginalny </ button> </ Div> <H4> Demo .button (string) Metoda </ h4> <Przycisk type = "link" class = "btn btn-podstawowej" id = "myButton4" Dane-complete-text = "Ładowanie zakończone"> kliknij przycisk </ button> <Script>
$ (Function () {$ ( "# MyButtons1 .btn" ) click (function () {$ (przycisk ten) ( "przełącznik") ;.}) ;.}); $ (function () {$ ( "# MyButtons2 .btn" ). Click (function () {$ (this). Przycisk ( "loading"). Delay (1000). Kolejka (function () { });});}) ; $ (Function () {$ ( "# MyButtons3 .btn" ). Click (function () {$ (this). Przycisk ( "loading"). Delay (1000). Kolejka (function () Przycisk {$ (this) ( " reset") ;.});});}); $ (function () {$ ( "# MyButton4") . Click (function () {$ (this). Przycisk ( "loading"). Delay (1000). Kolejka (function () {$ (This) przycisk (. "Kompletna");});});});
</ Script>

Spróbuj »

Wyniki przedstawiają się następująco:

Przycisk (przycisk) metodą plug-in

Hot Tutorials

Contact US

Bootstrap (Przycisk) widget
10/30