Bootstrap 4 vs. 5 - mi változott?

Új verziót kapott a Bootstrap, a legnépszerűbb CSS keretrendszer. A legújabb 5-ös verziója hivatalosan 2021. május 5.-én jelent meg, az előző, 4.6-os verziót pedig 2018. január 18.-án véglegesítették. Az 5-ös verzió sok újdonságot tartogat a webfejlesztők számára, nézzük miket.

 

Újdonságok röviden, mi változott?

 

Vanilla JavaScript a jQuery helyett

A Bootstrap a megjelenése óta a jQuery-t használta, de az 5-ös verzió már vanilla JavaScript-et használ. Ennek köszönhetően az új JavaScript keretrendszerek, mint React és Vue.js, sokkal könnyedebben működnek együtt Bootstrap-pel.

 

Megszűnt az IE 10 és 11 támogatás

A Bootstrap csapata úgy döntött, hogy megszünteti az Internet Explorer támogatását a kis piaci részesedés miatt, valamint azért, mert a böngésző nem támogatja a legújabb, modern JavaScript és CSS szabványokat. Így modern funkciókat tud biztosítani a felhasználók számára, mint CSS változók, gyorsabb JavaScript és továbbfejlesztett API-kat.

 

Ikonok és betűtípusok

Az ikonok a webhelyek és alkalmazások felhasználói felületének egyik fontos része. A Bootstrap 4-ben külső fájlokat kell használnunk, FontAwesome-ot, flaticons-t vagy saját ikonokat. A Bootstrap 5 saját beépített SVG-alapú ikonokat kapott. Ezeket az ikonokat a Figma fejlesztette ki, SVG formátumban lett exportálva, és nagyszerű megjelenésűek.

 

Új osztályok, új színek, új grid rendszer

A Bootstrap 5 megtartja a Bootstrap 4-ben bevezetett struktúrát, és új osztályokkal egészíti ki azt. Íme az újdonságok:

• Új xxl grid szint (>1400px)
• Gutter osztályokat .g* hozzáadásával használhatjuk
• Új rácsrendszer és egyedi vezérlők az űrlapokhoz
• Függőleges távolság osztályok
• Az oszlopok ezentúl nem kapnak alapvetően relatív pozíciót

Sok CSS keretrendszer, mint például a Tailwind, széles színpalettát kínál, amelyet a fejlesztők nagyon kedvelnek. A Bootstrap 5 kibővült színpalettát kapott, több szín és több árnyalatot használhatunk, például $100-blue, $200-blue, $300-blue, …, $blue-900. Ezeket a színeket felülírhatjuk saját színpalettánkkal, ha úgy tartja kedvünk.

A Bootstrap 5 bevezette a CSS Grid kísérleti verzióját, amely helyettesíti az alapértelmezett grid rendszert. Használata nem kötelező, de akinek tetszik, annak lehetősége van rá.

 

Melyiket válasszam? Melyik a jobb?

Néhány ok, amiért ragaszkodhatunk a Bootstrap 4-hez jelenlegi projektekben:

• A projekt már használja a Bootstrap 4-es verzióját.
• A projekt támogatást igényel az IE 10 és az IE 11 számára.
• A projekt jQuery-t használ, és nincs szüksége a Bootstrap 5 új funkcióira.

És azok az okok, amelyek miatt ajánlott a Bootstrap 5 használata új projektekben:

• A React vagy a Vue.js mellett a Bootstrap jQuery mentes használata.
• Bootstrap új szolgáltatásai, például a kibővített színpalettát vagy a továbbfejlesztett grid rendszert stb.