Späť na blog
Novinky

Čo je nové v Bootstrap 5

Lubo Herkoo
02.07.2020
9 minút čítania
Čo je nové v Bootstrap 5
Od polovice júna máme prístup k prvej alpha verzii Bootstrap 5. Okrem novej verzie loga v sexi zátvorkách {B} sa dočkáme aj obrovského množstva vylepšení na všetkých frontoch. Už samotná dokumentácia je ukážkou vylepšeného vzhľadu a funkcionalít. Ak sa nevieš dočkať a chceš nový Bootstrap vyskúšať ASAP, začni tu. Je to stále Alpha verzia, neodporúčam ju preto nasadiť do žiadneho projektu. Kým dostaneme prvú betaverziu, môže prejsť zmenami, ktoré Ti vyrobia viac práce ako pomoci.
Toto je "zostrih" najvýraznejších zmien, ktoré sme popísali presne pre Teba. Na mieru.

JavaScript

Už žiadna podpora pre jQuery, aj keď..

Pre niektorých killer feature, pre iných nič podstatné. Nový Bootstrap 5 nebude už obsahovať jQuery ako jednu zo svojich závislostí (aj napriek tomu, že jQuery "asi" stále žije a v apríli tohto roka sme dostali novú verziu jQuery - 3.5). Vieme to už dávno, už sme sa na to len tešili. Ešte nemáme oficiálne konečné čísla, ale očakávame, že Bootstrap vďaka tejto zásadnej zmene stratí tak na kilobajtoch, ako aj milisekundách. Ak si rozumieme 😉
Ak však stále jQuery vo svojom projekte potrebuješ, Bootstrap o tom bude vedieť a všetky komponenty pridá k modulom jQuery. V zásade to znamená, že stále bude možné inicializovať napríklad Tooltip komponent takýmto (starým) spôsobom (v prípade, že Bootstrap detekuje prítomnosť jQuery):
$('[data-toggle="tooltip"]').tooltip();

Button plugin

Zmenami prejde aj state-management tlačidiel. Tie využívame napríklad aj ako indikátory ZAP/VYP pri rôznych funkcionalitách našich aplikácií. V starších verziách Bootstrap stav tlačidla riešil JavaScript. Bootstrap 5 sa snaží state-management riešiť v čo najvyššej miere dostupnými funkcionalitami a elementami HTML a CSS. Výsledkom tak je manažovanie stavu tlačidla pomocou checkbox a radio elementov. Naše ZAP/VYP tlačidlá tak budú o niečo spoľahlivejšie medzi rôznymi platformami.

CSS

CSS premenné

S koncom podpory pre Internet Explorer prichádzajú aj nové možnosti. Jednou z nich sú aj CSS premenné. Tie sme uzreli už v predchádzajúcej verzii (root variables), avšak nie v takom rozsahu ako vo verzii 5 - kde sa css premenné dostali už aj do jednotlivých komponentov. Napríklad do tabuliek:
.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
  // Styles here...
}

Výhodou CSS premenných je ich používanie bez nutnosti skompilovania SASS kódu do CSS. Takto bude možné hodnoty niektorých premenných meniť v priamo Inspectore prehliadača, čo urýchli prácu napríklad pri prototypovaní.
V Bootstrap 5 stále ostane možnosť definície premenných v SASS (_variables.scss) súboroch, tak, ako sme to robili doteraz. Osobne by som neočakával kompletný prechod zo SASS premenných do CSS premenných. SASS má stále svoju nenahraditeľnú úlohu pri vytváraní premenných pomocou mapovania, preto očakávam, že budeme mať k dispozícii kombináciu SASS premenných s CSS premennými aj v budúcnosti.

Vylepšený grid

Získame nový grid-tier pre obrazovky so šírkou väčšou ako 1400px - .col-xxl-.
Rovnako medzery medzi jednotlivými stĺpcami gridu budú po novom "ohybnejšie". Získame novú css utilitu g pre naše .row. S gutter hodnotami takto bude možné pracovať podobne ako s margin a padding hodnotami, na čo sme si už zvykli:
.g-2
.gx-2
.gy-2
.g-lg-2
.g-0

