Zpět na blog
Novinky

Co je nového v Bootstrap 5

Lubo Herko
02.07.2020
9 minut čtení
Co je nového v Bootstrap 5
Od poloviny června máme přístup k první alpha verzi Bootstrap 5. Kromě nové verze loga v sexy závorkách {B} se dočkáme i obrovského množství vylepšení na všech frontách. Už samotná dokumentace je ukázkou vylepšeného vzhledu a funkcionalit. Pokud se neumíš dočkat a chceš nový Bootstrap vyzkoušet ASAP, začni tady. Je to stále Alpha verze, nedoporučuji ji proto nasadit do žádného projektu. Než dostaneme první betaverzi, může projít změnami, které Ti vyrobí více práce než pomoci.
Toto je "sestřih" nejvýraznějších změn, které jsme popsali přesně pro Tebe. Na míru.

JavaScript

Už žádná podpora pro jQuery, i když..

Pro některé killer feature, pro jiné nic podstatného. Nový Bootstrap 5 nebude již obsahovat jQuery jako jednu ze svých závislostí (i přesto, že jQuery „asi“ stále žije a v dubnu letošního roku jsme dostali novou verzi jQuery – 3.5). Víme to už dávno, už jsme se na to jen těšili. Ještě nemáme oficiální konečná čísla, ale očekáváme, že Bootstrap díky této zásadní změně ztratí jak na kilobajtech, tak na milisekundách. Pokud si rozumíme 😉
Pokud však stále jQuery ve svém projektu potřebuješ, Bootstrap o tom bude vědět a všechny komponenty přidá k modulům jQuery. V zásadě to znamená, že stále bude možné inicializovat například Tooltip komponent takovým (starým) způsobem (v případě, že Bootstrap detekuje přítomnost jQuery):
$('[data-toggle="tooltip"]').tooltip();

Button plugin

Změnami projde i state-management tlačítek. Ty využíváme například i jako indikátory ZAP/VYP při různých funkcionalitách našich aplikací. Ve starších verzích Bootstrap stav tlačítka řešil JavaScript. Bootstrap 5 se snaží state-management řešit v co nejvyšší míře dostupnými funkcionalitami a elementy HTML a CSS. Výsledkem tak je manažování stavu tlačítka pomocí checkbox a radio elementů. Naše ZAP/VYP tlačítka tak budou o něco spolehlivější mezi různými platformami.

CSS

CSS proměnné

S koncem podpory pro Internet Explorer přicházejí i nové možnosti. Jednou z nich jsou i CSS proměnné. Ty jsme spatřili již v předchozí verzi (root variables), avšak ne v takovém rozsahu jako ve verzi 5 – kde se css proměnné dostaly už i do jednotlivých komponent. Například do tabulek:
.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 proměnných je jejich používání bez nutnosti zkompilování SASS kódu do CSS. Takto bude možné hodnoty některých proměnných měnit v přímo Inspectoru prohlížeče, což urychlí práci například při prototypování.

V Bootstrap 5 stále zůstane možnost definice proměnných v SASS (_variables.scss) souborech, tak, jak jsme to dělali dosud. Osobně bych neočekával kompletní přechod ze SASS proměnných do CSS proměnných. SASS má stále svou nenahraditelnou roli při vytváření proměnných pomocí mapování, proto očekávám, že budeme mít k dispozici kombinaci SASS proměnných s CSS proměnnými iv budoucnosti.

Vylepšený grid

Získáme nový grid-tier pro obrazovky o šířce větší než 1400px - .col-xxl-.
Rovněž mezery mezi jednotlivými sloupci gridu budou nově "ohebnější". Získáme novou css utilitu g pro naše .row. S gutter hodnotami takto bude možné pracovat podobně jako s margin a padding hodnotami, na co jsme si již zvykli:
.g-2
.gx-2
.gy-2
.g-lg-2
.g-0

Formuláře

Od verze 4 jsme mohli ve svých aplikacích používat checkbox, radio a file elementy dvěma způsoby:
  1. Buď jsme použili původní, systémový vzhled (poskytnutý browserem),
  2. nebo jsme použili nový vzhled (custom-checkbox, custom-radio).
Verze 5 bude obsahovat už jen nový vzhled těchto prvků. Formuláře tak budou vypadat rovněž v každém prohlížeči a operačním systému a přizpůsobení vzhledu těchto komponentů bude stejně jednodušší.

Rovněž bude odstraněn i potřebný .form-group wrapper. Nové formuláře již budou obsahovat jen jednotlivé form elementy, bez tohoto DIV elementu. Hurá! Méně 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 potřebný pouze pro custom elementy (.form-select, .form-check, .form-file) a také .form-group.

Utilities API

