Le CSS bootstrap est-il en conflit ?

Bootstrap est le framework CSS le plus populaire sur le Web. Cela facilite grandement la création de designs magnifiques et réactifs. Cependant, parfois, vous ne souhaitez pas utiliser Bootstrap sur l'ensemble de votre site Web et vous souhaitez uniquement utiliser une partie du CSS Bootstrap. Si vous ajoutez simplement le CSS Bootstrap directement à la tête, cela peut entrer en conflit avec d'autres CSS, entraînant des styles confus.

Si nous pouvions isoler le CSS Bootstrap dans une classe spécifique, le problème serait résolu ! Ajoutez simplement un nom de classe à tous les CSS Bootstrap en utilisant LESS.

LESS est un processeur CSS qui vous permet de modifier les variables avant de compiler en CSS. Cela vous permet de modifier une variable (par exemple la taille de police de base) et LESS ajustera automatiquement tous les styles qui en dépendent (par exemple la hauteur de ligne, les titres, etc.).

Ce qui suit montre comment utiliser LESS pour personnaliser le CSS bootstrap, puis utiliser la classe bootstrap-iso pour ajouter des préfixes à tous les styles Bootstrap.

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Étapes de traitement :

1. Importez le fichier CSS bootstrap dans la balise head

.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

Remplacez

par

<link rel="stylesheet" href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" />

2 Ensuite, enveloppez le code HTML dans un div avec la classe bootstrap-iso comme ceci :

<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

.

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!