In de Bootstrap 3 media queries documentatie staat:
We gebruiken de volgende media queries in onze Less bestanden om de belangrijkste breekpunten in ons grid systeem te maken.
Extra kleine apparaten (telefoons, minder dan 768px): Geen media query aangezien dit de standaard is in Bootstrap
Kleine apparaten (tablets, 768px en hoger):
@media (min-width: @screen-sm-min) { ... }
Middelgrote apparaten (desktops, 992px en hoger):
@media (min-width: @screen-md-min) { ... }
Grote apparaten (grote desktops, 1200px en hoger):
@media (min-width: @screen-lg-min) { ... }
Is het de bedoeling dat we de @screen-sm
, @screen-md
, en @screen-lg
namen ook kunnen gebruiken in onze media queries? Want bij mij werkt het niet. Ik moet pixel afmetingen gebruiken zoals @media (min-width: 768px) {...}
voordat het werkt. Doe ik iets verkeerd?
Ook, is de verwijzing naar 480px voor extra kleine apparaten een typfout? Moet daar niet staan tot 767px? (sinds verwijderd uit de documentatie)
Bootstrap documenteert de media queries niet erg goed. Die variabelen van @screen-sm
, @screen-md
, @screen-lg
zijn eigenlijk verwijzingen naar LESS variabelen en niet eenvoudige CSS.
Wanneer je Bootstrap aanpast kun je de media query breakpoints veranderen en wanneer het compileert worden de @screen-xx variabelen veranderd in welke pixel breedte je ook gedefinieerd hebt als screen-xx. Dit is hoe een framework als dit eenmalig kan worden gecodeerd en dan aangepast door de eindgebruiker om aan hun behoeften te voldoen.
Een gelijkaardige vraag op hier die misschien meer duidelijkheid verschaft: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries
In je CSS zul je nog steeds traditionele media queries moeten gebruiken om te overschrijven of toe te voegen aan wat Bootstrap doet.
Met betrekking tot uw tweede vraag, dat is geen typefout. Zodra het scherm kleiner wordt dan 768px wordt het framework volledig vloeiend en wordt de grootte aangepast aan elke breedte van het apparaat, waardoor er geen breekpunten meer nodig zijn. Het breekpunt bij 480px bestaat omdat er specifieke veranderingen optreden in de layout voor mobiele optimalisatie.
Om dit in actie te zien, ga naar dit voorbeeld op hun site (http://getbootstrap.com/examples/navbar-fixed-top/), en resize je venster om te zien hoe het het ontwerp behandelt na 768px.
Deze kwestie is besproken in https://github.com/twbs/bootstrap/issues/10203 Op dit moment is er geen plan om Grid te veranderen vanwege compatibiliteitsredenen.
Je kunt Bootstrap van deze vork krijgen, branch hs
: https://github.com/antespi/bootstrap/tree/hs
Deze branch geeft je een extra breekpunt op 480px, dus je moet:
Ontwerp mobile first is de sleutel tot het begrijpen van Bootstrap 3. Dit is de belangrijkste verandering ten opzichte van Bootstrap 2.x. Als een regel sjabloon kun je dit volgen (in LESS):
.template {
/* rules for mobile vertical (< 480) */
@media (min-width: @screen-hs-min) {
/* rules for mobile horizontal (480 > 768) */
}
@media (min-width: @screen-sm-min) {
/* rules for tablet (768 > 992) */
}
@media (min-width: @screen-md-min) {
/* rules for desktop (992 > 1200) */
}
@media (min-width: @screen-lg-min) {
/* rules for large (> 1200) */
}
}
De verwijzing naar 480px is verwijderd. In plaats daarvan staat er:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
Er is geen breekpunt onder 768px in Bootstrap 3.
Als je de @screen-sm-min
en andere mixins wilt gebruiken dan moet je compileren met LESS, zie http://getbootstrap.com/css/#grid-less
Hier's een tutorial over hoe Bootstrap 3 en LESS te gebruiken: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial