7 új funkció, amire figyelni kell a Bootstrap alkalmazásban 5

7 új funkció, amire figyelni kell a Bootstrap alkalmazásban 5

A Bootstrap 5 jelentős változásokat hozott, beleértve az Internet Explorer (IE) támogatás és a jQuery függőség csökkenését. A Twitter által kifejlesztett Bootstrap a világ legnépszerűbb CSS keretrendszere. A nyílt forráskódú felhasználói felület keretrendszere a jövőre nézve pozícionálja magát, és ennek eredményeként úttörő változásokat hajtott végre a v5-ös verzióban.





A Bootstrap cseppje az IE számára az első webfejlesztő eszköz, amely ezt teszi. A lépés az Internet Explorer piaci részesedésének tovább csökkenése miatt következik be, amely az összes webböngésző kevesebb mint 3% -át teszi ki.





Olvassa el, hogy megtudja, milyen további fejlesztések történtek a Bootstrap -ban, és hogyan befolyásolják Önt.





1. jQuery támogatás

A Bootstrap többé nem használja a jQuery könyvtárat. A fejlesztőcsapat e változás végrehajtása érdekében továbbfejlesztette a JavaScript könyvtárat. A jQuery -függőség nem feltétlenül volt rossz a Bootstrap -ban.

Valójában a jQuery bevezetése gyökeresen megváltoztatta a JavaScript használatát. Leegyszerűsítette a JavaScript írási feladatait, amelyek egyébként sok sor kódot igényeltek volna.



Összefüggő: Ismerje meg, hogyan hozhat létre elemet a jQuery -ben

Mindezek ellenére a csapat úgy döntött, hogy felhagy ezzel. Ennek előnye a kisebb forrásfájlok és a nagyobb oldalbetöltési idő. Ez egy nagyon szükséges változás volt, amely a Bootstrap jövőbarátabb stílusát nyeri el.





A forrásfájl mérete 85 KB -os JavaScript csökkentésével könnyebb lett, és ez kulcsfontosságú, mivel a Google rangsoroló tényezőnek tekinti a mobilwebhelyek oldalbetöltési idejét.

Amennyire a jQuery használatára már nincs szükség a Bootstrap 5 alkalmazásban, továbbra is használhatja, ha szeretné. Érdemes megjegyezni azt is, hogy az összes JavaScript -bővítmény elérhető marad.





2. CSS egyéni tulajdonságok

Az Internet Explorer támogatás megszüntetésével egyéni CSS -tulajdonságok (változók) használhatók. Az IE nem támogatja az egyéni tulajdonságokat - csak egy ok, amiért sokáig visszatartotta a webfejlesztőket.

A CSS egyéni tulajdonságai rugalmasabbá és programozhatóbbá teszik a CSS -t. A CSS változók előtaggal vannak ellátva -bs hogy megakadályozzák a konfliktust harmadik fél CSS -jével.

Kétféle változó áll rendelkezésre: gyökérváltozók és összetevőváltozók.

A gyökérváltozók bárhol elérhetők, ahol a Bootstrap CSS betöltődik. Ezek a változók a _gyökér.scss fájlt, és az összeállított dist fájlok részét képezik.

Az összetevőváltozókat helyi változóként használják bizonyos összetevőkben. Segítenek elkerülni a stílusok véletlen öröklődését olyan összetevőkben, mint a beágyazott táblák.

3. Továbbfejlesztett rácsrendszer

Mivel a 3 -as verzióról 4 -re történő frissítés során felmerült néhány probléma, a Bootstrap 5 ezúttal megtartja a rendszer nagy részét, a meglévő rendszerre építve, ahelyett, hogy teljesen megváltoztatná azt. Néhány változás:

  • Ereszcsatorna osztály ( .fiúk ) egy segédprogramra cserélték ( .g* ) hasonlóan a margóhoz és a párnázáshoz
  • Függőleges távolságosztályok is szerepeltek
  • Az oszlopok alapértelmezett beállításai már nincsenek megadva pozíció: relatív

4. Továbbfejlesztett dokumentáció

A dokumentációt több információval bővítették, különösen a testreszabás tekintetében. Gyakori probléma volt, hogy sok Bootstrap -ot használó webhelyen azonnal felismerhető, hogy a Bootstrap -ot használja. A Bootstrap 5 most új megjelenéssel és érzékenységgel érkezik, és jobban testreszabható.

Mostantól nagyobb rugalmassággal szabhatja testre a témákat, hogy ne minden webhely vagy alkalmazás hasonlítson egymásra. A v4 témájú oldal valójában több tartalommal és kódrészletekkel bővült, amelyek a Sass (népszerű CSS előfeldolgozó) fájlokra épülnek. A kezdő npm projektet megtalálhatja a GitHub platformon is, amely sablontárként érhető el.

A színpaletta az 5. verzióban is kibővült. A kiterjesztett beépített színrendszer azt jelenti, hogy könnyedén formázhatja színeit anélkül, hogy el kellene hagynia a kódbázist. Több munkát is végeztek a színkontraszt javításán, beleértve a Bootstrap színdokumentumokban szereplő színkontraszt -mutatók hozzáadását.

5. Továbbfejlesztett űrlapvezérlők

A Bootstrap továbbfejlesztette az űrlapvezérlőket, a beviteli csoportokat és így tovább.

A v4 -ben a Bootstrap egyéni űrlapvezérlőket használt az egyes böngészők alapértelmezett beállításain kívül. A v5 -ben ezek mind személyre szabottak. Minden választógomb, jelölőnégyzet, fájl, tartomány és egyebek, hogy ugyanazt a megjelenést és viselkedést biztosítsák különböző böngészőkben.

Az új űrlapvezérlők már nem tartalmaznak felesleges színes jelöléseket, hanem a szabványos és logikai tervezési jellemzőkre összpontosítanak.

6. Bootstrap 5 Add Utilities API

Az új CSS -könyvtárakat, például a Tailwind CSS -t követően a Bootstrap most egy segédkönyvtárat is hozzáad. A bootstrap csapata azt mondja, hogy örömmel látják, hogy más fejlesztők milyen kihívást jelentenek az interneten az elmúlt évtizedben.

A segédprogramok lendületet vesznek a fejlesztői közösségben, és a bootstrap csapata észrevette. A csapat korábban hozzáadta a globális v4 -es segédprogramokat $ enable-* osztályok. A v5 -ben API -megközelítésre, új nyelvre és szintaxisra változtak a Sass -ban. Ez lehetővé teszi új segédprogramok létrehozását, miközben továbbra is eltávolíthatja vagy módosíthatja a megadott alapértelmezett értékeket.

A jobb szervezés érdekében néhány v4 -ben lévő segédprogramot áthelyeztek a Segítők szakaszba.

7. Új Bootstrap Icon Library

A Bootstrap saját nyílt forráskódú SVG ikonkönyvtárával büszkélkedhet, több mint 1300 ikonnal. Egyedi módon készült a keretrendszer összetevőihez, de továbbra is dolgozhat velük bármilyen projekten.

Tekintettel arra, hogy SVG képekről van szó, gyorsan méretezhetők és sokféleképpen megvalósíthatók, valamint CSS formátumúak.

Az ikonokat a segítségével telepítheti tengerszint felett:

$ npm i bootstrap-icons

Telepítse a Bootstrap 5 -öt

Mehet a Bootstrap 5 hivatalos letöltési oldal ha telepíteni szeretné. Ha lépést akart tartani a legújabb fejlesztési kiadással, amelyet használhat tengerszint felett húzni:

$ npm i bootstrap@next

Az írás idején a keretrendszer a Béta 3 verzióban van. Ez azt jelenti, hogy a szoftver használata biztonságos, de még fejlesztés alatt áll. Nyugodtan adjon visszajelzést a csapatnak, és tegyen meg minden szükséges hozzájárulást.

Részvény Részvény Csipog Email Bevezető a webes összetevőkbe és az összetevő-alapú architektúrába

Vessünk egy pillantást a gyakori webes összetevőkre, és nézzük meg, miért hasznosak.

Olvassa tovább
Kapcsolódó témák
  • Programozás
  • Webfejlesztés
  • JavaScript
  • CSS
A szerzőről Jerome Davidson(22 cikk megjelent)

Jerome a MakeUseOf munkatársa. A programozásról és a Linuxról szóló cikkekkel foglalkozik. Szintén kriptorajongó, és mindig figyelemmel kíséri a kriptoipart.

További Jerome Davidson

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

mint mint mobil gsm vagy cdma
Feliratkozáshoz kattintson ide