Bootstrap Botones

Objetivo

Los botones se utilizan ampliamente en sitios web o aplicaciones. En este tutorial, mediante ejemplos y explicaciones de ejemplos, discutiremos cómo usar los botones de Bootstrap 3 y cómo personalizar los botones predeterminados.

Usar botones predeterminados

El siguiente ejemplo demostrará cómo crear botones rápidamente con Bootstrap 3.

El código anterior produce lo siguiente. Puedehacer clic aquí para ver el ejemplo en línea。

CSS

Exploremos las reglas CSS utilizadas para crear estos botones. La clase principal para crear botones esbtn, como se muestra a continuación.

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

Debido al código CSS anterior, el botón (con la clase btn) se muestra como inline-block, lo que permite que el botón se muestre en línea con los elementos adyacentes que comparten su línea base, pero puede agregarle los atributos width y height. Su relleno superior e inferior son de 6 y 12 píxeles respectivamente. El margen inferior se establece en 0.

El tamaño de fuente se establece en 14 píxeles y el grosor de la fuente en normal. La altura de línea del botón con la clase btn es 1.428571429, ligeramente mayor que la altura predeterminada 1. El texto está alineado al centro.

La propiedad white-space se establece en nowrap, por lo que las nuevas líneas, espacios y tabulaciones se colapsarán. Los elementos verticalmente centrados se posicionarán en la mitad de la altura. Cuando pasa el cursor sobre el elemento, el cursor se mostrará como un puntero. Aquí no se mostrarán imágenes de fondo.

Aquí se mostrará un borde sólido transparente de 1 píxel de grosor. Debido aborder-radius: 4px;, las esquinas del botón serán redondeadas. Aumentando o disminuyendo el valor de 4px, puede hacer que el redondeo de las esquinas sea mayor o menor. Debido auser-select: none, el texto del botón y sus elementos secundarios no será seleccionable. Para obtener consistencia entre navegadores, la misma propiedad se aplica con prefijos de varios proveedores.

Cada botón mostrado en el ejemplo anterior, además debtntiene otra clase CSS, como btn-default, btn-primary, etc. Estas clases se utilizan para establecer lacolor、background-coloryborderpropiedad. Son reglas CSS para botones normales y botones con estados de enlace (es decir, hover, active, focus, etc.).

btn-primaryEl código de la clase es el siguiente

.btn-primary {
  color: #FFFFFF;
  background-color: #428BCA;
  border-color: #357EBD;
}

Botones de diferentes tamaños

Aquí hay tres tamaños que se pueden configurar. Para configurar cada tamaño, se debe agregar una clase adicional.

btn-lg for setting large button.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

El código CSS de la clase btn-lg es el siguiente

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Usarbtn-smybtn-xspara configurar botones con diferentes tamaños.

<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-primary btn-xs">Large button</button>

El código CSS de las clases btn-sm y btn-xs es el siguiente

.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-xs {
  padding: 1px 5px;
}

El siguiente código demuestra diferentes tipos de botones con diferentes tamaños. Puedehacer clic aquí para ver la demostración en línea. A continuación se muestran la captura de pantalla y el código.

Botones de bloque

Para usar todo el ancho del contenedor donde se encuentra el botón, Bootstrap 3 proporciona la opción de botones de bloque. Debe agregarbtn-blockla class a las class mencionadas anteriormente para crear botones de bloque.

<button type="button" class="btn btn-primary btn-lg btn-block">Large button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Large button</button>  

La definición CSS para crear botones de bloque es la siguiente

.btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

A continuación se muestran la captura de pantalla y el código de los botones de bloque. Puedehacer clic aquí para ver el ejemplo en línea.。

Botones activos

Puede usaractivela CSS class para dar una apariencia diferente a botones o enlaces, para mostrar que están activos. Aquí tiene unejemplo de demostración, captura de pantalla y código.

Usando las herramientas de desarrollador de Chrome, veremos que cuando al botón se le añadeactiveclass, las reglas CSS entran en vigor.

Botón activo Default

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #EBEBEB;
border-color: #ADADAD;
}

Botón activo Primary

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276B1;
border-color: #285E8E;
}

Botón activo Success

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #fff;
background-color: #4877A6;
border-color: #4877A6;
}

Botón activo Info

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #fff;
background-color: #39B3D7;
border-color: #269ABC;
}

Botón activo Warning

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
color: #fff;
background-color: #ED9C28;
border-color: #D58512;
}

Botón activo Danger

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
color: #fff;
background-color: #D2322D;
border-color: #AC2925;
}

Botón activo Link

.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
border-color: transparent;
}

Por lo tanto, puede ver que estos se logran cambiando las propiedades color, backgound-color y border-color.

Botones deshabilitados

Puede usardisabledla clase CSS para dar a los botones o enlaces una apariencia diferente, para mostrar que están deshabilitados. Aquí hay unademostración de ejemplo, captura de pantalla y código.

Para que el botón se vea algo atenuado, use las siguientes reglas CSS (ubicadas a través de las herramientas de desarrollador de Chrome).

.btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}

Elementos de anclaje deshabilitados

Cuando un elemento de ancla con class btn y otras clases relacionadas se muestra como deshabilitado, es un poco diferente a lo normal. Primero, el enlace del elemento de ancla todavía existe; solo cambian la apariencia y la sensación. Además, no puede usarlos en la barra de navegación.

Haga clic aquí para ver la demostración en línea. El código es el siguiente:

Tenga en cuenta que,role="button"se usa con fines de facilidad de uso.

Etiquetas de botón

Puede usar las clases de botón a través de los elementos button, a e input para tratar los botones como etiquetas. Sin embargo, se recomienda usarlos generalmente a través del elemento button; de lo contrario, causará problemas de inconsistencia entre navegadores.

El siguiente ejemplo demuestra cómo usar etiquetas de botones.

Haga clic aquí para ver la demostración en línea.

Botones personalizados

Ahora comenzaremos a personalizar con el botón predeterminado, dándole una apariencia y sensación completamente diferentes.

Comenzaremos con el siguiente código de botón.

<button type="button" class="btn btn-default">Default</button>

Ahora vamos a crear una clase CSS.btn-w3r, y usarla para reemplazar btn-default. Por lo tanto, escribiremos el siguiente código para reemplazar el código anterior.

<button type="button" class="btn btn-w3r">Default</button>

Primero cambiaremos el color de fondo, agregando el siguiente CSS.

.btn-w3r {
    background: #CB60B3; /* Old browsers */
    background: -moz-linear-gradient(top,  #CB60B3 0%, #AD1283 50%, #DE47AC 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CB60B3), color-stop(50%,#AD1283), color-stop(100%,#DE47AC)); /   *   Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CB60B3', endColorstr='#DE47AC',GradientType=0 ); /* IE6-9 */
    }

Ahora el botón se ve así.

Para cambiar el color de la fuente, agregaremosbtn-w3rel siguiente CSS después del código CSS de la clase existente.

color:#fff;

Ahora, para que la forma del botón se vea circular, agregaremosbtn-w3rel siguiente CSS antes del código CSS de la clase existente.

width: 200px;
    height: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;

Para agregar un efecto de hover, agregaremos el siguiente código CSS.

.btn-w3r:hover {
    background: #333; 
    color:#E75616;
    }

A continuación se muestra el efecto de hover del botón después de agregar el código CSS anterior.

Puedehacer clic aquí para ver la demostración en línea de los botones personalizados que creamos.。