Formuláre

Od verzie 4 sme mohli vo svojich aplikáciách používať checkbox, radio a file elementy dvoma spôsobmi:
  1. Buď sme použili pôvodný, systémový vzhľad (poskytnutý browserom),
  2. alebo sme použili nový vzhľad (custom-checkbox, custom-radio).
Verzia 5 bude obsahovať už len nový vzhľad týchto elementov. Formuláre tak budú vypadať rovnako v každom prehliadači a operačnom systéme a prispôsobenie vzhľadu týchto komponentov bude rovnako jednoduchšie.
Rovnako bude odstránený aj potrebný .form-group wrapper. Nové formuláre už budú obsahovať len jednotlivé form elementy, bez tohoto DIV elementu. Hurá! Menej kódu! 🙂
<form>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  ...
</form>

Wrapper bude potrebný len pre custom elementy (.form-select, .form-check, .form-file) a tiež .form-group.

Utilities API

Utility sú veľmi užitočné CSS triedy, ktorými zvyčajne meníme parametre rámovaní, farieb, spôsobov zobrazenia, tieňovania a rôznych veľkostí (width, height, padding, margin, ...). V praxi sa občas stáva, že sa nevmestíme do preddefinovaných utilít, ktoré sú súčasťou Bootstrap-u. Preto sme niekedy vytvárali vlastné triedy. Napríklad ak nastavujeme šírku nejakého elementu, máme k dispozícii takéto css triedy:
.w-25   /* 25% */
.w-50   /* 50% */
.w-75   /* 75% */
.w-100  /* 100% */
.w-auto /* auto */

Ak sme potrebovali 33% width, 90% width, alebo iné hodnoty, vytvorili sme vlastné CSS triedy, urobili override na $sizes mapu v nejakom vlastnom súbore, alebo sme nebodaj editovali priamo $sizes mapu v súbore premenných _variables.scss.
Vo verzii Bootstrap 5 máme k dispozícii čistejší a užitočnejší SASS nástroj, ako modifikovať existujúce, alebo pridať nové utility do nášho projektu, témy, alebo pluginu pre Bootstrap - utilities API:
$utilities: map-merge(
  (
    "width": (
      property: width,
      class: w,
      values: (
                33: 33%,
        90: 90%
      )
    ),
    "input-padding": (
      property: padding,
      class: ip,
      values: (
        0: 0,
        1: .3rem,
        2: .5rem,
        3: .7rem,
        4: .9rem,
        5: 1rem,
      )
    )
  ), $utilities);

Výsledkom takéhoto kódu budú nové css triedy utilít:
.w-33  /* nastaví width na 33% */
.w-99  /* nastaví width na 90% */
.ip-1  /* nastaví padding na .3rem */
.ip-2  /* nastaví padding na .5rem */
.ip-3  /* nastaví padding na .7rem */
.ip-4  /* nastaví padding na .9rem */
.ip-5  /* nastaví padding na 1rem */

Ostatné vylepšenia

Ikony

S alpha verziou Bootstrap 5 prichádza aj piata alpha verzia Bootstrap Icons. Je to sada viac ako 1000 ikon, ktoré sú nadizajnované tak, aby parádne ladili s Bootstrapom. Nifty funkcionalita je tiež SVG sprite, ktorá nám umožňuje vytvoriť vlastnú mapu SVG ikon a efektne ju používať v projekte bez toho, aby sme kód špinili samotným SVG zdrojovým kódom.
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

Osobne som veľkým fanúšikom Fontawesome ikon, ktoré obsahujú okrem enormne väčšieho množstva ikon a ich variantov aj veľmi užitočné spôsoby integrácie do projektov. Fontawesome nie sú však dostupné zdarma, preto možno v ďalšom projekte aj my v learn2code zvážime integráciu s Bootstrap ikonami.

Dokumentácia

Už na prvý pohľad je vidieť, že dokumentácia prešla zmenami. Tie však nie sú len vizuálne, ale vylepšený je aj samotný obsah. Orientácia medzi sekciami je vďaka novému postrannému menu rýchlejšia.
Jednotlivé sekcie obsahujú aj akési "overview", ktoré postupne pribúdajú do každej hlavnej sekcie dokumentácie. Aj tieto zmeny urýchľujú navigáciu v dokumentácii a hľadanie želanej informácie je takto rýchlejšie.

