Wie man Twitter Bootstrap benennt, damit Stile nicht in Konflikt geraten

Ich möchte Twitter Bootstrap verwenden, aber nur für bestimmte Elemente. Daher muss ich herausfinden, wie ich allen Twitter Bootstrap-Klassen mein Präfix voranstellen oder weniger Mixins verwenden kann. Ich habe noch keine Erfahrung damit, daher verstehe ich nicht ganz, wie das geht. Hier ist ein Beispiel für den HTML-Code, den ich zu stylen versuche:

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

In diesem Beispiel würde Twitter Bootstrap beide h1s normal formatieren, aber ich möchte selektiver festlegen, in welchen Bereichen ich die Twitter Bootstrap-Stile anwende.

Das stellte sich als einfacher heraus als ich dachte. Sowohl Less als auch Sass unterstützen den Namespace (sogar mit derselben Syntax). Wenn Sie Bootstrap einschließen, können Sie dies in einem Selektor tun, um einen Namespace zu erstellen:

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

Update: Für neuere Versionen von WENIGER gehen Sie wie folgt vor:

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

Eine ähnliche Frage wurde hier beantwortet.

@ Andrew tolle Antwort. Sie sollten auch beachten, dass Bootstrap den Body {} ändert, hauptsächlich um Schriftarten hinzuzufügen. Wenn Sie den Namespace über LESS / SASS verwenden, sieht Ihre Ausgabe-CSS-Datei folgendermaßen aus: (in 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;
}

Aber offensichtlich gibt es in Ihrem div kein Body-Tag, sodass Ihr Bootstrap-Inhalt nicht die Bootstrap-Schriftart hat (da alle Bootstrap-Schriftarten vom übergeordneten Element erben).

Um dies zu beheben, sollte die Antwort lauten:

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

    @import 'bootstrap';
}

Wenn Sie die Antworten von @Andrew, @Kevin und @ adamj zusammenstellen (plus einige andere Stile) und Folgendes in eine Datei mit dem Namen "bootstrap-namespaced.less" aufnehmen, können Sie einfach 'bootstrap-namespaced.less' in eine andere Datei importieren Datei:

// 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;
}

Durch Hinzufügen eines Namespace zu Bootstrap-CSS wird die Modalfunktionalität unterbrochen, da der Bootstrap dem Body eine 'Modal-Backdrop'-Klasse direkt hinzufügt. Eine Problemumgehung besteht darin, dieses Element nach dem Öffnen des Modals zu verschieben, z.

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

Sie können das Element in einem Handler für das Ereignis 'hide.bs.modal' entfernen.

Verwenden Sie die .less-Version der Dateien. Bestimmen Sie, welche weniger Dateien Sie benötigen, und verpacken Sie diese .less-Dateien mit:

.bootstrap-styles {

    h1 { }

}

Dies gibt Ihnen die Ausgabe von:

.bootstrap-styles h1 { }

Ich habe eine GIST mit Bootstrap 3 in einer Klasse namens .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e erstellt

Ich habe mit diesem Tool begonnen: http://www.css-prefix.com/ Und den Rest mit Suchen und Ersetzen in PHPstorm behoben. Alle fonts @ font-face werden auf maxcdn gehostet.

Beispiel für die erste Zeile

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

Namespacing unterbricht das Hintergrund-Div des Modal-Plugins, da dieses immer direkt zum <body> -Tag hinzugefügt wird, wobei Ihr Namespace-Element umgangen wird, auf das die Stile angewendet wurden.

Sie können dies beheben, indem Sie den Verweis des Plugins auf ändern, $bodybevor der Hintergrund angezeigt wird:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

Die $bodyUnterkunft entscheidet, wo der Hintergrund hinzugefügt wird.

Um alle Schritte, über die Andrew sprach, für diejenigen, die nicht wissen, was weniger ist, besser zu erklären. Hier ist ein Link, der ziemlich gut erklärt, wie es Schritt für Schritt gemacht wird. So isolieren Sie Bootstrap oder andere CSS-Bibliotheken

Einfachste Lösung: Verwenden Sie benutzerdefinierte, isolierte CSS-Klassen für Bootstrap.

Zum Beispiel für Bootstrap 4.1 Dateien aus dem Verzeichnis css4.1 herunterladen -

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

und verpacken Sie Ihren HTML-Code mit der Klasse bootstrapiso in ein div:

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

Seitenvorlage mit isoliertem Bootstrap 4 wird

<!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>

Ich hatte das gleiche Problem und die gleiche Methode, die von @Andrew vorgeschlagen wurde, was in meinem speziellen Fall leider nicht geholfen hat. Bootstrap-Klassen kollidierten mit Klassen aus einem anderen Framework. Auf diese Weise wurde dieses Projekt unter https://github.com/sneas/bootstrap-sass-namespace gestartet . Fühlen Sie sich frei zu benutzen.

Als weitere Anmerkung für alle. Um Modalitäten mit einem Hintergrund zum Laufen zu bringen, können Sie diese Stile einfach von bootstrap3 kopieren

.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;
}

Erster Klon-Bootstrap von Github:

git clone https://github.com/twbs/bootstrap.git

Installationsanforderungen:

npm install

Öffnen Sie scss / bootstrap.scss und fügen Sie Ihren Namespace hinzu:

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

Bootstrap kompilieren:

npm run dist

Öffnen dist/css/bootstrap.cssund entfernen Sie den Namespace aus dem Tag htmlund body.

Kopieren Sie anschließend den Inhalt des dist-Ordners in Ihr Projekt und schon sind Sie fertig.

Habe Spaß!