Combien d’espace de noms Twitter Bootstrap styles donc don ' conflit t

Question

Je veux utiliser Twitter Bootstrap, mais seulement sur des éléments spécifiques, donc j'ai besoin de trouver un moyen de faire précéder tous Twitter Bootstrap classes avec mon préfixe, ou utiliser le moins de mixin. Je ne suis pas connu avec ce, donc je ne comprends pas très bien comment faire. Voici un exemple de code HTML que je suis en train de style:

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

Dans cet exemple, Twitter Bootstrap serait normal de style à la fois h1s, mais je veux être plus sélectif sur les zones qui j'applique le Twitter Bootstrap styles.

Answer 1

Cela s’est avéré pour être plus facile que je pensais. Les deux moins et Sass soutenir l’espace de nommage (utilisant la même syntaxe même). Lorsque vous incluez les données d’amorçage, vous pouvez le faire dans un sélecteur à l’espace de noms il :

Une question semblable a répondu ici.

Answer 2

@Andrew grande réponse. Vous aurez également besoin de noter que bootstrap modifie les {} le corps, principalement pour ajouter des polices. Alors quand vous namespace via moins / SASS sortie de votre fichier css ressemble à ceci : (dans les 3 « bootstrap »)

mais évidemment il ne sera pas une balise de corps à l’intérieur de votre div, donc le contenu de votre « bootstrap » n’aura pas la police « bootstrap » (puisque toutes les données d’amorçage hérite des polices de parent)

Pour la difficulté, la réponse devrait être :

Answer 3

Ajout de qu'un espace de noms à CSS bootstrap cassera modale fonctionnalité que le bootstrap ajoute une classe de « modal-toile de fond » directement à l’organisme. Une solution consiste à déplacer cet élément après avoir ouvert le modal, par exemple :

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

Answer 4

Utilisez la version de la surconsommation des fichiers. Déterminer quels fichiers moins que vous avez besoin, puis envelopper ces fichiers surconsommation avec :

Cela vous donnera le résultat de :