Bootstrap (Parte 9): Botones

Redes sociales

Logo Bootstrap

En este artículo vas a conocer las capacidades de Bootrstrap en lo que respecta a la creación de botones.

Estilos de botones

Bootstrap proporciona siete estilos de botones distintos:

Para conseguir estos siete tipos de botones tienes que utilizar las siguientes clases:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

El siguiente ejemplo muestra el código para los diferentes estilos de botón:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap - Botones .:. Webdisenia</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>      
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Estas clases para botones puedes utilizarlas con los elementos HTML <a>, <button> o <input>.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <title><title>Bootstrap - Botones .:. Webdisenia</title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <a href="#" class="btn btn-info" role="button">Botón Link</a>
        <button type="button" class="btn btn-info">Botón Button</button>
        <input type="button" class="btn btn-info" value="Botón Input">
        <input type="submit" class="btn btn-info" value="Botón Submit">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


En el ejemplo colocamos “#” en el atributo href del vínculo, ya que no disponemos de una página a la que vincularlo, y no deseamos que se muestre un error 404 de “Página no encontrada”, en un caso real, evidentemente, en vez de “#” deberías teclear la URL del recurso al que deseas enlazar.

Tamaños de botón

Bootstrap dispone de cuatro tamaños para los botones: Grande (Larger), mediano (Medium), pequeño (Small) y muy pequeño (XSmall).

Las clase que definen estos cuatro tamaños son:

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Bootstrap - Botones .:. Webdisenia</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary btn-lg">Grande</button>
        <button type="button" class="btn btn-primary btn-md">Mediano</button>    
        <button type="button" class="btn btn-primary btn-sm">Pequeño</button>
        <button type="button" class="btn btn-primary btn-xs">Muy pequeño</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador


Botones a nivel de bloque

Un botón a nivel de bloque, es un botón cuya anchura ocupa todo el espacio del objeto que lo contiene.

Para crear un botón a nivel de bloque, debes de utilizar la clase .btn-block.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Bootstrap - Botones .:. Webdisenia</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h4><strong>Botones a nivel de bloque</strong></h4>
        <button type="button" class="btn btn-primary btn-block">Bot&oacute;n 1</button>
        <button type="button" class="btn btn-default btn-block">Bot&oacute;n 2</button>
        <h4><strong>Botones a nivel de bloque grandes</strong></h4>
        <button type="button" class="btn btn-primary btn-lg btn-block">Bot&oacute;n 1</button>
        <button type="button" class="btn btn-default btn-lg btn-block">Bot&oacute;n 2</button>
        <h4><strong>Botones a nivel de bloque peque&ntilde;os</strong></h4>
        <button type="button" class="btn btn-primary btn-sm btn-block">Bot&oacute;n 1</button>
        <button type="button" class="btn btn-default btn-sm btn-block">Bot&oacute;n 2</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador

Botones activos/inactivos

Un botón puede mostrarse por defecto como activo (presionado) o inactivo (en el que no se puede hacer clic). Para mostrar botones activos debes utilizar la clase .active y para mostrarlos inactivos, la clase .disabled.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Bootstrap - Botones .:. Webdisenia</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary">Bot&oacute;n normal</button>
        <button type="button" class="btn btn-primary active">Bot&oacute;n activo</button>
        <button type="button" class="btn btn-primary disabled">Bot&oacute;n inactivo</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.