Home-theater-designers
Bootstrap 5 přišel s velkými změnami, včetně poklesu podpory aplikace Internet Explorer (IE) a závislosti na jQuery. Bootstrap, vyvinutý na Twitteru, je nejpopulárnějším frameworkem CSS na světě. Rámec uživatelského rozhraní s otevřeným zdrojovým kódem se dívá na umístění do budoucna a díky tomu došlo ve verzi v5 k průlomovým změnám.
Drop Bootstrap pro IE z něj udělal první nástroj pro vývoj webu, který to udělal. Tento krok přichází s tím, jak se podíl na trhu aplikace Internet Explorer stále zmenšuje, což představuje méně než 3% všech webových prohlížečů.
Pokračujte v čtení, abyste zjistili, jaká další vylepšení byla v nástroji Bootstrap provedena a jak na vás působí.
1. Podpora jQuery
Bootstrap již nebude používat knihovnu jQuery. Vývojový tým místo toho vylepšil knihovnu JavaScript, aby tuto změnu provedl. Závislost jQuery nebyla v Bootstrapu nutně špatná.
Ve skutečnosti zavedení jQuery radikálně změnilo způsob použití JavaScriptu. Zjednodušilo to psaní úkolů v JavaScriptu, které by jinak zabraly mnoho řádků kódu.
Příbuzný: Zjistěte, jak vytvořit prvek v jQuery
Navzdory tomu všemu se tým rozhodl skoncovat s tím. To přináší výhodu menších zdrojových souborů a vyšší doby načítání stránky. To byla velmi potřebná změna, díky které Bootstrap získá styl, který bude více orientován na budoucnost.
Velikost zdrojového souboru se zmenšila o 85 kB zmenšeného JavaScriptu, a to je klíčové, protože Google považuje doby načítání stránek pro mobilní weby za faktor hodnocení.
Jakkoli je v Bootstrap 5 používání jQuery již nepotřebné, můžete ho stále používat, pokud chcete. Je také třeba poznamenat, že všechny doplňky JavaScriptu zůstávají k dispozici.
2. Vlastní vlastnosti CSS
Ukončením podpory aplikace Internet Explorer lze použít vlastní vlastnosti (proměnné) CSS. IE nepodporuje vlastní vlastnosti - jen jeden z důvodů, proč dlouho zdržoval webové vývojáře.
Díky vlastním vlastnostem CSS je CSS flexibilnější a programovatelnější. Proměnné CSS mají předponu -bs aby se předešlo konfliktu s CSS třetích stran.
K dispozici jsou dva typy proměnných: kořenové proměnné a komponentní proměnné.
Kořenové proměnné jsou přístupné všude, kde je načten Bootstrap CSS. Tyto proměnné jsou umístěny v _root.scss soubor a jsou součástí kompilovaných dist souborů.
Proměnné komponent se používají jako lokální proměnné v konkrétních komponentách. Jsou užitečné, aby se zabránilo náhodnému dědění stylů v komponentách, jako jsou vnořené tabulky.
3. Vylepšený mřížkový systém
Protože při aktualizaci z verze 3 na 4 došlo k některým problémům, Bootstrap 5 si tentokrát ponechává většinu systému a staví na stávajícím systému, místo aby jej zcela změnil. Některé ze změn jsou:
- Okapová třída ( .chlapci ) byl nahrazen nástrojem ( .G* ) podobně jako okraj a polstrování
- Byly také zahrnuty třídy svislých mezer
- Sloupce již nejsou přednastaveny poloha: relativní
4. Vylepšená dokumentace
Dokumentace byla vylepšena o další informace, zejména pokud jde o přizpůsobení. Běžným problémem bylo, že u mnoha webů, které používají Bootstrap, můžete okamžitě zjistit, že používá Bootstrap. Bootstrap 5 nyní přichází s novým vzhledem a dojmem as lepším přizpůsobením.
Nyní existuje větší flexibilita pro přizpůsobení vašich témat tak, aby ne každý web nebo aplikace měly stejnou podobnost. Tematická stránka v4 byla ve skutečnosti rozšířena o další obsah a úryvky kódu pro navazování na soubory Sass (populární předprocesor CSS). Startovací projekt NPM můžete také najít na platformě GitHub, která je k dispozici jako úložiště šablon.
Paleta barev byla také rozšířena ve verzi 5. Rozšířený vestavěný systém barev znamená, že můžete snadno stylovat své barvení, aniž byste museli opustit základnu kódů. Bylo také vykonáno více práce na vylepšení kontrastu barev, včetně přidání metrik barevného kontrastu do barevných dokumentů Bootstrap.
5. Vylepšené ovládání formulářů
Bootstrap vylepšil ovládací prvky formuláře, skupiny vstupů a další.
Ve verzi 4 Bootstrap používal kromě výchozích hodnot poskytovaných každým prohlížečem také vlastní ovládací prvky formulářů. Ve verzi 5 jsou nyní všechny přizpůsobeny. Všechna přepínače, zaškrtávací políčka, soubory, rozsah a další, aby jim v různých prohlížečích poskytovaly stejný vzhled a chování.
Nové ovládací prvky formuláře již neobsahují zbytečné barevné značení, ale místo toho se zaměřují na standardní a logické funkce návrhu.
6. Bootstrap 5 Adds Utilities API
Po nových knihovnách CSS, jako je Tailwind CSS, Bootstrap nyní také přidává knihovnu nástrojů. Tým bootstrap říká, že jsou rádi, že vidí, jak ostatní vývojáři zpochybňují způsob, jakým jsme za posledních deset let stavěli na webu.
Pomůcky v rozvojové komunitě nabírají na obrátkách a tým bootstrapu si toho všiml. Tým dříve přidal ustanovení pro nástroje ve verzi 4 pomocí global $ povolit-* třídy. Ve verzi 5 se změnili na přístup API a nový jazyk a syntax v Sass. To vám poskytne možnost vytvářet nové nástroje a přitom budete moci odebrat nebo upravit dané výchozí hodnoty.
Aby se zajistila lepší organizace, některé nástroje, které byly ve verzi 4, byly přesunuty do sekce Pomocníci.
7. Nová knihovna ikon Bootstrap
Bootstrap se nyní může pochlubit vlastní open source knihovnou ikon SVG s více než 1300 ikonami. Je vyroben na zakázku pro komponenty rámce, ale stále s nimi můžete pracovat na jakémkoli projektu.
Vzhledem k tomu, že se jedná o obrázky SVG, lze je rychle škálovat a lze je implementovat mnoha způsoby a také stylizovat pomocí CSS.
Ikony můžete nainstalovat pomocí nad hladinou moře:
$ npm i bootstrap-iconsNainstalujte Bootstrap 5
Můžete jít do Oficiální stránka pro stažení Bootstrap 5 pokud si to přejete nainstalovat. Pokud jste chtěli držet krok s nejnovější vývojovou verzí, můžete použít nad hladinou moře vytáhnout to:
$ npm i bootstrap@next
V době psaní tohoto článku je framework ve své verzi Beta 3. To znamená, že používání softwaru je bezpečné, ale stále se vyvíjí. Neváhejte dát týmu zpětnou vazbu a přispět jakýmkoli nezbytným způsobem.
Podíl Podíl tweet E-mailem Úvod do webových komponent a architektury založené na komponentáchPojďme se podívat na běžné webové komponenty a zjistit, proč jsou užitečné.
Číst dále Související témata- Programování
- Vývoj webu
- JavaScript
- CSS
Jerome je spisovatelem štábu v MakeUseOf. Zabývá se články o programování a Linuxu. Je také nadšencem kryptoměn a vždy má přehled o krypto průmyslu.
Více od Jerome DavidsonaPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
modrá obrazovka pro správu paměti Windows 10Kliknutím sem se přihlásíte k odběru