Ridimensionamento dei pulsanti in Twitter-Bootstrap

Question

Sto sviluppando un'applicazione Web ottimizzata per i dispositivi mobili che mi piacerebbe presentare un'interfaccia utente semplice, compresi pulsanti così grandi che persino Andre the Giant potrebbe toccarli con facilità.

Il problema è che non vedo un modo semplice per ridimensionare esplicitamente i pulsanti di avvio impostando la loro larghezza o altezza su una percentuale, un numero di pixel o semplicemente facendoli riempire i loro contenitori. Esiste un modo canonico per allargare notevolmente i pulsanti al di fuori dell'utilizzo delle classi 'btn btn-small' o 'btn btn-large', o è considerata una cattiva pratica?

Answer 1

Bootstrap è un ottimo framework, ma non copre tutto. Sa che e usando il suo principio OOCSS dovrebbe essere esteso alle tue esigenze.

Se sto adattando i componenti Bootstrap, generalmente creo un file bootstrap-extensions.css che ospita qualsiasi estensione di componenti di base, ad esempio un pulsante extra large.

Ecco un esempio di implementazione di come una classe di estensione aggiunge una nuova famiglia di pulsanti al framework. Questo esempio include anche un esempio di utilizzo di .btn-block, che è già incluso nel framework.

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; 
    } 

Demo:http://jsfiddle.net/Pspb9/

Answer 2

@ risposta di amustill è facilmente adattato per Bootstrap 3.1.0:

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

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

Con questo adattamento venire automaticamente :hover oscuramento e :active ombra insetting.