Wie kann ich ein div so verhalten, als wäre es auf einem anderen Gerät mit Bootstrap?
Ich versuche, eine Twitter-Bootstrap-Anwendung zu erstellen, die ein div anzeigt, das eine Anwendung in verschiedenen Gerätegrößen (Desktop, Tablet, Mobile) in unserem SPA mit Funktionen innerhalb und außerhalb der Kommunikation zeigt. Wenn Sie auf die angegebene Größe klicken, sollte die Größe des Div geändert werden. So:
Die Bootstrap-Breakpoints basieren auf Medienabfragen auf Fensterebene. Aber ich versuche, dies auf einem div zu machen. Wenn wir einen Container auf der div-Ebene angeben, werden die Gitter nicht vertikal gestapelt, als würden sie die Größe des Fensters ändern, sie würden nur schrumpfen.
Härteres Problem, dann klingt es zunächst so. :( Irgendwelche Ideen, wie man das umgehen kann?
Die einfachste Antwort ist ein iFrame, so dass die Fenstergröße des iFrames in der Größe geändert wird, wenn div die Größe und das Gitterstapel korrekt ändert, aber das ist nicht ideal, da die Funktionalität in unserem SPA von außen und innerhalb des div vorhanden ist.
Ich würde gerne eine bessere Lösung für den Umgang damit hören!
4 Antworten
Nun bootstrap hat unterschiedliche Spaltengrößen für divs. .col-xs- .col-sm- .col-md- .col-lg- XSmall und Small und Medium und Large. Dies sind Klassen für Ihr div.
Nun, Bootstrap ist nur CSS und ein bisschen js in LESS und SASS geschrieben, so dass Sie die LESS / SASS-Version der Bootstrap-Datei ändern und alle Medienabfragen durch einen Klassennamen ersetzen können. Der LESS-Präprozessor verfügt über eine Syntax, mit der Sie eine CSS-Deklaration verschachteln können, z. B. die folgende LESS-Deklaration:
%Vor%entspricht CSS:
%Vor%Nachdem Sie die Medienabfragen durch die CSS-Klasse ersetzt haben, benötigen Sie JavaScript, das die Klassen den Elementen hinzufügt, deren untergeordnete Elemente die Medienabfrage haben müssen, die Sie fälschen möchten.
Für zusätzliche Zuverlässigkeit, damit die Stile nicht auf die umgebende Seite auslaufen, möchten Sie möglicherweise CSS im Bereich verwenden, aber Browser-Unterstützung für bereichsspezifisches CSS ist in diesem Stadium eher erschreckend.
Nun, Sie können JQuery dafür verwenden, oder Sie können auch die Knockout-Bibliothek für die dynamische Bindung verwenden, die es ermöglicht, benutzerdefinierte Bindungen zu verwenden, um dies zu erreichen. Hier ist, was ich tun werde, ist mit Knockout Bindings
%Vor%- Ich lese den Wert von div tag mit id="devices", egal was es ist {desktop, tablet, mobile}, und kann von den Attributen, die in den benutzerdefinierten Bindings definiert sind, darauf zugreifen
-
Zweitens gelten einige Bedingungen, um die erforderlichen Aufgaben durchzuführen. wie
$ ("# mainDiv"). css ( wenden Sie Ihre CSS an );
für jede Bedingung. Wenden Sie an, was immer Sie möchten, um das div mit id="mainDiv" in CSS zu ändern.
Tags und Links html css twitter-bootstrap single-page-application