css - icon - buttons bootstrap 4

Cambiar el tamaño de los botones en Twitter-Bootstrap

Question

Estoy desarrollando una aplicación web optimizada para dispositivos móviles que me gustaría presentar con una interfaz de usuario sencilla, incluyendo botones tan grandes que incluso Andre the Giant podría tocarlos con facilidad.

El problema es que no veo una forma simple de cambiar el tamaño explícitamente de los botones de arranque al establecer su ancho o alto en un porcentaje, número de píxeles, o simplemente hacer que llenen sus contenedores. ¿Existe alguna manera canónica de agrandar botones mucho más allá del uso de las clases ''btn btn-small'' o ''btn btn-large'', o se considera una mala práctica?

Answer 1

Bootstrap es un gran marco, pero no cubre todo. Lo sabe y usar su principio OOCSS debería extenderse a sus necesidades.

Si me estoy adaptando a los componentes de Bootstrap, generalmente creo un archivo bootstrap-extensions.css que contiene cualquier extensión de componentes base, como un botón extra grande.

Aquí hay una implementación de ejemplo de cómo una clase de extensión agrega una nueva familia de botones al marco. Este ejemplo también incluye un ejemplo de uso de .btn-block , que ya está incluido en el marco.

CSS:

/**
 * Extra large button extensions. Extends `.btn`.
 */
.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    }

Demostración: http://jsfiddle.net/Pspb9/

Answer 2

La respuesta de @ amustill se adapta fácilmente para Bootstrap 3.1.0 :

.btn-xl {
    padding: 18px 28px;
    font-size: 22px;
    border-radius: 8px;
}

jsFiddle : http://jsfiddle.net/Abdull/2rkkJ/

Con esta adaptación viene automáticamente :hover oscurecimiento por desplazamiento y :active ajuste de sombras :active .