Farby

Pribudli tiež nové farebné odtiene a vylepšený bude aj ich kontrastný pomer.

Záver

Tento text nie je a ani nechcel byť kompletným diffom verzie 4 s novou verziou 5. Omnoho viac noviniek nájdeš v stále rastúcej dokumentácii k Bootstrap 5. Ak som na niečo dôležité zabudol, pokojne sa ozvi v komentári.
Lubo Herkoo
Ruby on Rails programátor, otec štyroch detí, manžel jednej manželky. V Skillmea vediem vývoj a raz za dva roky publikujem článok.

Mohlo by ťa zaujímať

4 nové online kurzy
Novinky
03.09.2019
Skillmea

4 nové online kurzy

Tento týždeň ti na Learn2Code prinášame 4 nové kurzy, v ktorých sme dali priestor niekoľkým novým témam. Sú to online kurzy zamerané predovšetkým na soft skills, spestrením je určite šachový kurz so slovenskou jednotkou Jánom Markošom. Zaujalo? Prečítaj si krátke predstavenie kurzov v článku. Prezentačné zručnosti - základyAk aj ty mávaš roztrasené kolená vždy, keď máš vystúpiť na pódium alebo prezentovať svoj nápad pred skupinou ľudí, mal by si zamerať pozornosť na tento kurz.  Nikto ako rečník z neba nespadol, aj ty sa máš možnosť osvojiť si a zdokonaliť svoje prezentačné zručnosti tak, aby si pri vystupovaní pôsobil/a sebavedome.  Čo máš robiť pri vystupovaní s rukami, kam sa pozerať a ako pracovať s publikom ti vysvetlí Andrej Mažáry – líder Slovenských Toastmasters (globálna organizácia venujúca sa rečníctvu) a stredoeurópsky šampión v rečníckych improvizáciách.    Ako rozmýšľať pri fotografovaníV ponuke máme mnoho kurzov zameraných na technickú stránku fotografie. Vytvoriť dobrú fotku však nie je len vecou kompozície a techniky, fotka by mala byť nositeľom príbehu, emócie, ktorú chce fotograf zachytiť.  Učiť sa budeš od troch úspešných a oceňovaných fotografov, ktorí sa venujú predovšetkým dokumentárnej a reportážnej fotografii. Každý z nich ti poskytne vlastný pohľad na postupy a techniky, ktoré pri fotení používajú, ako pracujú s objektom,s rôznymi zdrojmi svetla, prezradia ti kompozičné tipy a nápady. Kurz je určený tebe, ak už máš zvládnuté základy práce s fotoaparátom, možno uvažuješ nad fotením ako svojím živobytím a hlavne chceš tvoriť fotky, ktoré budú výnimočné.  Kurz podnikania - ako začaťKurzom ťa bude sprevádzať osem zakladateľov a CEO úspešných slovenských firiem. Tým myslíme značky ako Tuli, CURAPROX, daren & curtis, VISIBILITY, Be Cool a ďalšie. V tutoriáloch sa s tebou podelia o svoje skúsenosti, Know-how a zodpovedajú dôležité otázky, nad ktorými možno uvažuješ aj ty. Ako myšlienku premeniť na realitu, nápad na fungujúci biznis? Ako vieš odhadnúť jeho úspech? Akú rolu hrajú brand, firemná kultúra či hodnoty firmy? Vysvetlia ti aj plusy a mínusy partnerstva v podnikaní, ako a kedy prijímať nových zamestnancov a čo robiť, ak by to celé nevyšlo. Šach (Coming soon)Dlhoročná šachová jednotka na Slovensku Ján Markoš odhaľuje svoje šachové majstrovstvo. Uč sa od neho o šachových stratégiách, taktikách či sile jednotlivých figúr. Objavíš strategické a taktické postupy, o ktorých si možno doteraz nevedel. Kurz je určený mierne a stredne pokročilým šachistom. Či už rozohrávaš šachové partie online alebo zoči-voči, tento kurz ťa dostane na vyššiu úroveň. Našiel si kurz, ktorý ťa zaujal a bude pre teba prínosným? Ak máš prípadne návrh na ďalšie témy kurzov, ktoré by si v Learn2Code uvítal, napíš do komentára.
Vyhlásenie výsledkov súťaže #studujonline je tu!
Novinky
17.05.2019
Skillmea

