web-dev-qa-db-fra.com

Redimensionner les boutons dans Twitter-Bootstrap

Je suis en train de développer une application Web adaptée aux mobiles sur laquelle j'aimerais proposer une interface utilisateur extrêmement simple, y compris des boutons si grands que même André le Géant pourrait les exploiter facilement.

Le problème est que je ne vois aucun moyen simple de redimensionner explicitement les boutons bootstrap en définissant leur largeur ou leur hauteur sur un pourcentage, un nombre de pixels, ou simplement en les faisant remplir leurs conteneurs. Existe-t-il un moyen canonique d'agrandir considérablement les boutons en dehors de l'utilisation des classes "btn btn-small" ou "btn btn-large", ou est-ce considéré comme une mauvaise pratique?

csstwitter-bootstrapbutton
35
Chazu

Bootstrap est un excellent framework, mais il ne couvre pas tout. Il sait que l'utilisation de son principe OOCSS doit être étendue à vos besoins.

Si j'adapte Bootstrap composants eux-mêmes, je crée généralement un bootstrap-extensions.css fichier contenant toutes les extensions des composants de base, comme un bouton extra large.

Voici un exemple d'implémentation de la façon dont une classe d'extension ajoute une nouvelle famille de boutons au framework. Cet exemple inclut également un exemple d'utilisation de .btn-block, qui est déjà inclus dans le cadre.

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

Démo: http://jsfiddle.net/Pspb9/

61
amustill

La réponse de @ amustill est facilement adaptable pour Bootstrap 3.1.0 :

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

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

Avec cette adaptation viennent automatiquement :hover assombrissement et :active insertion de l'ombre.

24
Abdull