J’ai eu a créer une page avec Bootstrap dans un site n’utilisant pas Bootstrap
Bootstrap gérant l’apparence de toute la page, il fallait l’isoler dans une classe pour ne pas créer de conflits
Voici comment procéder :
- Télécharger la version compilée de Bootstrap
- Installer LESS
npm install -g less
- Créer un fichier prefix.less dans le dossier du css de Bootstrap
.bootstrap { @import (less) 'bootstrap.css'; } - Exécuter en ligne de commande
lessc --math=strict prefix.less bootstrap-prefixed.css
Vous aurez donc un fichier bootstrap-prefixed.css avec toutes les règles incluses dans une classe .bootstrap
- Il y a quelques corrections à apporter au début du fichier bootstrap-prefixed.css au niveau des règles appliquées à :root et body :
enlever .bootstrap de :root et remplacer.bootstrap body par .bootstrap
Et voilà, vous pouvez utiliser ce fichier pour avoir le style de Bootstrap dans un élément ayant la classe .bootstrap.
Cela pouvait surement se faire en sass et j’aurais préféré, Bootstrap utilisant Sass, mais je n’ai pas trouvé de méthode simple.
Sources :