Je fais une application dans laquelle j'aimerais masquer le texte du bouton afin de sauvegarder un espace précieux en "mode de téléphone". Tous les boutons ont des icônes, de sorte que cela devrait suffire.
J'aimerais avoir une solution pure CSS, mais je ne peux pas venir avec quoi que ce soit.
Voici à quoi ressemble un bouton: < / p> J'aimerais ajouter que cela pourrait également être un: de manière aussi fondamentale, si le mode de réactivité est le téléphone , tout le texte à l'intérieur du sélecteur .btn doit être caché. Mais l'icône doit rester. J'ai essayé text-id_ / code>, mais qui cache également l'icône.
5 Réponses :
est-ce ce que vous voulez?
<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
<i class="icon-save icon-white"></i>
<span class="hidden-phone">Save</span>
</button>
J'utiliserais la classe Bootstrap Twitter intégrée .Chésté-téléphone Code>. <button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
<i class="icon-save"></i> <span class="hidden-phone">Save</span>
</button>
Est-ce que ce W3C est valide pour aussi? Si c'est le cas, ce serait parfait.
Oui, vous pouvez mettre des balises de span à l'intérieur d'une balise
in bootstrap 3 The Cache-téléphone La classe était modifié sur caché-xs . Question de fait, caché - peut maintenant être utilisé avec d'autres préfixes de taille de périphérique tels que lg , sm etc ...
Vous pouvez écrire une simple règle CSS comme ceci: , puis
pour bootstrap 4 Vous pouvez utiliser Propriété d'affichage . En tant que telle, les classes sont nommées à l'aide du format: afin que votre code devrait ressembler à ceci: Le texte disparaîtra pour Écrans extra petits (XS): 