Wir haben eine App mit einer einzelnen Seite, die eckig ist und verschiedene Funktionen enthält.
Eines dieser Features ist eine Drag & Drop-Schnittstelle für Codeschnipsel. Jedes dieser Snippets verfügt über eigene Stile, die separat vom Rest des Admin-Steuerfelds gestaltet sind.
Der Hauptteil der App ist mit einem Bootstrap-Design formatiert, aber die Drag & Drop-Snippets sind nicht und daher erben die Snippets beim Navigieren in den Drag & Drop-Bereich einige der Bootstrap-Stile.
Dies führt zu einer Vielzahl von Problemen im Hinblick auf das Styling und ich suche im Idealfall nach einer Lösung, ohne Iframes zu verwenden oder Bootstrap-Stile zu überschreiben. Im Idealfall würden wir den Bootstrap entladen und dann nur die neuen Styles laden, oder den neuen Content nicht Styles erben lassen.
Gibt es das überhaupt, um das zu erreichen, ohne die App neu zu laden oder einen iframe zu verwenden? Stylesheet wechseln oder neue Stile in die Seite einfügen und andere entfernen?
Ich kann mir zwei Optionen vorstellen:
Entfernen Sie das Stylesheet-Element
Bevor Sie Ihren problematischen Inhalt anzeigen, entfernen Sie das LINK-Element (es lohnt sich, es als Referenz für später beizubehalten.
Wenn Sie den Bootstrap-Stil zurückgeben möchten, können Sie ihn einfach neu anhängen.
%Vor% Überschreibe die Bootstrap-CSS-Regeln
Erstellen Sie eine Reihe von Regeln, die die Bootstrap-Regeln überschreiben und / oder zurücksetzen. Sie können sie unter einem übergeordneten Selektor verschachteln (z. B. .no-bootstrap ), so dass sie nur bestimmte Elemente betreffen.
Um die Dinge einfacher zu machen, können Sie Bootstraps vorkompilierten Quellcode (LESS oder SASS) erhalten und ihn bearbeiten, um ein Override-Stylesheet zu integrieren.
Bearbeiten: Tippfehler behoben
Ich gehe davon aus, dass Sie, da Sie eine Anwendung für eine einzelne Seite haben, Winkel-Routing verwenden, da es so eingerichtet werden kann, dass Sie routenabhängige Stylesheets haben. Sie können entweder Ihre Implementierung durchführen:
In der Kopfzeile der Seite würden Sie folgendes einfügen:
%Vor%In jeder Route in der .when fügen Sie hinzu:
%Vor%Oder Sie könnten in Winkelrouten-Stile oder hier , dass ich glaube, dass setup, um das gleiche zu tun, aber fügt die Funktionalität zu $ routeProvider und bietet eine Möglichkeit, mehrere CSS-Partials zu der Route hinzuzufügen. Ich denke, dies ist ein mehr eckiger Ansatz und fühlt sich an, als ob diese Funktionalität in die kantige Basis einbezogen werden sollte.
Tags und Links javascript angularjs css twitter-bootstrap single-page-application