Este artigo compartilhará primeiro com você como usar grupos de botões . O conteúdo específico é o seguinte
1. Grupos de botões
1. Grupo de botão único
Use .btn-group para encapsular vários <buttons> com .btn
<div> <butto> 1 </botão> <butter> 2 </button> <butão> 3 </button> </div>
2. Vários grupos de botões
Coloque múltiplo <div> em <div>.
<div> <div> ... </div> <div> ... </div> </div> </div>
3. Grupo de botão vertical
Adicione .btn-group-vertical ao .btn-group.
<div> ... </div>
2.
exemplo
<div> <a data-toggle = "suspenso" href = "#"> Action <span> </span> </a> <ul> <!-Links de menu suspenso-> </ul> </liv>
1. Controle o tamanho
Use também .btn-large, .btn-small e .btn-mini para controlar o tamanho.
2. Botão de pull-down dividido
<div> <butto> Action </button> <button data-toggle = "suspenso"> <span> </span> </button> <ul> <!-Links de menu suspenso-> </ul> </div>
3. O menu que aparece para cima
<div> <butto> Dropup </button> <button data-toggle = "Dropdown"> <span> </span> </button> <ul> <!-Links de menu suspenso-> </ul> </div>
3. JavaScript
exemplo
Status de carregamento. Adicione o carregamento de dados-text = "Carregando ...".
Copie o código da seguinte
Status da mudança. Adicionar data-toggle = "Button".
Copie o código da seguinte
Caixa de seleção. Adicionar data-toggle = "Buttons-checkbox" após o grupo BTN.
<div data toggle = "botões-checkbox"> <button type = "button"> esquerda </button> <button type = "button"> middle </button> <button type = "button"> direita </button> </div>
Escolha única. Adicionar data-toggle = "Buttons-radio" após o grupo BTN.
<div data data-toggle = "botões-radio"> <button type = "button"> esquerda </button> <button type = "button"> middle </button> <button type = "button"> direita </button> </div>
uso
O código JavaScript aciona o status do interruptor.
$ (). Button ("alternância")
Você também pode adicionar o atributo Data-Toggle para acionar automaticamente.
<button type = "button" data-toggle = "button">… </button>
Use o código JavaScript para acionar o estado de carregamento e o botão exibe o valor especificado pela propriedade Text de carregamento de dados.
$ (). Button ("Carregando")
<button type = "button" Data-carregamento-text = "Carregando coisas ..."> ... </button>
NOTA: O Firefox manterá o botão inválido quando a página for carregada. A solução alternativa é aplicar o botão Aplicar AutoComplete = "OFF".
Use o código JavaScript para redefinir o status do botão.
$ (). Button ("Redefinir")
Redefina o status do botão e transforma o texto do botão no texto especificado. O exemplo completo no exemplo a seguir é apenas um exemplo e pode ser substituído.
<Button Data-complete-text = "Concluído!" > ... </button> <cript> $ ('. btn').O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.