web-dev-qa-db-fra.com

redimensionner les boutons en réponse dans bootstrap

J'utilise bootstrap, et le CSS est réactif, il est donc bien réduit sur les plus petits appareils. Toutefois, je souhaiterais que les boutons soient également réduits lorsque la fenêtre d'affichage est plus petite (par exemple, sur mobile).

<button name="button" type="submit" id="edit_button-46" class="btn btn-default" value="edit" >Edit</button>

Sur les plus petits périphériques, la classe btn-xs devrait être ajoutée à tous les boutons.

Je peux probablement accomplir cela via Jquery, mais je me demandais si bootstrap avait déjà cette fonctionnalité?

twitter-bootstrapresponsive-designtwitter-bootstrap-3
19
Patrick

Vous pouvez utiliser les requêtes CSS @media pour redimensionner les boutons en conséquence.

@media (max-width: 768px) {
  .btn-responsive {
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .btn-responsive {
    padding:4px 9px;
    font-size:90%;
    line-height: 1.2;
  }
}

Démo: http://bootply.com/93706

Mise à jour pour Bootstrap 4:
Bootstrap 4 taille du bouton sensible

32
Zim

Je voulais juste ajouter une autre alternative. Si vous utilisez MOINS Bootstrap, vous pouvez également utiliser les mixins.

Si vous regardez dans le dossier LESS de Bootstrap (bootstrap > less > mixins) , vous verrez le fichierbuttons.less. Si vous ouvrez cela, vous trouverez la fonction.button-size()mixin.

Voici le mixin: 

.button-size(
    vertical padding;
    horizontal padding;
    font size;
    line height;
    border-radius
);

Voici comment créer dynamiquement un bouton:

Vous devrez passer certains paramètres. Il va freiner s'il en manque un 

.button-size(10px; 10px; 1em; 1.5em; 0);

Voici un exemple utilisant les variables Bootstrap LESS existantes:

    .btn {
        @media (min-width: @screen-sm-min) {
            .button-size(
                @padding-small-vertical;
                @padding-small-horizontal;
                @font-size-small;
                @line-height-base;
                @border-radius-small
            );
        }
        @media (min-width: @screen-md-min) {
            .button-size(
                @padding-large-vertical;
                @padding-large-horizontal;
                @font-size-large;
                @line-height-base;
                @border-radius-large
            );
        }
    }
2
Gene Parcellano

Développer la réponse ZimSystem .. 

@media (max-width: 768px) {
  .btn {
    font-size:11px;
    padding:4px 6px;
  }
}

@media (min-width: 768px) {
  .btn {
    font-size:12px;
    padding:6px 12px;
  }
}

@media (min-width: 992px) {
  .btn {
    font-size:14px;
    padding:8px 12px;
  }
}

@media (min-width: 1200px) {
  .btn {
    padding:10px 16px;
    font-size:18px;
  }
}
1
user2912589