O plug-in de switch de bootstrap é um controle de botão de chave implementado para o Bootstrap, que pode suportar a personalização de dimensões, cores e outros atributos. Não há muitos botões do tipo comutadores usados em sites domésticos. Bootstrap é muito popular no exterior. Não sei se não gostamos ou é problemático e difícil usá -lo para sites. No entanto, esse botão de abertura é o mais amplamente utilizado em dispositivos móveis, como telefones celulares, e as características da tela o promovem para se desenvolver melhor.
Descrição da função:
Apresentando o uso simples de duas formas de Chekbox e Radio, há mais efeitos e funções para navegar demos, clique no botão para ligar/desligar de maneira deslizante.
Instruções para uso:
1. Introduzir arquivos CSS e JS
<link rel = "Stylesheet" href = "static/stylesheets/bootstrap-switch.css"/> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.minin.js" src = "static/js/bootstrap-switch.js"> </script>
2.html Conteúdo adicionado
<div data-on = "info" data-off = "success"> <input type = "caixa de seleção" verificado> </div> <div data-o-on = "success" data-off = "warning"> <input type = "caixa de seleção" checked> </div> <div data-o-o-"warning" Data-off = "Danger"> <input Type = "Check-off" type = "Caixa de seleção" verificada> </div>
1). A div é inteiramente destinada a adicionar estilos à caixa de seleção.
2). A entrada é muito simples, é um rótulo comum.
3) .Make-switch: Adicione o estilo CSS à caixa de seleção usando o plug-in.
4) .Data-on: estilo CSS quando está no estado.
5) .Data-off: O estilo CSS quando o estado off é.
3. Uso da caixa de rádio de rádio:
<Label para = "Option1111"> Opção 1 </crety> <div> <input id = "option11" type = "radio" name = "radio2" value = "option11"> </div> <etiqueta para = "opção12"> opção 2 </label> <div> <input id = "option12" type = "" "name =" Radio2 ") Para = "Opção13"> Opção 3 </elated> <div> <input id = "option13" type = "radio" name = "radio2" value = "opção13"> </div>
A caixa de rádio é usada da mesma maneira, porque uma das caixas de rádio primeiro deve ser alterada, portanto o código JS correspondente precisa ser adicionado;
<Cript> $ ('. Radio2').4. Iniciar
$ ("div [class = 'switch']"). cada (function () {$ this = $ (this); var oncolor = $ this.attr ("oncolor"); var offcolor = $ this.attr ("OffColor"); var ontext = $ $ this.attr ("LabelText");1). Obtenha todas as divisões de troca através do jQuery, obtendo assim suas propriedades Oncolor, Offcolor, etc.
2). Imediatamente depois, obtenha a entrada do elemento filho contido na div.
3). Carregue a entrada através do método BootstrapSwitch.
Dessa forma, podemos simplesmente alcançar o efeito do botão Switch que queremos.
Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
O exposto acima é sobre como usar o controle de botão (switch) de bootstrap, espero que seja útil para o aprendizado de todos.