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 h1
s normal formatieren, aber ich möchte selektiver festlegen, in welchen Bereichen ich die Twitter Bootstrap-Stile anwende.
twitter-bootstrap
less
Andrew
quelle
quelle
Antworten:
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:
Update: Für neuere Versionen von WENIGER gehen Sie wie folgt vor:
Eine ähnliche Frage wurde hier beantwortet.
quelle
@import
den 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 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)
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:
quelle
margin: 0;
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:
quelle
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.
Sie können das Element in einem Handler für das Ereignis 'hide.bs.modal' entfernen.
quelle
this.modalService.open('myModal', {container: '#modalgoeshere'})
Verwenden Sie die .less-Version der Dateien. Bestimmen Sie, welche weniger Dateien Sie benötigen, und verpacken Sie diese .less-Dateien mit:
Dies gibt Ihnen die Ausgabe von:
quelle
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
quelle
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,
$body
bevor der Hintergrund angezeigt wird:Die
$body
Unterkunft entscheidet, wo der Hintergrund hinzugefügt wird.quelle
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
quelle
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:
Seitenvorlage mit isoliertem Bootstrap 4 wird
quelle
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.
quelle
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
quelle
Erster Klon-Bootstrap von Github:
Installationsanforderungen:
Öffnen Sie scss / bootstrap.scss und fügen Sie Ihren Namespace hinzu:
Bootstrap kompilieren:
Öffnen
dist/css/bootstrap.css
und entfernen Sie den Namespace aus dem Taghtml
undbody
.Kopieren Sie anschließend den Inhalt des dist-Ordners in Ihr Projekt und schon sind Sie fertig.
Habe Spaß!
quelle