Uso de botones en Bootstrap

28/Sep/2013 Bootstrap , 5 Comentarios

He visto muchas formas de acabar construyendo un botón dentro de una página web. Parece que ya desde hace tiempo se ha canalizado con el tema del elemento button. Y es por ello que cuando estemos trabajando con botones e Bootstrap, este no podía ser menos y nos permite configurarlos apoyándonos en dicho elemento.

Así que si queremos insertar botones en Bootstrap solo tenemos que usar el elemento button.

  1. <button type="button">Mi boton</button>

Vale, solo nos muestra un botón. Claro, y es que lo bueno del uso de botones en bootstrap es que podemos darle estilos. Para ello Bootstrap nos aporta las siguientes clases:

  • Botones por defecto, es un botón en Bootstrap normal y corriente.
  • Botones primarios, son los botones que nos sirven para indicar la acción principal del formulario. Bootstrap nos ofrece la clase btn btn-primary
  • Botones para acciones positivas, si lo que queremos es desencadenar una acción positiva podemos utilizar la clase tn btn-success
  • Botones informacionales, para mensajes de información hacía el usuario, Bootstrap nos da la clase btn btn-info
  • Botones de aviso, si lo que queremos es sacarle un aviso al usuario utilizaremos la clase btn btn-warning
  • Botones de alarma, servirán para avisar de un error y la clase que lo representa para los botones es btn btn-danger

Así, si queremos insertar botones en Bootstrap tendremos el siguiente código fuente:

  1. <button type="button" class="btn btn-default">Default</button>
  2. <button type="button" class="btn btn-primary">Botón primario</button>
  3. <button type="button" class="btn btn-success">Acción Positiva</button>
  4. <button type="button" class="btn btn-info">Información</button>
  5. <button type="button" class="btn btn-warning">Aviso</button>
  6. <button type="button" class="btn btn-danger">Error</button>

Visualmente el efecto que tendrán estos botones será:
botones-bootstrap

5 comentarios en “Uso de botones en Bootstrap”

Víctor Cuervo

angeles de la trinidad

como puedo crear una barra de navegación en bootstrap con botones

Víctor Cuervo

Alfredo

hola me puedes ayudar con los botones de estado bueno lo que viene es así tengo una función de jQuery el cual al presionar el botón del formulario obtiene los valores del resultado y los envía por ajax el problema es que al principio mis usuario pensaban que no hacia nada mi aplicación web lo cual volvían a presionar el botón lo que ocurría doble inserción o fallo critico. volví a leer la documentación de bootstrap el cual en la sección de botones de estado me explico muy bien el problema que sigue sin hacerlo tengo la versión mas reciente de bootstrap, y por lo que leí ya no es soportado no se si me puedas ayudar con eso ya que mis conocimientos de jQuery.

Víctor Cuervo

facundo

Que tal estoy copiando ese codigo en la hoja HTML pero solo veo los botones no veo el formato es decir color tamaño y tipografia. que debo hacer o que estoy haciendo mal? Agradexco mucho la ayuda

Víctor Cuervo

Adrián

Saludos, Facundo, necesitas descargar el Framework de Bootstrap (http://getbootstrap.com/) y referenciarlo en tu código HTML… algo así:

Suerte !!!

Víctor Cuervo

Víctor Cuervo

Como te comenta Adrian debes de incluir el framework añadiendo en la cabecera de tu página:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Y al final del cuerpo:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*