web-dev-qa-db-fra.com

Comment créer un espace de noms sur Twitter Bootstrap pour éviter les conflits de styles

Je veux utiliser Twitter Bootstrap, mais uniquement sur des éléments spécifiques. Je dois donc 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, alors je ne comprends pas très bien comment faire cela. Voici un exemple du code HTML que j'essaie de styler:

<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 appliquerait un style normal aux deux h1s, mais je veux être plus sélectif quant aux zones sur lesquelles appliquer les styles Twitter Bootstrap.

twitter-bootstrapless
94
Andrew

Cela s'est avéré être plus facile que je pensais. Less et Sass prennent en charge l’espacement de noms (en utilisant la même syntaxe). Lorsque vous incluez bootstrap, vous pouvez le faire dans un sélecteur pour le nommer en espace de nom:

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

Update: Pour les nouvelles versions de LESS, voici comment procéder:

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

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

122
Andrew

@ Andrew excellente réponse. Vous voudrez également noter que bootstrap modifie le corps {}, principalement pour ajouter une police. Ainsi, lorsque vous l’espacerez en espace de noms via LESS/SASS, votre fichier css en sortie se présente comme suit: (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 évidemment il n'y aura pas de balise body dans votre div, donc votre contenu d'amorçage n'aura pas la police bootstrap (puisque tout bootstrap hérite de la police parent)

Pour résoudre ce problème, 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';
}
32
Kevin

En rassemblant les réponses de @Andrew, @Kevin et @ adamj (plus quelques autres styles), si vous incluez le texte suivant dans un fichier nommé "bootstrap-namespaced.less", vous pouvez simplement importer "bootstrap-namespaced.less" dans n'importe quel fichier moins 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;
}
9
Singularity

L'ajout d'un espace de noms à l'amorçage de CSS annulera la fonctionnalité modale car l'amorçage ajoute une classe 'modal-backdrop' directement au corps. Une solution de contournement consiste à déplacer cet élément après avoir ouvert le modal, par exemple:

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder);

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

7
user3567343

Utilisez la version .less des fichiers. Déterminez les fichiers de moins dont vous avez besoin, puis enveloppez ces fichiers .less avec:

.bootstrap-styles {

    h1 { }

}

Cela vous donnera la sortie de: 

.bootstrap-styles h1 { }
3
Scott Simpson

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

1
eKelvin

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 réparer le reste avec search et remplacer dans PHPstorm . Toutes les polices @ font-face sont hébergées sur maxcdn.

Exemple de première ligne

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

Namespacing rompt l'arborescence backdrop du plugin Modal, car elle est toujours ajoutée directement à la balise <body>, en contournant votre élément namespacing auquel les styles sont appliqués. 

Vous pouvez résoudre ce problème en changeant la référence du plugin en $body avant que l'arrière-plan ne soit affiché:

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

La propriété $body décide où le fond sera ajouté.

1
thenickdude

Comme une note supplémentaire pour tout le monde. Pour que les modaux fonctionnent avec un fond, vous pouvez simplement copier ces styles à partir de bootstrap3

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
0
Matthew Kirkley

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 Bootstrap sont entrées en collision avec des classes d'un autre framework. Voici comment ce projet a été créé https://github.com/sneas/bootstrap-sass-namespace . N'hésitez pas à utiliser.

0
sneas

La 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 envelopper votre HTML dans une div avec la classe bootstrapiso:

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

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

  </body>
</html>
0
user3879851