Zobrazenie Bootstrap breakpointu počas vytvárania témy

Obtiažnosť:
Začiatočník
Pokročilý
Skúsený
Expert

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:

BreakpointClass infixDimensions
X-SmallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra Largexl≥1200px
Extra extra Largexxl≥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.

0 0 votes
Hodnotenie článku
Autor
Navigácia
Odoberať
Upozorniť na
guest
0 Komentáre
Inline Feedbacks
View all comments