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

106

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.

Andrew
quelle
Dies würde helfen, "Bootstrap CSS zu isolieren, um
Samuel Ev

Antworten:

131

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
quelle
Hey, ich versuche dem zu folgen, aber ich bin ein bisschen verwirrt. Ich arbeite mit Angular. Bei Verwendung von CDNs habe ich auf bootstrap.min.js, less.min.js und die Dateien bootstrap.min.css verwiesen. Ich bin mir jedoch nicht sicher, wo ich den Namespace in meiner Anwendung ausführen soll.
Batman
Danach funktioniert mein Modal nicht mehr so ​​wie es verwendet wird. Ist das zu erwarten?
Batman
2
@Batman Sie möchten kein CDN verwenden, da Sie Bootstrap im Wesentlichen so umschreiben, dass es ein Präfix enthält. Sie müssen einen Präprozessor wie SASS für @importden ursprünglichen Bootstrap verwenden. Ich hatte auch Probleme mit Modalen, ich denke, weil Bootstrap bestimmte Klassen auf das Body-Tag der obersten Ebene anwendet. Ich erinnere mich nicht, ob ich eine Lösung gefunden habe. Am Ende denke ich, dass ich meinen eigenen modalen Ersatz geschrieben habe.
Andrew
4
Dies funktioniert nicht mehr nach Version 3 ( hereswhatidid.com/2014/02/… )
Adamj
2
Kann jemand bitte erklären, wohin diese Importanweisung gehen soll? Sieht aus wie eine separate .less-Datei. Ich habe das getan und es in den Ordner ohne Bootstrap gelegt, aber es wird nicht mit Namespace kompiliert. Ich glaube, ich vermisse etwas
Fehays
35

@ 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';
}
Kevin
quelle
Sie haben vergessenmargin: 0;
Kolobok
1
Beachtung! Ich weiß nicht warum, aber an einigen Stellen weniger generiert CSS wie .my-Präfix .my-Präfix ..., so müssen Sie es auch suchen und ersetzen.
Kolobok
10

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;
}
Singularität
quelle
1
Vielen Dank. Es ist wirklich die beste Lösung.
Kolobok
Funktioniert perfekt !
Kévin Berthommier
8

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.

user3567343
quelle
Wenn Sie Angular mit ngbootstrap verwenden, können Sie das Modal in einem bestimmten Container öffnen. this.modalService.open('myModal', {container: '#modalgoeshere'})
Ena
3

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 { }
Scott Simpson
quelle
2

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%}
Gino
quelle
2

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.

thenickdude
quelle
2

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

eKelvin
quelle
1

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>
user3879851
quelle
0

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.

sneas
quelle
0

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;
}
Matthew Kirkley
quelle
0

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

Tobias Ernst
quelle