Bootstrap media queries: Tips voor Bootstrap 3, 4 & 5

04.12.2020
door Meike Müller
Tipps & Tricks
Banner

Bootstrap media queries spiekbriefje voor Bootstrap 3 & Bootstrap 4 & Bootstrap 5. Tips en trucs over Bootstrap van de webontwikkelaars bij EXWE GmbH.

Leestijd 4 min

// X-kleine apparaten (staande telefoons, minder dan 576px)
// Geen media query voor `xs` omdat dit de standaard is in Bootstrap
// Kleine apparaten (liggende telefoons, 576px en hoger)
@media (min-width: 576px) { ... }
// Middelgrote apparaten (tablets, 768px en hoger)
@media (min-width: 768px) { ... }
// Grote apparaten (desktops, 992px en hoger)
@media (min-width: 992px) { ... }
// X-Large apparaten (grote desktops, 1200px en hoger)
@media (min-width: 1200px) { ... }
// XX-Large apparaten (grotere desktops, 1400px en hoger)
@media (min-width: 1400px) { ... }

Bootstrap 5 (nieuwste versie)

@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){}
 


FAQ over Bootstrap

Aan het einde van dit artikel gaan we in op een aantal vragen die zijn gerezen. Als je vragen hebt over webontwikkeling of iets anders in het algemeen, dan beantwoorden we die bij EXWE graag telefonisch.

  • Wat is Bootstrap?

    Bootstrap is een populair front-end webframework dat ontwikkelaars helpt bij het maken van responsieve en mobile-first websites en applicaties. Het biedt een verscheidenheid aan CSS- en JavaScript-componenten die vooraf zijn gebouwd en snel en eenvoudig in webprojecten kunnen worden geïntegreerd. Bootstrap is oorspronkelijk ontwikkeld door Twitter en is nu een van de meest gebruikte frameworks voor het ontwikkelen van websites en applicaties.

    Vorschau YouTube Video
  • Wat doe je met Bootstrap?

    Met Bootstrap kunnen webontwikkelaars snel en eenvoudig responsieve en mobile-first websites en applicaties maken. Het biedt een verscheidenheid aan kant-en-klare CSS- en JavaScript-componenten die eenvoudig in een webproject kunnen worden geïntegreerd. Deze componenten omvatten menu's, formulieren, knoppen, tabellen en nog veel meer. Door Bootstrap te gebruiken, kunnen ontwikkelaars tijd en moeite besparen door bestaande, geteste en stabiele codebasissen te gebruiken in plaats van alles vanaf nul te creëren.

  • Welke uitbreidingen zijn er beschikbaar voor Bootstrap?

    Er zijn talloze uitbreidingen en plug-ins voor Bootstrap waarmee het framework verder kan worden aangepast aan de individuele behoeften van een project. Enkele voorbeelden van zulke extensies zijn

    • Bootstrap Datepicker: Deze plug-in maakt het mogelijk om eenvoudig en intuïtief datumkiezers in formulieren te implementeren.
    • Bootstrap Colourpicker: Deze plug-in biedt een gebruiksvriendelijke manier om kleurselecties te integreren in webprojecten.
    • Bootstrap Select: Deze plug-in verbetert de standaard drop-downmenu's van Bootstrap en biedt extra functies zoals live zoeken en optgroepen.
    • Bootstrap File Input: Deze plug-in breidt de standaard bestandsuploadfunctie van Bootstrap uit en biedt extra functies zoals ondersteuning voor slepen en neerzetten en bestandsselectie met voorbeeldafbeeldingen.

    Dit zijn slechts enkele voorbeelden van de vele mogelijke uitbreidingen en plug-ins voor Bootstrap. Het is de moeite waard om op internet te zoeken naar meer opties en te overwegen welke uitbreidingen het meest geschikt zijn voor je eigen project.

  • Is Bootstrap gratis?

    Ja, Bootstrap is gratis en open source. Het is oorspronkelijk ontwikkeld door Twitter en wordt nu gepubliceerd onder de MIT-licentie, wat betekent dat het vrij gebruikt, aangepast en gedistribueerd kan worden. Ontwikkelaars hebben daarom gratis toegang tot het framework en alle bijbehorende bronnen en kunnen het gebruiken in hun projecten.

  • Waarom zou ik Bootstrap gebruiken?

    Er zijn verschillende redenen waarom je Bootstrap zou moeten gebruiken:

    • Tijdsbesparing: Bootstrap biedt een verscheidenheid aan kant-en-klare CSS- en JavaScript-componenten die snel en eenvoudig in een webproject kunnen worden geïntegreerd. Ontwikkelaars hoeven dus niet alles vanaf nul te maken, maar kunnen vertrouwen op een stabiele en geteste codebasis.
    • Responsief ontwerp: Bootstrap is vanaf de basis ontwikkeld voor responsief en mobile-first webdesign. Het biedt een reeks CSS-klassen en hulpprogramma's die het gemakkelijk maken om websites en toepassingen te ontwerpen die er goed uitzien en goed functioneren op verschillende apparaten en schermformaten.
    • Populariteit en ondersteuning: Bootstrap is een van de meest gebruikte front-end webframeworks en heeft een grote en actieve community van ontwikkelaars. Dit betekent dat er voldoende bronnen en tutorials zijn om op terug te vallen als je vragen hebt of ondersteuning nodig hebt. Het is ook gemakkelijk om andere ontwikkelaars te vinden die bekend zijn met Bootstrap als je externe hulp nodig hebt.
    • Flexibiliteit: Hoewel Bootstrap veel kant-en-klare componenten biedt, kan het ook gemakkelijk worden aangepast aan individuele behoeften. Ontwikkelaars kunnen bijvoorbeeld bepaalde componenten van het framework negeren of hun eigen CSS- en JavaScript-codefragmenten toevoegen om het framework aan te passen aan de specifieke vereisten van het project.
  • Welke functies heeft Bootstrap?

    Bootstrap is een front-end webframework dat ontwikkelaars helpt responsieve en mobile-first websites en applicaties te maken. Het biedt een verscheidenheid aan kant-en-klare CSS- en JavaScript-componenten die eenvoudig in een webproject kunnen worden geïntegreerd. Bootstrap heeft onder andere de volgende functies

    • Een op rasters gebaseerd lay-outsysteem waarmee je eenvoudig responsieve en mobile-first ontwerpen kunt maken.
    • Een verscheidenheid aan CSS-klassen en hulpprogramma's waarmee je snel en eenvoudig typografische stijlen, kleuren, marges en andere ontwerpelementen kunt definiëren.
    • Een reeks kant-en-klare CSS- en JavaScript-componenten, zoals menu's, formulieren, knoppen, tabellen en nog veel meer.
    • Integratie met andere JavaScript-bibliotheken en plug-ins, zoals jQuery en Popper.js.
    • Ondersteuning voor de nieuwste webstandaarden, zoals Flexbox en CSS Grid.
    • Een goed gedocumenteerde en actieve community voor ontwikkelaars die bronnen en tutorials biedt en helpt bij vragen en problemen.

Wat is je project? Als je ons erover wilt vertellen, bellen we je terug!

 
Meike
Meike
from 04.12.2020

Hallo, mijn naam is Meike. I take care of the EXWE back office and am responsible for our social media channels. All of our articles are meant to make your life easier and help you make decisions. Nevertheless, it can happen that something remains unclear, so: Als je vragen hebt over dit artikel kun je me makkelijk bereiken op +49 231 93149827.

Je wilt altijd voorop blijven lopen met technologie Mis geen nieuws en blogberichten meer.
We hebben ook de volgende interessante berichten van onze tech blog voor je over dit onderwerp
Integrate phpstan into Bitbucket Pipeline

How to integrate the popular static PHP code analyzer into your Bitbucket pipeline - our tips and tricks to make your life easier.

Online store hosting - the ten most frequently asked questions

Everything you need to know about online store hosting - provider, costs, own server? We have the answer!

Optimize conversion rate: Targeted increase with design

Boost the performance of your online store with a higher conversion rate! Use our tips and tricks on UX and usability design to do this