Utility jsou velmi užitečné CSS třídy, kterými obvykle měníme parametry rámování, barev, způsobů zobrazení, stínování a různých velikostí (width, height, padding, margin,...). V praxi se občas stává, že se nevejdeme do předdefinovaných utilit, které jsou součástí Bootstrap-u. Proto jsme někdy vytvářeli vlastní třídy. Například pokud nastavujeme šířku nějakého elementu, máme k dispozici takové css třídy:
.w-25   /* 25% */
.w-50   /* 50% */
.w-75   /* 75% */
.w-100  /* 100% */
.w-auto /* auto */

Pokud jsme potřebovali 33% width, 90% width, nebo jiné hodnoty, vytvořili jsme vlastní CSS třídy, udělali override na $sizes mapu v nějakém vlastním souboru, nebo jsme nebodaj editovali přímo $sizes mapu v souboru proměnných _variables.scss.

Ve verzi Bootstrap 5 máme k dispozici čistší a užitečnější SASS nástroj, jak modifikovat stávající, nebo přidat nové utility do našeho projektu, tématu nebo pluginu pro 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ýsledkem takového kódu budou nové css třídy utilit:
.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šení

Ikony

S alpha verzí Bootstrap 5 přichází také pátá alpha verze Bootstrap Icons. Je to sada více než 1000 ikon, které jsou nadesignovány tak, aby parádně ladily s Bootstrapem. Nifty funkcionalita je také SVG sprite, která nám umožňuje vytvořit vlastní mapu SVG ikon a efektně ji používat v projektu, aniž bychom kód špinili samotným SVG zdrojovým kódem.
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

Osobně jsem velkým fanouškem Fontawesome ikon, které obsahují kromě enormně většího množství ikon a jejich variant i velmi užitečné způsoby integrace do projektů. Fontawesome nejsou však dostupné zdarma, proto možná v dalším projektu i my v learn2code zvážíme integraci s Bootstrap ikonami.

Dokumentace

Už na první pohled je vidět, že dokumentace prošla změnami. Ty však nejsou jen vizuální, ale vylepšen je i samotný obsah. Orientace mezi sekcemi je díky novému postrannímu jménu rychlejší.
Jednotlivé sekce obsahují také jakési "overview", které postupně přibývají do každé hlavní sekce dokumentace. I tyto změny urychlují navigaci v dokumentaci a hledání požadované informace je takto rychlejší.

Barvy

Přibyly také nové barevné odstíny a vylepšen bude také jejich kontrastní poměr.

Závěr

Tento text není a ani nechtěl být kompletním diffem verze 4 s novou verzí 5. Mnohem více novinek najdeš ve stále rostoucí dokumentaci k Bootstrap 5. Pokud jsem na něco důležitého zapomněl, klidně se ozvi v komentáři.
Lubo Herko
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 tě zajímat

4 nové online kurzy na Learn2Code
Novinky
03.09.2019
Skillmea tím

4 nové online kurzy na Learn2Code

Tento týden ti na Learn2Code přinášíme 4 nové kurzy, ve kterých jsme dali prostor několika novým tématům. Jsou to online kurzy zaměřené především na soft skills, zpestřením je určitě šachový kurz se slovenskou jedničkou Jánem Markošem. Zaujalo? Přečti si krátké představení kurzů v článku. Prezentační dovednosti - základyPokud i ty míváš roztřesená kolena vždy, když máš vystoupit na pódium nebo prezentovat svůj nápad před skupinou lidí, měl bys zaměřit pozornost na tento kurz. Nikdo jako řečník z nebe nespadl, i ty se máš možnost osvojit si a zdokonalit své prezentační dovednosti tak, abys při vystupování působil/a sebevědomě. Co máš dělat při vystupování s rukama, kam se dívat a jak pracovat s publikem ti vysvětlí Andrej Mažáry - lídr Slovenských Toastmasters (globální organizace věnující se řečnictví) a středoevropský šampion v řečnických improvizacích.   Jak přemýšlet při fotografováníV nabídce máme mnoho kurzů zaměřených na technickou stránku fotografie. Vytvořit dobrou fotku však není jen věcí kompozice a techniky, fotka by měla být nositelem příběhu, emoce, kterou chce fotograf zachytit. Učit se budeš od tří úspěšných a oceňovaných fotografů, kteří se věnují především dokumentární a reportážní fotografii. Každý z nich ti poskytne vlastní pohled na postupy a techniky, které při focení používají, jak pracují s objektem, s různými zdroji světla, prozradí ti kompoziční tipy a nápady. Kurz je určen tobě, máš-li už zvládnuté základy práce s fotoaparátem, možná uvažuješ nad focením jako svým živobytím a hlavně chceš tvořit fotky, které budou výjimečné.  Kurz podnikání - jak začítKurzem tě bude provázet osm zakladatelů a CEO úspěšných slovenských firem. Tím myslíme značky jako Tuli, CURAPROX, daren & curtis, VISIBILITY, Be Cool a další. V tutoriálech se s tebou podělí o své zkušenosti, Know-how a zodpoví důležité otázky, nad kterými možná uvažuješ i ty. Jak myšlenku přeměnit na realitu, nápad na fungující byznys? Jak umíš odhadnout jeho úspěch? Jakou roli hrají brand, firemní kultura či hodnoty firmy? Vysvětlí ti i plusy a minusy partnerství v podnikání, jak a kdy přijímat nové zaměstnance a co dělat, kdyby to celé nevyšlo. Šachy (Coming soon)Dlouholetá šachová jednička na Slovensku Ján Markoš odhaluje své šachové mistrovství. Uč se od něj o šachových strategiích, taktikách či síle jednotlivých figur. Objevíš strategické a taktické postupy, o kterých jsi možná dosud nevěděl. Kurz je určen mírně a středně pokročilým šachistou. Ať už rozehráváš šachové partie online nebo tváří v tvář, tento kurz tě dostane na vyšší úroveň. Našel jsi kurz, který tě zaujal a bude pro tebe přínosným? Pokud máš případně návrh na další témata kurzů, které bys v Learn2Code uvítal, napiš do komentáře.
Vyhlášení výsledků soutěže #studujonline je tady!
Novinky
17.05.2019
Skillmea tím

