Bootstrap „media queries“ in JavaScript nutzen

Bootstrap ist ein mächtiges CSS Framework und ich verwende es in fast allen meinen Projekten. In diesem Artikel präsentiere ich euch ein paar meiner Hilfsmittel, um Bootstrap Breakpoints auch via JavaScript zugänglicher zu machen.
Alle Beispiel beziehen sich auf Bootstrap 5, lassen sich aber auch einfach auf andere Versionen anpassen.
Tip 1: Das Bootstrap Breakpoint Objekt
Um leicht Zugriff auf den gewünschten Breakpoint zu erhalten, erstelle ich als Basis ein Objekt, das alle Breakpoints enthält.
breakpoints = { xs: '0', sm: '576px', md: '768px', lg: '992px', xl: '1200px', xxl: '1400px', };
Und so bekommst du Zugriff auf den gewünschten Breakpoint: breakpoints.md
Tip 2: Bootstrap „media queries“ als Funktion nutzen
Diese Funktion erleichtert das schreiben von „media queries“ im JavaScript.
function media_query(direction, breakpoint) { return window.matchMedia('(' + direction + ': ' + breakpoints.breakpoint + ')').matches; } console.log(media_query('min-width', 'md'));
Der Funktion media_queries
werden die Paramater direction
(min-width
oder max-width
) und breakpoint
(sm
, md
, …) übergeben..
Tip 3: Aktuellen Bootstrap Breakpoint als Attribute in <body>
Die folgende Funktion schreibt den aktuellen Breakpoint als data
Attribute in das <body>
tag.
function set_current_breakpoint_on_body() { for (const [breakpoint, value] of Object.entries(breakpoints)) { if (media_query('min-width', breakpoint)) { document.querySelector('body').setAttribute('data-breakpoint', breakpoint); } } }
Mittels CSS kann nun direkt auf das Attribute body[data-breakpoint="md"]
zugegriffen werden.
Schreibe einen Kommentar