Casabalnca: bootstrap isoliert einsetzen

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ß

  1. 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

    --
    sumpsi - posui - obstruxi
  2. 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

    1. 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ß

      1. @@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

        --
        „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
        — Joachim Gauck über Impfgegner
        1. 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.

      2. 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...

    2. 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

      --
      sumpsi - posui - obstruxi