Tutoriales básicos de Bootstrap

Bootstrap Plugins

Imágenes de Bootstrap Formularios de Bootstrap

Botones de Bootstrap

Este capítulo explicará con ejemplos cómo usar los botones de Bootstrap. Cualquier elemento con la clase .btn Los elementos heredan el aspecto predeterminado del botón gris redondeado. Sin embargo, Bootstrap ofrece algunas opciones para definir el estilo de los botones, como se muestra en la tabla a continuación:

Los siguientes estilos se pueden usar en elementos <a>, <button> o <input>:

Clase	Descripción	ejemplo
.btn	Agregar estilo básico a los botones	Prueba
.btn-default	Predeterminado/Botón estándar	Prueba
.btn-primary	Estilo de botón original (no operado)	Prueba
.btn-success	Representa una acción exitosa	Prueba
.btn-info	Este estilo se puede usar para botones que deben mostrar información emergente	Prueba
.btn-warning	Representa un botón que requiere operar con cautela	Prueba
.btn-danger	Representa una operación de botón de acción peligrosa	Prueba
.btn-link	Hacer que el botón se vea como un enlace (aún mantiene el comportamiento del botón)	Prueba
.btn-lg	Crear un botón grande	Prueba
.btn-sm	Crear un botón pequeño	Prueba
.btn-xs	Crear un botón especialmente pequeño	Prueba
.btn-block	Botón de nivel bloqueante (se estira hasta el elemento padre100% de anchura)	Prueba
.active	El botón ha sido pulsado	Prueba
.disabled	Botón desactivado	Prueba

El siguiente ejemplo muestra todas las clases de botón anteriores:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　Opciones del botón/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--　Botón estándar　-->
<button type="button" class="btn btn-<button class="default">Botón predeterminado</button>/button>
<!--　Proporciona efectos visuales adicionales, identificando la acción original en un grupo de botones　-->
<button type="button" class="btn btn-<button class="primary">Botón original</button>/button>
<!--　Representa una acción exitosa o positiva　-->
<button type="button" class="btn btn-<button class="success">Botón de éxito</button>/button>
<!--　Botón de contexto de mensaje de advertencia de información　-->
<button type="button" class="btn btn-<button class="info">Botón de información</button>/button>
<!--　Representa una acción que debe tomarse con cautela　-->
<button type="button" class="btn btn-<button class="warning">Botón de advertencia</button>/button>
<!--　Representa una acción peligrosa o potencialmente negativa　-->
<button type="button" class="btn btn-<button class="danger">Botón peligroso</button>/button>
<!--　No se enfatiza que es un botón, parece un enlace, pero mantiene el comportamiento del botón　-->
<button type="button" class="btn btn-<button class="link">Botón de enlace</button>/button>
</body>
</html>

Prueba aquí ‹/›

el resultado se muestra a continuación:

Tamaño del botón

La siguiente tabla enumera las clases para obtener botones de diferentes tamaños:

Class	Descripción
.btn-lg	Esto hará que el botón se vea más grande.
.btn-sm	Esto hará que el botón se vea más pequeño.
.btn-xs	Esto hará que el botón se vea especialmente pequeño.
.btn-block	Esto creará un botón de nivel bloqueante que abarcará toda la anchura del elemento padre.

El siguiente ejemplo muestra todas las clases de botón anteriores:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　Tamaño del botón/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button type="button" class="btn btn-primary btn-lg">Botón original grande</button>/button>
　　　<button type="button" class="btn btn-default btn-lg">Botón grande</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary">Botón original de tamaño predeterminado</button>/button>
　　　<button type="button" class="btn btn-default">Botón de tamaño predeterminado</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-sm">Botón original pequeño</button>/button>
　　　<button type="button" class="btn btn-default btn-sm">Botón pequeño</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-xs">Botón original especialmente pequeño</button>/button>
　　　<button type="button" class="btn btn-default btn-xs">Botón especialmente pequeño</button>/button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-lg　btn-<button class="block">Botón original de nivel bloqueante</button>/button>
　　　<button type="button" class="btn btn-default btn-lg　btn-<button class="block">Botón de nivel bloqueante</button>/button>
</p>
</body>
</html>

Prueba aquí ‹/›

el resultado se muestra a continuación:

Estado del botón

Bootstrap proporciona clases para estados de botón como activo, desactivado, etc., que se explicarán a continuación en detalle.

Estado activo

El botón muestra un aspecto apretado cuando está activo (fondo oscuro, borde oscuro, sombra).

La siguiente tabla enumera las clases que activan los elementos de botón y enlace:

elemento	Class
elemento de botón	añadir .active La clase se aplica para mostrar que está activo.
elemento ancla	añadir .active La clase se aplica al botón <a> para mostrar que está activo.

el siguiente ejemplo demuestra esto:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　estado activado del botón</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
	<button type="button" class="btn btn-default btn-lg">botón predeterminado</button>
