Derzeit hat Twitter Bootstrap 3 die folgenden reaktionsfähigen Haltepunkte: 768px, 992px und 1200px, die kleine, mittlere und große Geräte darstellen.
Wie kann ich diese Haltepunkte mithilfe von JavaScript erkennen?
Ich möchte mit JavaScript auf alle verwandten Ereignisse warten, die ausgelöst werden, wenn sich der Bildschirm ändert. Und um erkennen zu können, ob der Bildschirm für kleine, mittlere oder große Geräte geeignet ist.
Ist schon etwas erledigt? Was sind deine Vorschläge?
javascript
twitter-bootstrap-3
dom-events
Rubens Mariuzzo
quelle
quelle
<div class="d-none d-?-block"></div>
sich die Sichtbarkeit ändert (fügen Sie den gewünschten Haltepunkt ein). Diese CSS-Klassen sind für Bootstrap 4 ... verwenden Sie alles, was in Bootstrap 3 funktioniert. Viel leistungsfähiger als das Abhören von Ereignissen zur Größenänderung von Fenstern.Antworten:
Bearbeiten: Diese Bibliothek ist jetzt über Bower und NPM verfügbar. Siehe Github Repo für Details.
AKTUALISIERTE ANTWORT:
Haftungsausschluss: Ich bin der Autor.
Hier sind einige Dinge, die Sie mit der neuesten Version (Responsive Bootstrap Toolkit 2.5.0) tun können:
Ab Version 2.3.0 benötigen Sie die vier
<div>
unten genannten Elemente nicht mehr.URSPRÜNGLICHE ANTWORT:
Ich glaube nicht, dass Sie dafür ein riesiges Skript oder eine Bibliothek brauchen. Es ist eine ziemlich einfache Aufgabe.
Fügen Sie kurz zuvor die folgenden Elemente ein
</body>
:Mit diesen 4 Divs können Sie nach dem aktuell aktiven Haltepunkt suchen. Verwenden Sie für eine einfache JS-Erkennung die folgende Funktion:
Um nun eine bestimmte Aktion nur an dem kleinsten Haltepunkt auszuführen, den Sie verwenden können:
Das Erkennen von Änderungen nach der DOM-Bereitschaft ist ebenfalls recht einfach. Alles, was Sie brauchen, ist ein leichtgewichtiger Listener zur Größenänderung von Fenstern wie dieser:
Sobald Sie damit ausgestattet sind, können Sie auf Änderungen warten und Haltepunkt-spezifische Funktionen wie folgt ausführen:
quelle
Wenn Sie keine spezifischen Bedürfnisse haben, können Sie dies einfach tun:
Bearbeiten: Ich verstehe nicht, warum Sie eine andere js-Bibliothek verwenden sollten, wenn Sie dies nur mit jQuery tun können, das bereits in Ihrem Bootstrap-Projekt enthalten ist.
quelle
$(window).bind('resize')
..., aber es gibt andere Ereignisse für die Ausrichtung des mobilen Bildschirms, die sich auf die Bildschirmgröße auswirken..on('resize')
Haben Sie sich Response.js angesehen? Es ist für solche Dinge konzipiert. Kombinieren Sie Response.band und Response.resize.
http://responsejs.com/
quelle
Sie können die Fenstergröße verwenden und die Haltepunkte fest codieren. Verwenden von Angular:
quelle
Erkennen Sie den reaktionsfähigen Haltepunkt von Twitter Bootstrap 4.1.x mithilfe von JavaScript
Das Bootstrap v.4.0.0 (und die neueste Version Bootstrap 4.1.x ) eingeführt , um die aktualisierten Rasteroptionen , so dass das alte Konzept auf der Erfassung nicht direkt angewandt werden kann (siehe die Migrationsanleitung ):
sm
Unten wurde Rasterebene768px
für eine genauere Steuerung . Wir haben jetztxs
,sm
,md
,lg
, undxl
;xs
Gitterklassen wurden so geändert, dass das Infix nicht erforderlich ist.Ich habe die kleine Dienstprogrammfunktion geschrieben, die aktualisierte Rasterklassennamen und eine neue Rasterebene berücksichtigt:
Ermitteln Sie mithilfe von JavaScript den reaktionsfähigen Haltepunkt von Bootstrap v4-beta
Das Bootstrap v4-alpha und Bootstrap v4-beta anderen Ansatz auf Grid - Stützpunkten hatten, also hier das Erbe Weg , um das gleiche zu erreichen:
Ich denke, es wäre nützlich, da es einfach in jedes Projekt zu integrieren ist. Es werden native responsive Anzeigeklassen des Bootstraps selbst verwendet.
quelle
Hier meine eigene einfache Lösung:
jQuery:
VanillaJS:
quelle
Die Verwendung dieses Ansatzes mit Response.js ist besser. Response.resize-Trigger in jedem Fenster ändern die Größe, wobei Crossover nur ausgelöst wird, wenn der Haltepunkt geändert wird
quelle
Bei manuellen Implementierungen wie der von @oozic erwähnten sollte es kein Problem geben.
Hier sind ein paar Bibliotheken, die Sie sich ansehen können:
Beachten Sie, dass diese Bibliotheken unabhängig von Bootstrap, Foundation usw. funktionieren. Sie können Ihre eigenen Haltepunkte konfigurieren und Spaß haben.
quelle
Möglicherweise möchten Sie dies Ihrem Bootstrap-Projekt hinzufügen, um den aktiven Haltepunkt visuell zu überprüfen
Hier ist die BOOTPLY
quelle
Aufbauend auf der Antwort von Maciej Gurban (was fantastisch ist ... wenn Ihnen das gefällt, stimmen Sie einfach seine Antwort ab). Wenn Sie einen Dienst zum Abfragen erstellen, können Sie den aktuell aktiven Dienst mit dem folgenden Setup zurückgeben. Dies könnte andere Haltepunkterkennungsbibliotheken vollständig ersetzen (wie enquire.js, wenn Sie einige Ereignisse eingeben). Beachten Sie, dass ich den DOM-Elementen einen Container mit einer ID hinzugefügt habe, um die DOM-Durchquerung zu beschleunigen.
HTML
COFFEESCRIPT (AngularJS, aber dies ist leicht konvertierbar)
JAVASCRIPT (AngularJS)
quelle
Anstatt $ (document) .width () zu verwenden, sollten Sie eine CSS-Regel festlegen, die Ihnen diese Informationen liefert.
Ich habe gerade einen Artikel geschrieben, um ihn genau zu verstehen. Sehen Sie es hier: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/
quelle
Warum nicht einfach jQuery verwenden, um die aktuelle CSS-Breite der Bootstrap-Containerklasse zu ermitteln?
dh ..
Sie können auch $ (window) .resize () verwenden, um zu verhindern, dass Ihr Layout das Bett "verschmutzt", wenn jemand die Größe des Browserfensters ändert.
quelle
Anstatt das Folgende mehrmals in jede Seite einzufügen ...
Verwenden Sie einfach JavaScript, um es dynamisch in jede Seite einzufügen (beachten Sie, dass ich es aktualisiert habe, um mit Bootstrap 3 zu arbeiten mit
.visible-*-block
:quelle
Ich habe nicht genügend Reputationspunkte, um Kommentare abzugeben, aber für diejenigen, die Probleme haben, "nicht erkannt" zu werden, wenn sie versuchen, das ResponsiveToolKit von Maciej Gurban zu verwenden, wurde dieser Fehler ebenfalls angezeigt, bis ich bemerkte, dass Maciej tatsächlich auf das Toolkit von unten verweist Seite in seinem CodePen
Ich habe es versucht und plötzlich hat es funktioniert! Verwenden Sie also das ResponsiveToolkit, aber platzieren Sie Ihre Links unten auf der Seite:
Ich weiß nicht, warum es einen Unterschied macht, aber es tut es.
quelle
Hier ist eine andere Möglichkeit, das aktuelle Ansichtsfenster zu erkennen, ohne die Größen der Ansichtsfenster in Ihr Javascript aufzunehmen.
Siehe CSS- und Javascript-Schnipsel hier: https://gist.github.com/steveh80/288a9a8bd4c3de16d799
Nachdem Sie diese Snippets zu Ihren CSS- und Javascript-Dateien hinzugefügt haben, können Sie das aktuelle Ansichtsfenster folgendermaßen erkennen:
Wenn Sie einen Ansichtsfensterbereich erkennen möchten, verwenden Sie ihn wie folgt
quelle
Das CSS von Bootstrap für die
.container
Klasse sieht folgendermaßen aus:Dies bedeutet, dass wir uns sicher darauf verlassen
jQuery('.container').css('width')
können, Haltepunkte zu erkennen, ohne die Nachteile, auf die wir uns verlassen müssenjQuery(window).width()
.Wir können eine Funktion wie diese schreiben:
Und dann teste es gerne
quelle
var cssWidth = parseInt( jQuery('.container').css('width') );
Zweitens, verwenden Sie Bereicheif ( cssWidth < 768) { return 'xs'; } else if (cssWidth >= 768 && cssWidth <= 992) { return 'sm'; } else if (cssWidth > 992 && cssWidth <= 1200) { return 'md'; } else { return 'lg'; }
Verwenden Sie CSS
:before
undcontent
Eigenschaft, um den Haltepunktstatus in der zu drucken<span id="breakpoint-js">
sodass das JavaScript diese Daten nur lesen muss, um sie als Variable für Ihre Funktion zu verwenden.(Führen Sie das Snippet aus, um das Beispiel zu sehen.)
HINWEIS: Ich habe einige Zeilen CSS hinzugefügt, um die
<span>
als rote Fahne in der oberen Ecke meines Browsers zu verwenden. Stellen Sie einfach sicher, dass Sie es wieder auf schalten,display:none;
bevor Sie Ihre Inhalte veröffentlichen.quelle
Ich habe eine native jQuery-Methode für die Erkennung der Twitter Bootstrap-Bildschirmgröße erstellt. Hier ist:
JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/
JSFillde als Vollbildbeispiel: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/
quelle
Für alle, die daran interessiert sind, habe ich eine Breakpoint-Erkennung basierend auf CSS-Breakpoints mit TypeScript und Observables geschrieben. Es ist nicht sehr schwer, ES6 daraus zu machen, wenn Sie die Typen entfernen. In meinem Beispiel verwende ich Sass, aber es ist auch einfach, dies zu entfernen.
Hier ist meine JSFiddle: https://jsfiddle.net/StefanJelner/dorj184g/
HTML:
SCSS:
Typoskript:
Ich hoffe das hilft jemandem.
quelle
Bootstrap4 mit jQuery, vereinfachte Lösung
quelle
Ich war nicht wirklich zufrieden mit den gegebenen Antworten, die mir zu kompliziert erscheinen, also schrieb ich meine eigene Lösung. Derzeit ist dies jedoch auf Unterstrich / Lodash angewiesen, um funktionieren zu können.
https://github.com/LeShrimp/GridSizeEvents
Sie können es so verwenden:
Dies funktioniert sofort für Bootstrap 3, da die Haltepunkte fest auf 768px, 992px und 1200px codiert sind. Für andere Versionen können Sie den Code leicht anpassen.
Intern verwendet dies matchMedia () und sollte daher garantieren, dass Ergebnisse erzielt werden, die mit Bootstrap synchron sind.
quelle
Vielleicht hilft es einigen von Ihnen, aber es gibt ein Plugin, mit dem Sie erkennen können, auf welchem aktuellen Bootstrap v4- Haltepunkt Sie sich befinden: https://www.npmjs.com/package/bs-breakpoints
Einfach zu bedienen (kann mit oder ohne jQuery verwendet werden):
quelle
Hier ist meine Lösung (Bootstrap 4):
quelle
Für alle, die knockout.js verwenden , wollte ich einige beobachtbare Eigenschaften von knockout.js , die mir sagen, wann die Haltepunkte erreicht werden. Ich habe mich dafür entschieden, die Unterstützung von Modernizr für Medienabfragen im CSS-Stil zu verwenden, damit die Zahlen mit den Bootstrap-Definitionen übereinstimmen, und die Kompatibilitätsvorteile von modernizr zu nutzen. Mein Knockout-Ansichtsmodell lautet wie folgt:
quelle
Hier ist ein guter Weg, um es zu erkennen (vielleicht lustig, aber funktioniert) und Sie können das erforderliche Element verwenden, damit der Code klar ist:
Beispiel: css:
und im Dokument von jQuery:
Natürlich ist CSS-Eigenschaft jede.
quelle
Da Bootstrap 4 bald herauskommen wird, dachte ich, ich würde eine Funktion teilen, die es unterstützt (xl ist jetzt eine Sache) und nur minimale jQuery ausführt, um die Arbeit zu erledigen.
quelle
Bootstrap 4
oder minimiert
quelle
Wenn Sie Knockout verwenden , können Sie die folgende benutzerdefinierte Bindung verwenden, um den aktuellen Haltepunkt des Ansichtsfensters (xs, sm, md oder lg) an eine in Ihrem Modell beobachtbare Größe zu binden. Die Bindung...
divs
mitvisible-??
Klasse in ein Div mit IDdetect-viewport
und fügt sie dem Body hinzu, falls sie noch nicht vorhanden ist (Sie können diese Bindung also wiederverwenden, ohne diese Divs zu duplizieren).quelle
Es ist eine Weile her seit dem OP, aber hier ist meine Lösung für dieses Problem mit Bootstrap 3. In meinem Anwendungsfall habe ich nur Zeilen als Ziel ausgewählt, aber das Gleiche könnte auf den Container usw. angewendet werden.
Ändern Sie einfach .row auf das, was Sie wollen.
quelle