Changer le texte du bouton automatiquement lorsque l'écran est redimensionné avec Bootstrap 3

Considérer cette codes:

HTML

<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

@media only screen and (max-width: 767px) {
    button {
        content: '<i class="fa fa-plus"></i>';
    }
}

Si vous redimensionnez l'écran à l'horizontale, à un certain moment le texte obtiendrez sur le bouton.

Je veux savoir si c'est possible de changer le texte du bouton automatiquement lorsque l'horizontale de l'écran est redimensionné. Quelque chose comme "+ Ajouter un Nouvel Élément" seul le signal plus "+" dans de petits appareils.

Je suis un peu noob avec les media queries, donc je pense que je suis en manque de quelque chose ou de faire le mal.

Quelqu'un peut m'aider?

J'ai fait ce violon.

source d'informationauteur Lord_Dracon

6

Essayer ce travail de démonstration: JSFiddle.

Ajouter une classe pour le texte du bouton, réglez display:none lorsque la taille de l'écran est assez petit:
```
<button type="button" class="btn btn-default btn-md btn-block">
    <i class="fa fa-plus"></i>
    <span class="button-text">Add New Item</span>
</button>
```
Et CSS:
```
@media screen and (max-width: 300px) {
    .button-text {
        display: none;
    }
}
```
Suggestion: ne jamais mettre le DOM de la structure ou de l'information à l'intérieur de styles CSS. Il est difficile à maintenir.
14

Vous pouvez le faire sans ajouter des media queries CSS ou en utilisant le construit en responsive utilitaires au sein de Bootstrap:
```
<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i><span class="hidden-sm hidden-xs">Add New Item</span></button>
</div>
```
Il ajoute un peu plus de balisage HTML, mais les données supplémentaires sont soit d'aller dans le code HTML, ou dans le CSS, donc, selon ce qui convient le mieux pour vous.
3

Si vous utiliser Bootstrap, alors c'est aussi simple que de se faufiler dans les deux classes.

hidden-sm et hidden-xs cacher l'élément lors de la largeur de l'écran est moyenne ou petite, respectivement.

Si simplement, vous souhaitez être masqué lorsque l'écran est petit, il suffit d'appliquer ces classes!

Exemple:
```
<button class="btn btn-primary">
    <span class="glyphicon glyphicon-person"></span>
    <span class="hidden-xs hidden-sm">Profile</span>
</button>
```
2

Il vous suffit de créer une autre requête de média (à l'endroit où vous pensez que le texte devrait changer), et de cacher le texte à l'intérieur du bouton. Au lieu de placer le bouton où il est maintenant, l'encapsuler dans un <span>puis d'écrire un peu de CSS pour définir display à none une fois que la page est en train de devenir plus petit que x pixels.

HTML
```
<div class="col-xs-3 col-sm-3">
  <button type="button" class="btn btn-default btn-md btn-block">
  <i class="fa fa-plus"></i><span>Add New Item</span></button>
</div>
```
CSS
```
@media only screen and (max-width: <change this value>) {
    button span {
        display: none;
    }
}
```
Cependant, je pense que cela devrait être résolu avec jQuery car il n'y a aucune garantie que cela va fonctionner que si vous placez le bouton à d'autres endroits. Vous devriez essayer de voir si le contenu du bouton est plus large que le bouton de largeur de lui-même, puis ajouter un "invisible" de la classe en conséquence

J'ai modifié votre jsfiddle un peu, cependant, jQuery semble être un peu buggé sur celui-ci (essayez d'imprimer les valeurs que j'utilise dans la fonction)

https://jsfiddle.net/ogt84jds/1/

J'ai fait du violon affichage et masquage de 2 différents boutons qui est peut-être pas le meilleur moyen, mais bon, il fonctionne.

http://jsfiddle.net/xo9xkv05/

HTML

<div class="less">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button>
</div>
<div class="more">
  <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button>
</div>

CSS

.less {
    display:none;
}
@media (max-width: 300px) {
    .less {
        display:block;
    }
    .more {
        display:none;
    }
}

Vous devez vous connecter pour publier un commentaire.