bootstrap isoliert einsetzen

[Casabalnca]

Hallo,

ich arbeite gerade mit einem cms und baue Unterseiten/Templates, die durch das cms in eine Hauptseite hinzugefügt und angezeigt werden. An die Implementierung der Hauptseite/Rahmenseite komme ich nicht daran.

Ich möchte nun für eine diese Unterseitenseiten ein Element via bootsatrap.css realisieren, das nur für diese Sete gelten muss. Dazu muss ich aber bootsatrap.css in der Seite einbinden. Aber wenn ich das mache, wirkt sich dies auf das Ganze drumherum und die komplette Formatierung des Rahmens geht verloren. Gibt es nun eine Möglichkeit bottstrap.css durch:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

so in die Seite hinzuzufügen, ohne dabei dies eine Wirkung auf die Hauptseite hat?

Gruß

[Rolf B]

Hallo Casabalnca,

nein. CSS hat keinen Scope, du kannst nicht sagen, dass bestimmte Styles nur innerhalb eines bestimmten Elternelements gelten sollen.

Es gibt Ideen dazu, aber die setzen auch passend gebautes CSS voraus. Ein Stylesheet, das dafür gemacht ist, eine ganze Seite zu regieren (was prima zum Tippfehler bootsatrap passt), kannst Du nur in eine eigene Provinz (a.k.a. iframe) einsperren.

Versuche lieber, auf bootstrap zu verzichten und passe dein Layout in das existierende Stylesheet ein.

Rolf

[Felix Riesterer]

Liebe(r) Casabalnca,

so in die Seite hinzuzufügen, ohne dabei dies eine Wirkung auf die Hauptseite hat?

das geht in die Richtung von Namensräumen. Aber so weit muss man in Deinem Fall nicht gehen, sondern kann das mit entsprechenden Selektoren auch erreichen.

Die Idee ist diese: Ein Element mit einer entsprechenden ID (hier verwende ich bootstrapped) ist das Vorfahrenelement (oder von mir aus auch Container), innerhalb dessen gewisse Style-Regeln gelten. In CSS sieht das dann z.B: so aus:

#bootstrapped a {
  color: var(--himmelblassblau);
}

#bootstrapped table.wasweisichschon th {
  font-style: italic;
}

Es käme darauf an, dass die CSS-Datei mit den Bootstrap-Regeln entsprechende Selektoren hat (also in der Form mit #bootstrapped ...), die Deinen Namensraum abbilden. Dann kannst Du die Wirkung auf andere Seiten oder Seitenelemente vermeiden.

Liebe Grüße

Felix Riesterer

[Casablanca]

Hallo Felix,

danke für die Antwort. Ich komme aber gar nicht so weit. Soblad bootstrap eingebunden ist, ist die Formatierung des Rahmens hin. Ohne das Einbinden von bootstrap kann ich meine eigene Formatierung nicht umsetzen.

Ich möchte z.B. einen Spinner durch bootstrap realisieren, weil ich keine gif-Animation einsetzen kann. Allein diese Kleinigkeit gelingt mir nicht, ohne dass die gesamte Formatierung dadurch beeinflußt wird.

Gruß

[Gunnar Bittersmann]

@@Casablanca

Soblad bootstrap eingebunden ist, ist die Formatierung des Rahmens hin.

Der da wie formatiert ist?

IIRC verwendet Bootstrap ausschließlich Klassen zum Stylen. Ihr hab euren Elementen dieselben Klassennamen vergeben wie sie Bootstrap verwendet?

Ich möchte z.B. einen Spinner durch bootstrap realisieren

Dann kopier dir doch genau die Styles für diese Komponente aus Bootstrap raus; dann brauchst du nicht die ganze Bibliothek laden. (Dazu kuckst du natürlich nicht in die minifizierte CSS-Datei.)

Mit Spinner meinst du sowas hier?

😷 LLAP

[dedlfix]

Tach!

IIRC verwendet Bootstrap ausschließlich Klassen zum Stylen.

Nö, da ist auch ein allgemeiner Teil namens Reboot drin, der Element-Selektoren verwendet und ein paar grundlegende Dinge einstellt.

dedlfix.

[klawischnigg]

Hi there,

danke für die Antwort. Ich komme aber gar nicht so weit. Soblad bootstrap eingebunden ist, ist die Formatierung des Rahmens hin.

Das kann nur bedeuten, daß entweder bei der Einbindung ein Fehler passiert und daher nachfolgende Style-Anweisungen ignoriert werden oder aber ohnehin bereits etwas geladen wird, was ähnliche Selektoren-Bezeichnungen wie Bootstrap verwendet bzw. was durch Bootstrap überschrieben wird. Ändert sich das Verhalten je nachdem, wo resp. wann Du das bootstrap.css einbindest? (Also vor oder nach anderen Stylesheets?)

Ohne das Einbinden von bootstrap kann ich meine eigene Formatierung nicht umsetzen.

Wieso eigentlich? Im Prinzip ist Bootstrap für Formatierungen genauso überflüssig wie es jQuery für Javascript ist. Da wird ja keine einzige Fertigkeit hinzugefügt, die CSS nicht schon von Haus aus kann.

Ich möchte z.B. einen Spinner durch bootstrap realisieren, weil ich keine gif-Animation einsetzen kann.

Naja, wenn Dir das so wichtig ist, dann bau Dir den Spinner auf einer neutralen Seite und kopier' Dir die entsprechenden Anweisungen aus dem Dom-Inspektor (oder wie das halt bei Dir heisst) Deines Browsers...

[Rolf B]

Hallo Felix,

Es käme darauf an, dass die CSS-Datei mit den Bootstrap-Regeln entsprechende Selektoren hat

Ich kenne Bootstrap überhaupt nicht, aber bedeutet das nicht, dass man in sämtlichen Styles, die Bootstrap mitbringt, die Selektoren um #bootstrapped ergänzen muss? Das könnte in ein wenig Arbeit ausarten und updatefreundlich (bezüglich Updates von Bootstrap) ist es auch nicht. Oder gibt es eine Bootstrap-Version, die diese Selektor-Ergänzung mitbringt?

Rolf