Il peut parfois être utile d’encapsuler le CSS de Twitter Bootstrap pour par exemple éviter les conflits lorsque l’ont intègre Bootstrap dans un site existant. Cette opération permet en effet d’ajouter un namespace à tous les sélecteurs.
Exemple avec le namespace « bootstrap-styles »:
.bootstrap-styles textarea {
overflow: auto;
}
.bootstrap-styles optgroup {
font-weight: bold;
}
Pour encapsuler bootstrap, il faut compiler le fichier bootstrap.less à l’aide de Grunt.
Installation de Grunt
Installation de Node.js
sudo apt-add-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs
Installation de Git
sudo apt-get install git git-core
Clonage de bootstrap depuis github
git clone https://github.com/twbs/bootstrap.git
Installation de Grunt
sudo npm install -g grunt-cli cd bootstrap sudo npm install
Compilation
Editer le fichier bootstrap.less pour ajouter la classe bootstrap-styles autour de tous les imports:
cd less/ vim bootstrap.less
contenu de bootstrap.less
.bootstrap-styles {
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
[...]
// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";
}
Pour compiler le CSS et le Javascript:
grunt dist
Les fichiers compilés se trouveront ensuite dans le dossier dist.
Attention, même les sélecteurs html et body seront préfixés de .bootstrap-styles. Étant donné que les balises html et body sont rarement entourées de balises div dans le code source d’une page web, il faut donc supprimer ou modifier ces deux entrées dans le fichier bootstrap.css
Testé sous Ubuntu 14.04 serveur
sources:
