7 nových funkcií, na ktoré by ste si mali v bootstrape dávať pozor 5

7 nových funkcií, na ktoré by ste si mali v bootstrape dávať pozor 5

Bootstrap 5 prišiel s veľkými zmenami, vrátane poklesu podpory programu Internet Explorer (IE) a závislosti od jQuery. Bootstrap, vyvinutý spoločnosťou Twitter, je najpopulárnejším systémom CSS na svete. Rámec používateľského rozhrania s otvoreným zdrojovým kódom sa zameriava na samotné určovanie polohy do budúcnosti a vďaka tomu došlo vo verzii v5 k prevratným zmenám.





Drop Bootstrap pre IE z neho urobil prvý nástroj na vývoj webových aplikácií, ktorý to dokázal. Tento krok prichádza s tým, ako sa podiel na trhu programu Internet Explorer stále zmenšuje, čo predstavuje menej ako 3% všetkých webových prehliadačov.





Pokračujte v čítaní a zistite, aké ďalšie vylepšenia boli v nástroji Bootstrap vykonané a ako na vás pôsobia.





1. Podpora jQuery

Bootstrap už nebude používať knižnicu jQuery. Vývojový tím namiesto toho vylepšil knižnicu JavaScript, aby vykonal túto zmenu. Závislosť jQuery nebola v programe Bootstrap nevyhnutne zlá.

Zavedenie jQuery v skutočnosti radikálne zmenilo spôsob použitia JavaScriptu. Zjednodušilo to písanie úloh v JavaScripte, ktoré by inak zabrali veľa riadkov kódu.



Súvisiace: Zistite, ako vytvoriť prvok v jQuery

Napriek tomu všetkému sa tím rozhodol z toho skoncovať. To prináša výhodu menších zdrojových súborov a vyšších časov načítania stránky. Bola to veľmi potrebná zmena, vďaka ktorej Bootstrap získa štýl priaznivejší pre budúcnosť.





Veľkosť zdrojového súboru sa zmenšila o 85 kB zmenšeného JavaScriptu, čo je kľúčové, pretože spoločnosť Google považuje časy načítania stránok pre mobilné weby za faktor hodnotenia.

Aj keď v Bootstrap 5 už nie je potrebné používať jQuery, stále ho môžete používať, ak chcete. Je tiež potrebné poznamenať, že všetky doplnky JavaScript sú k dispozícii.





2. Vlastné vlastnosti CSS

Zrušením podpory programu Internet Explorer je možné použiť vlastné vlastnosti (premenné) CSS. IE nepodporuje vlastné vlastnosti - len jeden z dôvodov, prečo dlho zdržiaval webových vývojárov.

Vlastné vlastnosti CSS robia CSS flexibilnejším a programovateľnejším. Premenné CSS majú predponu -bs aby sa zabránilo konfliktu s CSS tretej strany.

K dispozícii sú dva typy premenných: koreňové premenné a komponentné premenné.

K koreňovým premenným je možné pristupovať kdekoľvek, kde je načítaný Bootstrap CSS. Tieto premenné sa nachádzajú v súbore _root.scss súbor a sú súčasťou kompilovaných dist súborov.

Komponentné premenné sa používajú ako lokálne premenné v konkrétnych komponentoch. Pomáhajú predchádzať náhodnému dedeniu štýlov v komponentoch, ako sú vnorené tabuľky.

3. Vylepšený mriežkový systém

Pretože pri aktualizácii z verzie 3 na 4 došlo k problémom, Bootstrap 5 si tentoraz ponecháva väčšinu systému a namiesto toho, aby ho úplne zmenil, stavia na existujúcom systéme. Niektoré zo zmien sú tieto:

  • Odkvapová trieda ( .chlapci ) bol nahradený pomôckou ( .g* ) podobne ako okraj a vypchávky
  • Zahrnuté sú aj triedy vertikálnych rozstupov
  • Stĺpce už nie sú predvolené poloha: relatívna

4. Vylepšená dokumentácia

Dokumentácia bola vylepšená o ďalšie informácie, najmä pokiaľ ide o prispôsobenie. Bežným problémom bolo, že na mnohých weboch, ktoré používajú nástroj Bootstrap, ste mohli okamžite zistiť, že používa nástroj Bootstrap. Bootstrap 5 teraz prichádza s novým vzhľadom a dojmom a s lepším prispôsobením.

