Comment appliquer des styles d'amorçage à des éléments spécifiques sans sélecteurs parents manuels ?

Utilisation de styles CSS sur des éléments spécifiques

Lors de la transition des mises en page basées sur des tableaux vers CSS, vous devrez peut-être appliquer des styles CSS uniquement à des sections spécifiques de pages Web. Ceci peut être réalisé en encapsulant les éléments souhaités dans une classe désignée. Par exemple, vous pouvez envelopper un formulaire dans un div avec la classe "bootstrap" comme ceci :

<div>

Cependant, vous souhaitez que les autres formulaires de la page conservent leur style actuel. Existe-t-il un moyen plus simple d'y parvenir sans ajouter manuellement des sélecteurs parents à chaque règle CSS Bootstrap ?

Solution

Pour Bootstrap 3, l'utilisation de LESS simplifie le processus :

1. Téléchargez le code source Bootstrap et créez un fichier style.less comme suit :

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

2. Compilez le fichier LESS. Vous pouvez utiliser des outils de ligne de commande comme Node.js avec Less.js ou explorer les compilateurs GUI. Vous pouvez également installer LESS avec npm et compiler le fichier comme suit :

npm install -g less
lessc style.less style.css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!