Vyhlásenie výsledkov súťaže #studujonline je tu!

Aj ty si nám v uplynulých troch týždňoch poslal kreatívny príspevok, ako študuješ niektorý z našich kurzov? Čítaj teda ďalej a možno sa nájdeš medzi výhercami! V prvom rade ďakujeme za všetky vtipné a kreatívne príspevky, ktoré dokázali, že študovať sa dá naozaj odkiaľkoľvek. Zároveň nás prekvapilo, že niektorí chceli vyhrať až tak veľmi, že sa uchýlili k nečestným praktikám získavania interakcií. Mnohí účastníci súťaže si nakúpili "fake lajky" z Ázie a iných exotických destinácií. Považujeme to za nefér. A hoci sme mali v pravidlách súťaže uvedené, že vyhrá post s najväčším počtom interakcií, rozhodli sme sa to zmeniť. Určite je to aj naša chyba, priznávame, poučili sme sa. V budúcnosti už víťazov nemôžeme hľadať zmanipulovateľnou cestou. O konečnom poradí v súťaži #studujonline sme rozhodli interným hlasovaním, o víťazoch tak rozhodol náš tím Learn2Code a naši lektori. Kocky sú hodené, poďme na výsledky! 1. miesto: iPad + ročné predplatné online kurzov                                           2. miesto: ročné predplatné online kurzov                                              3. miesto: 3-mesačné predplatné online kurzov    Ak si medzi výhercami, gratulujeme a ešte dnes ti napíšeme správu na Instagrame a dohodneme sa na prevzatí výhry. Keď si sa zapojil/a, ceníme si tvoju snahu a ďakujeme za príspevok. Ak sa ti aj nepodarilo vyhrať, určite nezúfaj a neprestávaj sa vzdelávať. Tvoje schopnosti sú koniec-koncov najväčšou výhrou, preto dnes na Learn2code nájdeš už viac ako 80 online kurzov!
🔥 SÚŤAŽ 🔥 #studujonline s Skillmea
Novinky
26.04.2019
Skillmea

🔥 SÚŤAŽ 🔥 #studujonline s Skillmea

Súťaž #studujonline s Learn2CodePatríš k tým, ktorým na učenie nezostáva veľa času, a preto využívaš každú voľnú minútu? Študuješ v MHD, v práci, pri bazéne či pri žehlení? Chceme to vidieť! Odfoť sa alebo urob video, ako študuješ a vyhraj iPad alebo predplatné Learn2Code online kurzov! Čítaj ďalej a dozvieš sa presné podmienky účasti v súťaži. Aké sú podmienky?1. Urob fotku alebo video, kde sa učíš  2. Postuj príspevok na Instagram alebo Facebook s hashtagom #studujonline  3. V príspevku tagni našu Facebook fanpage alebo instagramový profil Learn2Code Príspevky môžeš posielať do 15.05.2019, pričom vyhráva ten, ktorý získa najviac interakcií. Like. Share. Comment. Všetko sa počíta. A nezabudni. Čím netradičnejšie miesto alebo aktivitu si pre učenie nájdeš, tým viac ľudí svojím príspevkom zaujmeš. Výsledky zverejníme na Facebooku a Instagrame v piatok 17. mája 2019. Aké ceny môžeš vyhrať?1.  iPad + ročné predplatné online kurzov  2.  ročné predplatné online kurzov 3.  3-mesačné predplatné online kurzov[Image] Odteraz už výhovorky neplatia. Dokáž, že študovať sa dá všade a za každých okolností. Tešíme sa na tvoje kreatívne príspevky a každému držíme palce!

Nezmeškaj info o nových kurzoch a špeciálnych ponukách