Teraz je k dispozícii väčšia flexibilita pri prispôsobovaní vašich tém tak, aby nie všetky stránky alebo aplikácie vyzerali rovnako. Tematická stránka v4 bola v skutočnosti rozšírená o ďalší obsah a útržky kódu, ktoré je možné postaviť na súboroch Sass (populárny predprocesor CSS). Štartovací projekt NPM môžete nájsť aj na platforme GitHub, ktorá je k dispozícii ako úložisko šablón.

Paleta farieb bola tiež rozšírená vo verzii 5. Rozšírený vstavaný systém farieb znamená, že môžete svoje farbenie jednoducho upravovať bez toho, aby ste museli opustiť svoju základňu kódov. Tiež sa vykonalo viac práce na zlepšení farebného kontrastu vrátane pridania metrík farebného kontrastu do farebných dokumentov Bootstrap.

5. Vylepšené ovládanie formulárov

Bootstrap vylepšil ovládanie formulárov, skupiny vstupov a ďalšie.

Vo v4 Bootstrap používal okrem predvolených nastavení poskytovaných každým prehliadačom aj vlastné ovládacie prvky formulárov. Vo verzii 5 sú všetky teraz prispôsobené. Všetky prepínače, začiarkavacie políčka, súbory, rozsah a ďalšie položky, ktoré im poskytnú rovnaký vzhľad a správanie v rôznych prehliadačoch.

Nové ovládacie prvky formulárov už neobsahujú zbytočné farebné označovanie, ale namiesto toho sa zameriavajú na štandardné a logické funkcie návrhu.

6. Bootstrap 5 Adds Utilities API

Po nových knižniciach CSS, ako je Tailwind CSS, Bootstrap teraz tiež pridáva knižnicu nástrojov. Tím bootstrap hovorí, že sú radi, že vidia, ako ostatní vývojári spochybňujú spôsob, akým sme za posledných desať rokov vytvorili web.

Pomôcky naberajú na obrátkach v vývojárskej komunite a tím bootstrap to vzal na vedomie. Tím predtým pridal rezervu na nástroje vo v4 pomocou global $ enable-* triedy. Vo v5 sa zmenili na prístup API a nový jazyk a syntax v Sass. To vám poskytne možnosť vytvárať nové nástroje, pričom budete môcť stále odstraňovať alebo upravovať uvedené predvolené nastavenia.

Aby sa zaistila lepšia organizácia, niektoré nástroje, ktoré boli vo verzii 4, boli presunuté do sekcie Pomocníci.

7. Nová knižnica ikon Bootstrap

Bootstrap sa teraz môže pochváliť vlastnou open source knižnicou ikon SVG s viac ako 1 300 ikonami. Je vyrobený na mieru pre komponenty rámca, ale stále s nimi môžete pracovať na akomkoľvek projekte.

Vzhľadom na to, že ide o obrázky SVG, je možné ich rýchlo škálovať a je ich možné implementovať mnohými spôsobmi a tiež je možné ich štylizovať pomocou CSS.

Ikony môžete nainštalovať pomocou nad úrovňou mora:

$ npm i bootstrap-icons

Nainštalujte Bootstrap 5

Môžete ísť na Oficiálna stránka na stiahnutie Bootstrap 5 ak ho chcete nainštalovať. Ak chcete držať krok s najnovším vývojovým vydaním, ktoré môžete použiť nad úrovňou mora ťahať to:

$ npm i bootstrap@next

V čase tohto písania je framework vo svojej verzii Beta 3. To znamená, že používanie softvéru je bezpečné, ale stále sa vyvíja. Neváhajte poskytnúť tímu spätnú väzbu a prispieť akýmkoľvek potrebným prínosom.

zdieľam zdieľam Tweet E -mail Úvod do webových komponentov a architektúry založenej na komponentoch

Pozrime sa na bežné webové komponenty a zistíme, prečo sú užitočné.

Čítajte ďalej
Súvisiace témy
  • Programovanie
  • Vývoj webových aplikácií
  • JavaScript
  • CSS
O autorovi Jerome Davidson(22 publikovaných článkov)

Jerome je spisovateľ štábu v MakeUseOf. Venuje sa článkom o programovaní a Linuxe. Je tiež nadšencom kryptomien a vždy má prehľad o kryptospracujúcom priemysle.

Viac od Jerome Davidsona

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

ako rozobrať ps4 slim
Kliknutím sem sa prihlásite na odber