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ábaVessü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
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 DavidsonIratkozzon 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 cdmaFeliratkozáshoz kattintson ide