English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
O botão (Button) em Botão Bootstrap Foi introduzido em um capítulo. Através do plug-in de botão (Button), você pode adicionar algumas interações, como controlar o estado do botão ou criar grupos de botões para outros componentes (como a barra de ferramentas).
Para adicionar o estado de carregamento ao botão, basta adicionar data-loading-text="Carregando..." Como seu atributo, conforme o exemplo a seguir:
Teste e Veja ‹/›Bootstrap 示例 - Botão(Button) plugin estado de carregamento</title> <button id="fat-btn" class="btn btn-primary" data-loading-text="Carregando..." type="button"> Estado de carregamento </button> <script> $(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); // $(this).dequeue(); }); }); }); </script> </body> </html>
Os resultados estão conforme mostrado:
Para ativar a troca de um botão individual (ou seja, alterar o estado normal do botão para pressionado e vice-versa), basta adicionar data-toggle="button" Como seu atributo, conforme o exemplo a seguir:
Teste e Veja ‹/›Bootstrap 示例 - Botão(Button) plugin alteração individual</title>
Os resultados estão conforme mostrado:
Você pode criar um grupo de caixas de seleção e passar para ele btn-group Adicione atributo data data-toggle="buttons" para adicionar a troca de grupo de caixas de seleção.
Teste e Veja ‹/›Bootstrap 示例 - Botão(Button) plugin caixa de seleção</title> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox"> Opções 1 </label> <label class="btn btn-primary"> <input type="checkbox"> Opções 2 </label> <label class="btn btn-primary"> <input type="checkbox"> Opções 3 </label> </div> </body> </html>
Os resultados estão conforme mostrado:
Da mesma forma, você pode criar um grupo de botões de rádio e passar para ele btn-group Adicione atributo data data-toggle="buttons" para adicionar a troca de grupo de botões de rádio.
Teste e Veja ‹/›Bootstrap 示例 - Botão(Button) plugin botão de rádio</title> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Opções 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Opções 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Opções 3 </label> </div> </body> </html>
Os resultados estão conforme mostrado:
Você pode através de JavaScript Ative o plugin de botão(Button) conforme mostrado a seguir:
$('.btn').button()
Sem opções.
A seguir estão alguns métodos úteis no plugin de botão(Button):
método | descrição | 示例 |
---|---|---|
button('toggle') | Alterne o estado de pressão. Dê ao botão o aspecto ativo. Você pode usar data-toggle A propriedade habilita a troca automática do botão. | $().button('toggle') |
.button('loading') | Quando estiver carregando, o botão está desativado e o texto torna-se o texto do elemento button. data-loading-text O valor da propriedade. | $().button('loading') |
.button('reset') | 重置按钮状态,文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时,该方法非常有用。 | $().button('reset') |
.button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法,重置按钮状态,并添加新的内容。 | $().button(string) |
下面的示例演示了上面方法的用法:
Bootstrap 示例 - 按钮(Button)插件方法 点击每个按钮查看方法效果
演示 .button('toggle') 方法
</div>演示 .button('loading') 方法