Obecnie Twitter Bootstrap 3 ma następujące responsywne punkty przerwania: 768px, 992px i 1200px, reprezentujące odpowiednio małe, średnie i duże urządzenia.
Jak mogę wykryć te punkty przerwania za pomocą JavaScript?
Chciałbym nasłuchiwać z JavaScriptem wszystkich powiązanych zdarzeń wywoływanych po zmianie ekranu. I móc wykryć, czy ekran jest przeznaczony dla małych, średnich czy dużych urządzeń.
Czy coś już zostało zrobione? Jakie masz sugestie?
javascript
twitter-bootstrap-3
dom-events
Rubens Mariuzzo
źródło
źródło
<div class="d-none d-?-block"></div>
zmianę widoczności (wstaw żądany punkt przerwania). Te klasy CSS są przeznaczone dla Bootstrap 4 ... używają wszystkiego, co działa w Bootstrap 3. O wiele bardziej wydajne niż nasłuchiwanie zdarzenia zmiany rozmiaru okna.Odpowiedzi:
Edycja: ta biblioteka jest teraz dostępna za pośrednictwem Bower i NPM. Zobacz repozytorium github, aby uzyskać szczegółowe informacje.
ZAKTUALIZOWANA ODPOWIEDŹ:
Zastrzeżenie: jestem autorem.
Oto kilka rzeczy, które możesz zrobić, korzystając z najnowszej wersji (Responsive Bootstrap Toolkit 2.5.0):
Od wersji 2.3.0 nie potrzebujesz czterech
<div>
elementów wymienionych poniżej.ORYGINALNA ODPOWIEDŹ:
Myślę, że nie potrzebujesz do tego żadnego dużego skryptu ani biblioteki. To dość proste zadanie.
Wstaw następujące elementy tuż przed
</body>
:Te 4 elementy div pozwalają sprawdzić aktualnie aktywny punkt przerwania. Aby łatwo wykryć JS, użyj następującej funkcji:
Teraz, aby wykonać określoną akcję tylko na najmniejszym punkcie przerwania, którego możesz użyć:
Wykrywanie zmian po zakończeniu DOM jest również dość proste. Wszystko, czego potrzebujesz, to lekki odbiornik zmiany rozmiaru okna, taki jak ten:
Po wyposażeniu możesz zacząć nasłuchiwać zmian i wykonywać funkcje specyficzne dla punktu przerwania, takie jak:
źródło
Jeśli nie masz konkretnych potrzeb, możesz to zrobić:
Edycja: Nie rozumiem, dlaczego powinieneś używać innej biblioteki js, skoro możesz to zrobić tylko z jQuery już zawartym w twoim projekcie Bootstrap.
źródło
$(window).bind('resize')
... ale są też inne zdarzenia związane z orientacją ekranu mobilnego, które mają wpływ na rozmiar ekranu..on('resize')
Czy spojrzałeś na Response.js? Został zaprojektowany do tego rodzaju rzeczy. Połącz Response.band i Response.resize.
http://responsejs.com/
źródło
Możesz użyć rozmiaru okna i na stałe zakodować punkty przerwania. Korzystanie z Angular:
źródło
Wykryj responsywny punkt przerwania Twitter Bootstrap 4.1.x przy użyciu JavaScript
Bootstrap v.4.0.0 (i najnowsza wersja Bootstrap 4.1.x ) wprowadziła aktualizowane opcji sieciowych , tak stary koncept na detekcji nie mogą być stosowane bezpośrednio (patrz instrukcje migracji ):
sm
poziom siatki poniżej,768px
aby uzyskać bardziej szczegółową kontrolę. Mamy terazxs
,sm
,md
,lg
, ixl
;xs
klasy grid zostały zmodyfikowane, aby nie wymagały wrostka.Napisałem małą funkcję użytkową, która szanuje zaktualizowane nazwy klas siatki i nową warstwę siatki:
Wykryj responsywny punkt przerwania Bootstrap v4-beta za pomocą JavaScript
Bootstrap v4-alfa i Bootstrap v4-beta miał inne podejście na pułapki siatki, więc oto sposób dziedzictwo osiągnięcia takie same:
Myślę, że byłoby to przydatne, ponieważ łatwo jest zintegrować go z dowolnym projektem. Wykorzystuje natywne, responsywne klasy wyświetlania samego Bootstrap.
źródło
Oto moje własne proste rozwiązanie:
jQuery:
VanillaJS:
źródło
Korzystanie z tego podejścia w przypadku Response.js jest lepsze. Response.resize wyzwala przy każdej zmianie rozmiaru okna, gdzie crossover będzie wyzwalany tylko w przypadku zmiany punktu przerwania
źródło
Nie powinno być problemu z ręczną implementacją, taką jak ta wspomniana przez @oozic.
Oto kilka bibliotek, którym możesz się przyjrzeć:
Zauważ, że te biblioteki są zaprojektowane tak, aby działały niezależnie od bootstrap, Foundation, itp. Możesz skonfigurować własne punkty przerwania i dobrze się bawić.
źródło
Możesz chcieć dodać to do swojego projektu bootstrap, aby wizualnie sprawdzić aktywny punkt przerwania
Oto BOOTPLY
źródło
Opierając się na odpowiedzi Macieja Gurbana (co jest fantastyczne ... jeśli ci się to podoba, po prostu zagłosuj na jego odpowiedź). Jeśli tworzysz usługę do wysyłania zapytań, możesz zwrócić aktualnie aktywną usługę za pomocą poniższej konfiguracji. Może to całkowicie zastąpić inne biblioteki do wykrywania punktów przerwania (np. Enquire.js, jeśli umieścisz niektóre zdarzenia). Zauważ, że dodałem kontener z identyfikatorem do elementów DOM, aby przyspieszyć przechodzenie do DOM.
HTML
COFFEESCRIPT (AngularJS, ale można to łatwo zamienić)
JAVASCRIPT (AngularJS)
źródło
Zamiast używać $ (document) .width (), powinieneś ustawić regułę CSS, która dostarcza te informacje.
Właśnie napisałem artykuł, aby dokładnie to zrozumieć. Zobacz to tutaj: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/
źródło
Dlaczego po prostu nie użyć jQuery do wykrycia bieżącej szerokości css klasy kontenera ładowania początkowego?
to znaczy..
Możesz także użyć $ (window) .resize (), aby zapobiec „zabrudzeniu łóżka” przez układ, jeśli ktoś zmieni rozmiar okna przeglądarki.
źródło
Zamiast wielokrotnie wstawiać poniższy kod na każdej stronie ...
Po prostu użyj JavaScript, aby dynamicznie wstawić go do każdej strony (zauważ, że zaktualizowałem go do pracy z Bootstrap 3 z
.visible-*-block
:źródło
Nie mam wystarczającej liczby punktów reputacji do skomentowania, ale dla tych, którzy mają problemy z „nierozpoznaniem”, gdy próbują użyć ResponsiveToolKit Macieja Gurbana, również otrzymywałem ten błąd, dopóki nie zauważyłem, że Maciej faktycznie odwołuje się do zestawu narzędzi od dołu strony w swoim CodePen
Próbowałem to zrobić i nagle zadziałało! Więc użyj ResponsiveToolkit, ale umieść swoje linki u dołu strony:
Nie wiem, dlaczego to ma znaczenie, ale tak jest.
źródło
Oto inny sposób na wykrycie bieżącego obszaru roboczego bez umieszczania numerów rozmiaru widocznego obszaru w skrypcie javascript.
Zobacz fragmenty css i javascript tutaj: https://gist.github.com/steveh80/288a9a8bd4c3de16d799
Po dodaniu tych fragmentów do plików css i javascript możesz wykryć bieżący widok w następujący sposób:
Jeśli chcesz wykryć zakres rzutni, użyj go w ten sposób
źródło
CSS Bootstrapa dla
.container
klasy wygląda następująco:Oznacza to, że możemy bezpiecznie polegać na
jQuery('.container').css('width')
wykrywaniu punktów przerwania bez wad polegających na poleganiu na nichjQuery(window).width()
.Możemy napisać taką funkcję:
A potem przetestuj to jak
źródło
var cssWidth = parseInt( jQuery('.container').css('width') );
Po drugie, użyć zakresówif ( cssWidth < 768) { return 'xs'; } else if (cssWidth >= 768 && cssWidth <= 992) { return 'sm'; } else if (cssWidth > 992 && cssWidth <= 1200) { return 'md'; } else { return 'lg'; }
Użyj CSS
:before
icontent
właściwości, aby wydrukować stan punktu przerwania w pliku<span id="breakpoint-js">
formacie, więc JavaScript musi po prostu odczytać te dane, aby zmienić je jako zmienną do użycia w funkcji.(uruchom fragment, aby zobaczyć przykład)
UWAGA: dodałem kilka linii CSS, aby użyć
<span>
jako czerwonej flagi w górnym rogu mojej przeglądarki. Po prostu pamiętaj, aby przełączyć go z powrotem na,display:none;
zanim udostępnisz swoje rzeczy publicznie.źródło
Stworzyłem natywną metodę jQuery do wykrywania rozmiaru ekranu Twitter Bootstrap. Tutaj jest:
JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/
JSFillde jako przykład pełnoekranowy: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/
źródło
Dla wszystkich zainteresowanych tym, napisałem wykrywanie punktów przerwania na podstawie punktów przerwania CSS przy użyciu TypeScript i Observables. nie jest trudno zrobić z tego ES6, jeśli usuniesz typy. W moim przykładzie używam Sass, ale łatwo to usunąć.
Oto mój JSFiddle: https://jsfiddle.net/StefanJelner/dorj184g/
HTML:
SCSS:
Maszynopis:
Mam nadzieję, że to komuś pomoże.
źródło
Bootstrap4 z jQuery, uproszczone rozwiązanie
źródło
Nie byłem zadowolony z udzielonych odpowiedzi, które wydają mi się zbyt skomplikowane w użyciu, więc napisałem własne rozwiązanie. Jednak na razie polega to na podkreśleniu / lodash do pracy.
https://github.com/LeShrimp/GridSizeEvents
Możesz go używać w ten sposób:
Działa to po wyjęciu z pudełka dla Bootstrap 3, ponieważ punkty przerwania są na stałe zakodowane na 768px, 992px i 1200px. W przypadku innych wersji można łatwo dostosować kod.
Wewnętrznie to używa matchMedia () i dlatego powinno zagwarantować, że wyniki będą zsynchronizowane z Bootstrap.
źródło
Może niektórym z was to pomoże, ale jest wtyczka, która pomoże wam wykryć, na którym aktualnym punkcie przerwania Bootstrap v4 się znajdujecie: https://www.npmjs.com/package/bs-breakpoints
Prosty w użyciu (może być używany z jQuery lub bez):
źródło
Oto moje rozwiązanie (Bootstrap 4):
źródło
Dla każdego, kto używa knockout.js , chciałem mieć kilka obserwowalnych właściwości knockout.js , które powie mi, kiedy zostaną osiągnięte punkty przerwania. Zdecydowałem się skorzystać z obsługi Modernizr dla zapytań o media w stylu css, aby liczby pasowały do definicji bootstrap i aby uzyskać korzyści ze zgodności modernizr. Mój model widoku knockout jest następujący:
źródło
Oto dobry sposób na wykrycie tego (może zabawny, ale działa) i możesz użyć niezbędnego elementu, aby kod był przejrzysty:
Przykład: css:
oraz w dokumencie jQuery:
oczywiście właściwość css jest dowolna.
źródło
Ponieważ bootstrap 4 wkrótce wyjdzie, pomyślałem, że udostępnię funkcję, która go obsługuje (xl jest teraz rzeczą) i wykonuje minimalne jQuery, aby wykonać zadanie.
źródło
Bootstrap 4
lub zminimalizowane
źródło
Jeśli używasz Knockout , możesz użyć następującego niestandardowego powiązania, aby powiązać bieżący punkt przerwania rzutni (xs, sm, md lub lg) z obserwowalnym w modelu. Wiązanie...
divs
zvisible-??
klasy w div o identyfikatorzedetect-viewport
i dodaje go do treści, jeśli jeszcze nie istnieje (więc możesz ponownie użyć tego powiązania bez duplikowania tych elementów div)źródło
Minęło trochę czasu od OP, ale oto moje rozwiązanie tego problemu za pomocą Bootstrap 3. W moim przypadku celowałem tylko w wiersze, ale to samo można zastosować do kontenera itp.
Po prostu zmień. Rzuć na cokolwiek chcesz.
źródło