Vyhlášení výsledků soutěže #studujonline je tady!

I ty jsi nám v uplynulých třech týdnech poslal kreativní příspěvek, jak studuješ některý z našich kurzů? Čti tedy dál a možná se najdeš mezi výherci! V první řadě děkujeme za všechny vtipné a kreativní příspěvky, které dokázaly, že studovat lze opravdu odkudkoli. Zároveň nás překvapilo, že někteří chtěli vyhrát až tak moc, že se uchýlili k nečestným praktikám získávání interakcí. Mnozí účastníci soutěže si nakoupili "fake lajky" z Asie a jiných exotických destinací. Považujeme to za nefér. A přestože jsme měli v pravidlech soutěže uvedeno, že vyhraje post s největším počtem interakcí, rozhodli jsme se to změnit. Určitě je to i naše chyba, přiznáváme, poučili jsme se. V budoucnu už vítěze nemůžeme hledat zmanipulovatelnou cestou. O konečném pořadí v soutěži #studujonline jsme rozhodli interním hlasováním, o vítězích tak rozhodl náš tým Learn2Code a naši lektoři. Kostky jsou vrženy, pojďme na výsledky! 1. místo: iPad + roční předplatné online kurzů 2. místo: roční předplatné online kurzů 3. místo: 3-měsíční předplatné online kurzů    Pokud jsi mezi výherci, gratulujeme a ještě dnes ti napíšeme zprávu na Instagramu a dohodneme se na převzetí výhry. Když ses zapojil/a, ceníme si tvou snahu a děkujeme za příspěvek. Pokud se ti i nepodařilo vyhrát, určitě nezoufej a nepřestávej se vzdělávat. Tvoje schopnosti jsou koneckonců největší výhrou, proto dnes na Learn2code najdeš již více než 80 online kurzů!
🔥 SOUTĚŽ 🔥 #studujonline s Learn2Code
Novinky
26.04.2019
Skillmea tím

🔥 SOUTĚŽ 🔥 #studujonline s Learn2Code

Soutěž #studujonline s Learn2CodePatříš k těm, kterým na učení nezbývá mnoho času, a proto využíváš každou volnou minutu? Studuješ v MHD, v práci, u bazénu či při žehlení? Chceme to vidět! Vyfoť se nebo udělej video, jak studuješ a vyhraj iPad nebo předplatné Learn2Code online kurzů! Čti dál a dozvíš se přesné podmínky účasti v soutěži. Jaké jsou podmínky?1. Udělej fotku nebo video, kde se učíš 2. Postuj příspěvek na Instagram nebo Facebook s hashtagem #studujonline 3. V příspěvku tagni naši Facebook fanpage nebo instagramový profil Learn2Code Příspěvky můžeš posílat do 15.05.2019, přičemž vyhrává ten, který získá nejvíce interakcí. Like. Share. Comment. Všechno se počítá. A nezapomeň. Čím netradičnější místo nebo aktivitu si pro učení najdeš, tím více lidí svým příspěvkem zaujmeš. Výsledky zveřejníme na Facebooku a Instagramu v pátek 17. května 2019. Jaké ceny můžeš vyhrát?1. iPad + roční předplatné online kurzů 2. roční předplatné online kurzů 3. 3-měsíční předplatné online kurzů[Image] Odteď už výmluvy neplatí. Dokaž, že studovat lze všude a za každých okolností. Těšíme se na tvé kreativní příspěvky a každému držíme palce!

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