Comment nommer Twitter Bootstrap pour que les styles ne soient pas en conflit

Je veux utiliser Twitter Bootstrap, mais seulement sur des éléments spécifiques, donc je dois trouver un moyen de préfixer toutes les classes Twitter Bootstrap avec mon préfixe, ou d’utiliser le moins de mixins. Je ne suis pas encore familiarisé avec cela, donc je ne comprends pas très bien comment faire cela. Voici un exemple du code HTML que je tente de mettre en forme:

dont style this with bootstrap

use bootstrap

Dans cet exemple, Twitter Bootstrap aurait un style normal pour les deux h1 , mais je veux être plus sélectif quant aux domaines auxquels j’applique les styles Twitter Bootstrap.

Cela s’est avéré plus facile que je pensais. Less et Sass supportent tous les deux l’espace de noms (en utilisant la même syntaxe). Lorsque vous incluez bootstrap, vous pouvez le faire dans un sélecteur à l’espace de nommage:

 .bootstrap-styles { @import 'bootstrap'; } 

Mise à jour: Pour les nouvelles versions de LESS, voici comment procéder:

 .bootstrap-styles { @import (less) url("bootstrap.css"); } 

Une question similaire a été répondue ici.

@Andrew excellente réponse. Vous voudrez également noter que bootstrap modifie le corps {}, principalement pour append de la police. Donc, lorsque vous le nommez via LESS / SASS, votre fichier CSS de sortie ressemble à ceci: (dans bootstrap 3)

 .bootstrap-styles body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: white; } 

mais de toute évidence il n’y aura pas de balise body à l’intérieur de votre div, donc votre contenu bootstrap n’aura pas la police bootstrap (puisque tous les bootstrap héritent de la police du parent)

Pour corriger, la réponse devrait être:

 .bootstrap-styles { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: white; @import 'bootstrap'; } 

En combinant les réponses de @Andrew, @Kevin et @ adamj (plus quelques autres styles), si vous incluez les éléments suivants dans un fichier nommé “bootstrap-namespaced.less”, vous pouvez simplement importer “bootstrap-namespaced.less” dans fichier:

 // bootstrap-namespaced.less // This less file is intended to be imported from other less files. // Example usage: // my-custom-namespace { // import 'bootstrap-namespaced.less'; // } // Import bootstrap.css (but treat it as a less file) to avoid problems // with the way Bootstrap is using the parent operator (&). @import (less) 'bootstrap.css'; // Manually include styles using selectors that will not work when namespaced. @import 'variables.less'; & { // From normalize.less // Previously inside "html {" // font-family: sans-serif; // Overridden below -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; // Previously inside "body {" margin: 0; // From scaffolding.less // Previously inside "html {" // font-size: 10px; // Overridden below -webkit-tap-highlight-color: rgba(0,0,0,0); // Previously inside "body {" font-family: @font-family-base; font-size: @font-size-base; line-height: @line-height-base; color: @text-color; background-color: @body-bg; } 

Ajouter un espace de nommage à bootstrap CSS va casser la fonctionnalité modale car le bootstrap ajoute une classe ‘modal-backdrop’ directement au corps. Une solution consiste à déplacer cet élément après l’ouverture du modal, par exemple:

 $('#myModal').modal(); var modalHolder = $('
'); $('body').append(modalHolder); $('.modal-backdrop').first().appendTo(modalHolder);

Vous pouvez supprimer l’élément dans un gestionnaire pour l’événement “hide.bs.modal”.

Utilisez la version .less des fichiers. Déterminez le nombre de fichiers requirejs, puis enveloppez ces fichiers .less avec:

 .bootstrap-styles { h1 { } } 

Cela vous donnera la sortie de:

 .bootstrap-styles h1 { } 

J’ai fait un GIST avec Bootstrap 3 dans une classe nommée .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

J’ai commencé avec cet outil: http://www.css-prefix.com/ Et corrige le rest avec la recherche et le remplacement dans PHPstorm. Toutes les fonts @ font-face sont hébergées sur maxcdn.

Premier exemple de ligne

 .bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} 

Namespacing interrompt le div de l’arrière-plan du plug-in Modal, car il est toujours ajouté directement à la balise , en contournant votre élément de nommage auquel les styles sont appliqués.

Vous pouvez résoudre ce problème en modifiant la référence du plugin à $body avant d’afficher la canvas de fond:

 myDialog.modal({ show: false }); myDialog.data("bs.modal").$body = $(myNamespacingElement); myDialog.modal("show"); 

La propriété $body détermine où la canvas de fond sera ajoutée.

Pour mieux expliquer toutes les étapes dont parlait Andrew pour ceux qui ne connaissent pas Less. Voici un lien qui explique assez bien comment cela se fait étape par étape Comment isoler Bootstrap ou d’autres bibliothèques CSS

J’ai fait face au même problème et la méthode proposée par @Andrew n’a malheureusement pas aidé dans mon cas particulier. Les classes de bootstrap entrent en collision avec les classes d’un autre framework. Voici comment ce projet a été lancé https://github.com/sneas/bootstrap-sass-namespace . N’hésitez pas à utiliser.

Solution la plus simple – commencez à utiliser des classes css isolées de génération personnalisée pour Bootstrap.

Par exemple, pour Bootstrap 4.1, téléchargez les fichiers du répertoire css4.1 –

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

et emballez votre HTML dans une div avec la classe bootstrapiso:

 

Le modèle de page avec bootstrap isolé 4 sera

        Page1