Ajouter / Supprimer des classes à l'aide de requêtes multimédias
Ma question est comment peut-on conditionnellement ajouter ou supprimer des classes ou id d'une catégorie donnée à l'aide de css media queries seul? Dans l'exemple de code ci-dessous, par exemple, comment pourrais-je ajouter "Class_B" à l'ensemble de la div avec "Class_A" quand @media all and (max-width: 1000px) and (min-width: 700px)
?
<div class="Class_A"><div>
Mon cas: je suis en utilisant Twitter Bootstrap v3.2.0. J'ai un en-tête avec une série de boutons en elle de la sorte:
<button class="btn navbar-btn">FooA</button>
<button class="btn navbar-btn">FooB</button>
<button class="btn navbar-btn">FooC</button>
Lorsque l'écran saute de la moyenne (dm) pour les petits(sm), je voudrais ajouter la class "btn-sm" pour l'ensemble de ces éléments. Comment puis-je le faire plus efficacement/élégamment? (Je préfère ne pas utiliser de JS ou d'ajouter des bibliothèques supplémentaires si c'est possible)
Je me rends compte que je pouvais ajouter un arbitraire de la classe à tous ces boutons comme "btn-sm-dupliquer" et se contenter de définir quand le navigateur atteint une certaine spécification comme le code ci-dessous. Cependant, il semble laid pour créer un doublon de classe quand il est vraiment pas du nec... Pouvez-vous suggérer quelque chose?
@media all and (max-width: 1000px) and (min-width: 700px) {
btn-sm-duplicate{
::Copy/Paste all the attributes of btn-sm from bootstrap::
}
}
source d'informationauteur Afflatus | 2014-07-16
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas faire cela avec CSS seul. Une approche pourrait être de profiter de
extend
dans un CSS pré-processeur aime MOINS.MOINS exemple:
Une autre approche serait d'utiliser Javascript pour ajouter la classe en fonction de la taille de l'écran. Une bibliothèque comme Modernizr.mq c'est assez facile.