　　　	<button type="button" class="btn btn-default btn-lg active">botón activado</button>
</p>
<p>
　　　	<button type="button" class="btn btn-primary btn-lg">botón original</button>
　　　	<button type="button" class="btn btn-primary btn-lg active">botón original activado</button>
</p>
</body>
</html>

Prueba aquí ‹/›

el resultado se muestra a continuación:

estado inhabilitado

Cuando inhabilita un botón, su color se desvanece 50%， y pierde el degradado.

la siguiente tabla enumera las clases que permiten que los elementos de botón y ancla se presenten como inhabilitados:

elemento	Class
elemento de botón	añadir disabled atributo al botón <button>.
elemento ancla	añadir disabled class al botón <a>.

el siguiente ejemplo demuestra esto:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　estado inhabilitado del botón</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button type="button" class="btn btn-default btn-lg">botón predeterminado</button>
　　　<button type="button" class="btn btn-default btn-lg" disabled="disabled">botón inhabilitado</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-lg">botón original</button>
　　　<button type="button" class="btn btn-primary btn-lg" disabled="disabled">botón original inhabilitado</button>
</p>
<p>
　　　<a href="#" class="btn btn-default btn-lg" role="button">enlace</a>
　　　<a href="#" class="btn btn-default btn-lg disabled" role="button">enlace inhabilitado</a>
</p>
<p>
　　　<a href="#" class="btn btn-primary btn-lg" role="button">enlace original</a>
　　　<a href="#" class="btn btn-primary btn-lg disabled" role="button">enlace original inhabilitado</a>
</p>
</body>
</html>

Prueba aquí ‹/›

el resultado se muestra a continuación:

etiqueta de botón

puede usar la clase de botón en elementos <a>、<button> o <input>。Pero se recomienda usar la clase de botón en elementos <button> para evitar problemas de incompatibilidad entre navegadores.

el siguiente ejemplo demuestra esto:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　etiqueta de botón</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-default" href="#" role="button">enlace</a>
<button class="btn btn-default" type="submit">botón</button>
<input class="btn btn-default" type="button" value="ingresar">
<input class="btn btn-default" type="submit" value="enviar">
</body>
</html>

Prueba aquí ‹/›

el resultado se muestra a continuación:

grupo de botones

usar .btn directamente en div-group puede crear un grupo de botones:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　botón (Button) plugin opción de radio</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>grupo de botones</h2>
　　<p>.btn-group clase para crear un grupo de botones:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

usar .btn-group-lg|sm|xs para controlar el tamaño del grupo de botones:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　grupo de botones</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Grupo de botones Button　-　configurar el tamaño del botón</h2>
　　<p>Mediante .btn-group-*　clase para controlar el tamaño de los botones en el grupo de botones.</p>
　　<h2>botón grande:</h2>
　　<div class="btn-group btn-group-lg">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>tamaño predeterminado botón:</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>pequeño botón:</h2>
　　<div class="btn-group btn-group-sm">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
　　<h2>botones superpequeños:</h2>
　　<div class="btn-group btn-group-xs">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Si deseas configurar botones en vertical, puedes usar .btn-group-usar la clase .btn vertical

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　botones</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>grupo de botones verticales</h2>
　　<p>Si deseas configurar botones en vertical, puedes usar .btn-group-vertical" para configurar：</p>
　　<div class="btn-group-vertical">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

grupo de botones de tamaño ajustable

Se puede lograr a través de .btn-group-justificado" para configurar un grupo de botones de tamaño ajustable.

Los siguientes ejemplos utilizan la etiqueta <a> para mostrar:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　botones</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>grupo de botones ajustable</h2>
　　<p>Se puede lograr a través de .btn-group-justificado" para configurar un grupo de botones de tamaño ajustable.</p>
　　<div class="btn-group btn-group-justificado">
　　　　<a href="#" class="btn btn-primary">Apple</a>
　　　　<a href="#" class="btn btn-primary">Samsung</a>
　　　　<a href="#" class="btn btn-primary">Sony</a>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Nota: Si es el elemento <button>, necesitas usar .btn en la capa exterior:-usar la clase .btn para envolver:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　botones</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>grupo de botones ajustable</h2>
　　<div class="btn-group btn-group-justificado">
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

grupo de botones con menú desplegable integrado

Los botones dentro del grupo pueden configurarse para menús desplegables, como en el siguiente ejemplo:

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　botones</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>grupo de botones integrados</h2>
　　<p>Crear un menú desplegable con un grupo de botones integrados：</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Sony <span class="caret"></span></button>
　　　　　　<ul class="dropdown-menu" role="menu">
　　　　　　　　<li><a href="#">Tablet</a></li>
　　　　　　　　<li><a href="#">Smartphone</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

separador de botones

ejemplo en línea

ejemplo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap ejemplo　-　botones</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>separador de botones</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Sony</button>
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<ul class="dropdown-menu" role="menu">
　　　　　　<li><a href="#">Tablet</a></li>
　　　　　　<li><a href="#">Smartphone</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Imágenes de Bootstrap Formularios de Bootstrap