Лучшее руководство по Bootstrap (кнопка) виджет в 2024 году. В этом руководстве вы можете изучить
статус Загрузка,примеров,Одинарный выключатель,примеров,Checkbox (Галочка),примеров,Кнопка радио (Radio),примеров,использование,опции,способ,примеров,
Bootstrap (кнопка) виджет
(Кнопка) в кнопки Bootstrap введена в этой главе. Кнопка (Button) плагин, вы можете добавить некоторые интерактивные, такие как контроль состояния кнопки или создать группы кнопок для других компонентов (например, панелей инструментов).
Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наbutton.js.Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.
статус Загрузка
Чтобы добавить к загрузке состояния кнопки, просто добавьте кнопки элементданных погрузо-Text = "Загрузка ru." , как его свойства могут, как это показано в следующих примерах:
примеров
<Кнопка ID = "жир-BTN" класс = "БТН БТН-первичный" загрузки данных-текст = "Загрузка ru."
типа "кнопка" => Load Status </ Кнопка>
<Script> $ (функция () {$ ( ". Btn"). Нажмите кнопку (функция () {$ (это) .button ( 'загрузка'). Задержка (1000) .queue (функция () {// $ ( это) .button ( 'сброс') ;});});}); </ скрипт>
Результаты следующие:
Одинарный выключатель
Для активации одиночные переключатели кнопки (т.е. изменить нормальное состояние кнопки нажимается состояние и наоборот), просто добавьтеданных тумблер "кнопку" элемент кнопки , как его свойства =может, как показано в следующих примерах:
примеров
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный"
данных тумблер "Кнопка" => одиночный переключатель </ кнопка>
Результаты следующие:
Checkbox (Галочка)
Вы можете создать группу флажок, и путем добавления данных атрибутовданных-тумблер БТН-группы= "кнопки" , чтобы добавить группу переключателя.
примеров
<Div класс = "БТН-группы" данных тумблер = "кнопки">
<Этикетка класс = "БТН БТН-первичный" >
<Input Type = "флажок"> Вариант 1 </ метка>
<Этикетка класс = "БТН БТН-первичный" >
<Input Type = "флажок"> Вариант 2 </ метка>
<Этикетка класс = "БТН БТН-первичный" >
<Input Type = "флажок"> Вариант 3 </ метка>
</ Div>
Результаты следующие:
Кнопка радио (Radio)
Кроме того , вы можете создать радио группу, и путем добавления данных атрибутовданных-тумблер = "кнопки" , чтобы добавить БТН-группудля переключения группы переключателей.
примеров
<Div класс = "БТН-группы" данных тумблер = "кнопки">
<Этикетка класс = "БТН БТН-первичный" >
<Input тип = "радио" Name = "опции" ID = "опция1"> Вариант 1 </ метка>
<Этикетка класс = "БТН БТН-первичный" >
<Input тип = "радио" Name = "опции" ID = "опция2"> Вариант 2 </ метка>
<Этикетка класс = "БТН БТН-первичный" >
<Input тип = "радио" Name = "опции" ID = "OPTION3"> Вариант 3 </ метка>
</ Div>
Результаты следующие:
использование
(кнопка) Вы можете включить плагинчерез JavaScript, следующим образом :
$ ( '. Btn'). Кнопка ()
опции
Там нет никаких вариантов.
способ
Ниже приведены некоторые из кнопок (кнопка) плагин полезных способов:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
примеров
Следующий пример демонстрирует использование описанных выше методов:
примеров
<H2> Нажмите на каждую кнопку , чтобы увидеть эффект метода </ h2>
<H4> Demo .button ( "переключение") метод </ h4>
<Div ID = "myButtons1" класс = "бс-пример">
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный" > оригинал </ кнопка>
</ Div>
<H4> Демо .button ( 'загрузка') метод </ h4>
<Div ID = "myButtons2" класс = "бс-пример">
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный"
загрузки данных-текст = "Загрузка ru."> оригинал </ кнопка>
</ Div>
<H4> Демо .button ( «перезагрузка») метод </ h4>
<Div ID = "myButtons3" класс = "бс-пример">
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный"
загрузки данных-текст = "Загрузка ru."> оригинал </ кнопка>
</ Div>
<H4> Demo .button (строка) метод </ h4>
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный" ID = "myButton4"
данных полный текст-= "Загрузка закончена"> нажмите I </ кнопка>
<Script>
$ (Функция () {$ ( "# MyButtons1 .btn" ) нажмите (функция () {$ (эта кнопка) ( 'тумблер') ;.}) ;.}); $ (Function () {$ ( "# MyButtons2 .btn" ). Нажмите кнопку (функция () {$ (это). Кнопка ( "загрузка"). Delay (1000). Очередь (функция () {
});});}) ; $ (Function () {$ ( "# MyButtons3 .btn" ). Нажмите кнопку (функция () {$ (это). Кнопка ( "загрузка"). Delay (1000). Очередь (функция () {$ (Это) кнопка ( " сброс") ;.});});}); $ (Function () {$ ( "# MyButton4") . Нажмите кнопку (функция () {$ (это). Кнопка ( "загрузка"). Delay (1000). Очередь (функция () {$ (Это) кнопка (. 'Полный');});});});
</ Script>
Результаты следующие:
