Bootstrap Botón
Descripción
El complemento JavaScript de Botón de Bootstrap le permite mejorar la funcionalidad de los botones. Puede controlar el estado de los botones y también crear grupos de botones para componentes, como barras de herramientas.
Qué es necesario
Debe hacer referencia a los dos archivos JavaScript: jquery.js y bootstrap-button.js. Ambos se encuentran en la carpeta docs/assets/js.
Cómo usarlo
Puede usar este complemento solo mediante marcas sin escribir ningún JavaScript, o puede habilitar los botones mediante JavaScript.
Ejemplo
El primer ejemplo demuestra cómo usar el complemento de botones sin JavaScript.
Ejemplo
<div class="row">
<div class="span8">
<h2>Ejemplo del complemento JavaScript de botones de Bootstrap</h2>
<h3>Control del estado</h3>
<p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
<h3>Conmutación individual</h3>
<p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
<h3>Casilla de verificación</h3>
<p><div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
<h3>Botones de opción</h3>
<p><div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
</div>
</div>
</div>
<!--Except 'Control state', other buttons require only jquery.js and bootstrap-button.js JavaScript files-->
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js.html"></script>
Ver ejemplo en línea
Habilitar botones mediante JavaScript
Para habilitar los botones mediante JavaScript, use el siguiente código JavaScript, donde '.nav-tabs' es la clase del div que contiene los botones.
$('.nav-tabs').button()
Métodos
Este complemento tiene algunos métodos. Ahora los discutiremos mediante código de uso.
$().button('toggle')
<button class="btn" data-toggle="button" >…</button>
Este método alterna el estado del botón. Otorga al botón el estado y la apariencia de activación. Use 'data-toggle="button"' para alternar automáticamente el botón al estado activado.
$().button('loading')
<button class="btn" data-loading-text="loading stuff..." >...</button>
Este método establece el estado del botón como "cargando": deshabilita el botón y cambia el contenido de texto a "cargando". Usando el atributo 'data-loading-text' puede definir el texto de carga en el elemento del botón.
Si usa el navegador Firefox, notará que el estado deshabilitado no se elimina automáticamente después de cargar la página; use 'autocomplete="off"' para evitar este problema.
$().button('reset')
Este método restablece el estado del botón y restaura el texto del botón a su valor original.
$().button(string)
<button class="btn" data-loading-text="loading stuff..." >...</button>
Este método restablece el estado del botón y restablece el texto del botón al valor proporcionado.
<button class="btn" data-complete-text="finished!" >...</button>
<script>
$('.btn').button('complete')
</script>
Haga clic aquí para descargar todos los archivos HTML, CSS, JS e imágenes utilizados en este tutorial.
Otras extensiones