Počas vytvárania témy za pomoci Bootstrap vytvárame rozloženie za pomoci Bootstrap gridu. Responzivita je zabezpečená „breakpointami“ (bodmi zlomu). Tieto breakpointy sú prednastavené v definícii Bootstrap. Prednastavené hodnoty sa dajú upraviť, podľa vlastných potrieb. Predpokladám, že si Bootstrap generujete sami za pomoci scss.
Zoznam štandardných breakpointov v Bootstrap:
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra Large | xl | ≥1200px |
| Extra extra Large | xxl | ≥1400px |
Dnes ukážem, ako si vytvoriť pomôcku, na zobrazenie aktuálneho breakpointu a šírku v pixeloch, po ktorom, dôjde k ďalšiemu zalomeniu.
First things first – najskôr, ako na to
Samozrejme teraz príde niečo, čo si budete musieť nastaviť, podľa seba – podľa aktuálneho nastavenia vášho vývojového prostredia.
V prvom rade si vytvoríme scss súbor. Nazveme ho napríklad _helper.scss. Importovaný musí byť tak, aby compiler scss mal prístup k vygenerovaným funkciám, premenným, mixinom a utilitám, ktoré Bootstrap používa pre generovanie css.
Jednoducho, tieto súbory musia byť v štruktúre importované skôr, ako náš súbor _helper.scss
Obsah súboru
body:after {
font-family: sans-serif;
color: #fff;
font-size: 13px;
letter-spacing: 0.5px;
padding: 5px;
right: 10px;
position: fixed;
text-align: center;
bottom: 10px;
width: 200px;
z-index: 9999;
background: rgba( 40, 40, 40, 0.5 );
border: solid 1px #fff;
@each $name, $value in $grid-breakpoints {
@include media-breakpoint-up( $name ) {
content: '#{$name} - min-width: #{$value}';
}
}
}Po pregenerovaní css by sa nám mala zobrazovať v pravom spodnom rohu obrazovky informácia aktuálneho breakpointu a tiež jeho minimálna šírka (teda šírka, po ktorej sa zalomí na ďalší breakpoint. Takto:
Pred nasadením, nezabudnite zakomentovať import nášho súboru a prekompilovať css, aby sa na živej stránke táto info nezobrazovala.
