redimensionner les boutons de réactivité dans le bootstrap

Je suis en utilisant bootstrap, et le CSS est sensible, de sorte qu'il évolue bien sur des appareils plus petits. Cependant, je voudrais boutons à trop rétrécir lorsque la fenêtre est plus petite (par exemple. sur mobile).

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

Essentiellement sur des appareils plus petits, la classe btn-xs devrait être ajouté à tous les boutons.

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

InformationsquelleAutor Patrick | 2013-11-12
  1. 33

    Vous pouvez utiliser CSS @media queries à l'échelle de l'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 réactive la taille du bouton

    InformationsquelleAutor Zim
  2. 2

    Expansion ZimSystem réponse.. 

    @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;
  }
}
    InformationsquelleAutor
  3. 2

    Voulais juste ajouter une autre alternative. Si vous êtes en utilisant Bootstrap MOINS vous pouvez également utiliser le mixin.

    Si vous regardez à l'intérieur de Bootstrap est MOINS dossier (bootstrap > less > mixins) vous verrez la buttons.less fichier. Si vous ouvrez que vous trouverez les .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 aurez besoin de passer certains paramètres. Il va de frein si l'on est absent 

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

    Voici un exemple de partir de l'existant Bootstrap MOINS variables:

        .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
            );
        }
    }
    InformationsquelleAutor Gene Parcellano