Este artículo compartirá primero con usted cómo usar grupos de botones . El contenido específico es el siguiente
1. Grupos de botones
1. Grupo de un solo botón
Use .BTN-Group para encapsular múltiples <botones> con .btn
<div> <botón> 1 </botón> <botón> 2 </botón> <botón> 3 </botón> </div>
2. Grupos de múltiples botones
Pon múltiples <div> en <iv>.
<Div> <Viv> ... </div> <div> ... </div> </div> </div>
3. Grupo de botones verticales
Agregue .BTN-GROUP-VERICAL A .BTN-GROUP.
<div> ... </div>
2. Botón desplegable (descenso del botón)
ejemplo
<div> <a data-toggle = "desplegable" href = "#"> Action <Span> </span> </a> <ul> <!-Enlaces de menú desplegable-> </ul> </div>
1. Controle el tamaño
También use .BTN-Large, .BTN-Small y .BTN-Mini para controlar el tamaño.
2. Botón desplegable dividido
<div> <botton> Action </Button> <Button Data-Toggle = "Dropdown"> <span> </span> </boton> <ul> <!-Enlaces de menú desplegable-> </ul> </div>
3. El menú que aparece hacia arriba
<div> <botton> Drowp </boton> <botón data data-toggle = "desplegable"> <span> </span> </button> <ul> <!-enlaces de menú desplegable-> </ul> </div>
3. JavaScript
ejemplo
Estado de carga. Agregue datos-carga-text = "Carga ...".
Copie el código de la siguiente manera: <button type = "botón" data-carga-text = "Carga ..."> Estado de carga </boton>
Estado de cambio. Agregue Data-Toggle = "Botón".
Copie el código de la siguiente manera: <button type = "botón" data-toggle = "botón"> toggle único </botón>
Casilla de verificación. Agregue Data-Toggle = "Botones-Checkbox" después del grupo BTN.
<div data-toggle = "buttons-checkbox"> <button type = "botón"> izquierda </botón> <botón type = "botón"> Middle </button> <botón type = "botón"> derecho </botón> </div>
Elección única. Agregue Data-Toggle = "Botones-Radio" después del grupo BTN.
<div data-toggle = "Buttons-Radio"> <Button type = "Button"> Left </Button> <Button type = "Button"> Middle </Button> <Button type = "Button"> Derecha </botón> </div>
uso
El código JavaScript desencadena el estado del conmutador.
$ (). Botón ("Toggle")
También puede agregar el atributo de toggle de datos a activar automáticamente.
<botón tipo = "botón" data-toggle = "botón"> ... </botón>
Use el código JavaScript para activar el estado de carga, y el botón muestra el valor especificado por la propiedad de texto de carga de datos.
$ (). Botón ("Carga")
<botón type = "botón" data-carging-text = "Carging Stuff ..."> ... </botón>
Nota: Firefox mantendrá el botón inválido cuando la página esté cargada. La solución es aplicar autocomplete = "apagado" en el botón.
Use el código JavaScript para restablecer el estado del botón.
$ (). Botón ("Restablecer")
Restablece el estado del botón y convierte el texto del botón en el texto especificado. El completo en el siguiente ejemplo es solo un ejemplo y se puede reemplazar.
<botón data-complete-text = "¡terminado!" > ... </boton> <script> $ ('. Btn'). Button ('Complete') </script>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.