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



Bootstrap media queries cheat sheet

Banner Tipps & Tricks

Unser Bootstrap media queries cheat sheet:

Bootstrap 3

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media(min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
 @media(max-width:767px){}
 @media(min-width:768px){}
 @media(min-width:992px){}
 @media(min-width:1200px){} 

Bootstrap 4

@media(min-width:576px){}
@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.

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.12.20 um 11:53

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




Schreibe EXWE auf WhatsApp