Neuigkeiten zum Thema Tipps & Tricks aus dem EXWE Blog
Beiträge zum Thema Digitalisierung, Softwareentwicklung und E-Commerce abbonieren
Alle News anzeigen (74)

Bootstrap media queries cheat sheet für Bootstrap 3 & Bootstrap 4 & Bootstrap 5

Banner Tipps & Tricks

Bootstrap media queries cheat sheet für Bootstrap 3 & Bootstrap 4 & Bootstrap 5. Tipps und Tricks zum Thema Bootstrap von den Webenticklern der EXWE GmbH.

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Bootstrap 5 (neueste Version)

@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 1200px){}
@media (min-width: 1400px){}

Bootstrap 4

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Bootstrap 3

 @media(max-width:767px){}
 @media(min-width:768px){}
 @media(min-width:992px){}
 @media(min-width:1200px){} 

Was ist Bootstrap?

Bootstrap ist, auf GitHub gehostetes Open Source- Projekt, das für alle frei zugänglich ist. Das Frontend-CSS-Framework ist extrem anpassungsfähig. Es enthält Gestaltungsvorlagen für Typografie, Buttons, Tabellen, Formulare, Navigationsgestaltungselemente und Grid-Systeme, die auf HTML und CSS basieren. Zusätzlich gibt es noch JavaScript-Erweiterungen. Mit Bootstrap kannst du kleine und große Projekte relativ schnell anpassen und entwickeln – und das so, dass sie auf allen Geräten gut funktionieren und eine einheitliches Erscheinungsbild in allen Webbrowsern anzeigt wird. Brauchst du weitere Beratung oder Hilfe bei der Webentwicklung - das Team von EXWE hilft dir gerne bei allen Fragen weiter.

Wusstest du schon, dass Bootstrap aus dem Vorhaben entstanden ist, die internen Analyse- und Verwaltungswerkzeuge von Twitter weiterzuentwickeln? Kein Wunder also, dass der erste Einsatz von Bootstrap (unter realen Bedingungen) auf Twitters erster Hackweek stattfand. 2011 veröffentliche Twitter seine Ergebnisse auf dem Entwicklerportal GitHub, nachdem das Unternehmen den großen Nutzen von Bootstrap für das Webdesign erkannt hatte und stellte das Framework als Open Source weltweilt zur Verfügung. Besitzt du eine private Homepage, deren Aufbau sich kaum ändert, ist Bootstrap wahrscheinlich nichts für dich, da du nicht voll und ganz von den Vorteilen profitieren kannst. 

Besitzt du eine Unternehmenswebsite oder einen Onlineshop, kann deren Auftritt durch Nutzung von Bootstrap nur profitieren. Vorteile sind hierbei die einfache Konfiguration von Designs und Grafik, eine schnellere Entwicklung neuer Frontends, eine ausführliche Dokumentation und Anleitung, eine einheitliche Darstellung auf allen Browsern und eine optimierte Ansicht auf allen Mobilgeräten. Nachteile von Bootstrap sind die versteckten technischen Grundlagen des Webdesigns und die fehlende professionelle Betreuung und Optimierung – Bootstrap ist und bleibt Open Source.

Meike
Meike
vom 04. December 2020

Hallo, mein Name ist Meike. Ich betreue das EXWE Backoffice und bin für unsere Social-Media Kanäle zuständig. All unsere Artikel sollen dir das Leben erleichtern und eine Entscheidungshilfe sein. Trotzdem kann es mal vorkommen, dass etwas unklar bleibt, daher: Wenn du Fragen zu diesem Artikel hast erreichst du mich ganz einfach unter +49 231 93149827

Zu diesem Thema haben wir außerdem noch folgende interessante Beiträge aus unserem Tech-Blog für dich
Onlineshop Hosting - die zehn häufigsten Fragen

Alles was Du über das Onlineshop Hosting wissen musst - Anbieter, Kosten, eigener Server? Wir haben die Antwort!

Wie kann ich den besten Software-Dienstleister für uns finden?

Du benötigst Unterstützung im Bereich Software Entwicklung und suchst den geeigneten Softwaredienstleister? Finde hier die wichtigsten Kriterien.

So verbindest du deinen Einzelhandel mit dem Onlinehandel!

E-Commerce-Lösungen für dein Ladenlokal - wie du mit Hilfe von Pickware und JTL deine Warenwirtschaft professionalisierst




Schreibe EXWE auf WhatsApp