Bootstrap 5.3.0: izgalmas új funkciók feloldása

A Bootstrap egy népszerű front-end keretrendszer, amely forradalmasította a webfejlesztést. A legújabb kiadásával, a Bootstrap 5.3.0-val a keretrendszer rengeteg izgalmas új funkciót vezetett be és olyan fejlesztések, amelyek lehetővé teszik lenyűgöző, reszponzív, funkciókban gazdag webhelyek és alkalmazások létrehozását.

Sötét mód kapcsolója

Az egyik figyelemre méltó Bootstrap 5.3.0 kiegészítések egy kapcsoló a sötét mód. Ezzel a kapcsolóval a webhely felhasználói könnyedén válthatnak a világos és sötét módok között, megkönnyítve a webhely vagy az alkalmazás zökkenőmentes használatát különféle fényviszonyok között.

A funkció használatához egyszerűen adja hozzá a data-bs-toggle="dark-mode" attribútumot bármely gombhoz vagy linkelemhez.

Íme egy példa:

<gombtípus="gomb"osztály="btn btn-primary"data-bs-toggle="sötét mód">
 Sötét mód váltása
gomb>

Font Scale Utilities

A Bootstrap 5.3.0 bevezeti a betűméretarányos segédprogramokat, amelyek segítségével gyorsan beállíthatja a szöveg méretét előre meghatározott léptékek alapján, anélkül, hogy ehhez szükség lenne

saját maga válasszon konkrét betűtípusértékeket.

Ezeket a segédprogramokat más Bootstrap tipográfiai osztályokkal kombinálva is használhatja, hogy méretezhető és konzisztens tipográfiát érjen el webhelyén vagy alkalmazásában.

Íme néhány példa a font skála segédprogramok használatára:

<posztály="fs-1">Ez a legnagyobb betűméretp>
<posztály="fs-2">Ez egy kicsit kisebb betűméretp>
<posztály="fs-3">Ez egy közepes betűméretp>
<posztály="fs-4">Ez egy kis betűméretp>
<posztály="fs-5">Ez a legkisebb betűméretp>

Gutter Utilities

A Bootstrap 5.3.0 másik újdonsága az ereszcsatorna segédprogramok bevezetése. Ezek a segédprogramok egyszerűvé teszik ereszcsatornák hozzáadását az oszlopok közé a Bootstrap rácselrendezésben anélkül, hogy egyéni CSS-t kellene írnia.

Íme egy példa az ereszcsatorna segédprogramok használatára:

<divosztály="sor gx-3">
<divosztály="col">1. oszlopdiv>
<divosztály="col">2. oszlopdiv>
div>

Ez a példa a gx-3 osztályba 3 egységnyi (vagy 1,5 rem) ereszcsatorna hozzáadásához a két oszlop közé.

Frissített űrlapvezérlők

A űrlapvezérlők a Bootstrapben A konzisztencia és a használhatóság javítása érdekében frissítettük az 5.3.0-s verziót. Az új űrlapvezérlők a jelölőnégyzetek, választógombok és jelölőnégyzetek frissített stílusait, valamint továbbfejlesztett ellenőrzési visszajelzéseket tartalmaznak.

Jelölőnégyzetek és rádiógombok

A Bootstrap 5.3.0 új stílusokat vezet be a jelölőnégyzetekhez és a rádiógombokhoz, amelyek megkönnyítik a használatukat és elérhetőbbé teszik őket. Az új dizájn nagyobb találati területeket és továbbfejlesztett fókuszjelzőket tartalmaz, így könnyebben kezelheti ezeket a bemeneteket.

Íme egy példa az új jelölőnégyzet stílusok használatára:

<divosztály="űrlapellenőrzés">
<bemenetosztály="form-check-input"típus="jelölőnégyzet"érték=""id="check1">
<címkeosztály="űrlapellenőrző címke"számára="check1">Alapértelmezett jelölőnégyzetcímke>
div>

És itt van egy példa arra, hogyan használhatja az új választógomb stílusokat:

<divosztály="űrlapellenőrzés">
<bemenetosztály="form-check-input"típus="rádió"név="exampleRadios"id="rádió1"érték="1.opció">
<címkeosztály="űrlapellenőrző címke"számára="rádió1"> 1.opció címke>
div>

Figyelje meg, hogyan használja ez a jelölés a .form-check-input osztály magának a bemeneti elemnek a stílusához, és a .form-check-label osztályt a címke stílusához.

Válassza a Dobozok lehetőséget

A Bootstrap 5.3.0-s verziójában a jelölőnégyzetek is frissültek új stílusokkal a jobb konzisztencia és használhatóság érdekében. Az új választódobozstílusok nagyobb találati területeket és továbbfejlesztett fókuszjelzőket tartalmaznak, így könnyebben kezelheti ezeket a bemeneteket.

Íme egy példa arra, hogyan használhatja az új kijelölőmezőstílusokat:

<válassza kiosztály="form-select"ária-címke="Alapértelmezett kiválasztási példa">
<választási lehetőségkiválasztott>Nyissa meg ezt a kiválasztási menütválasztási lehetőség>
<választási lehetőségérték="1">Egyválasztási lehetőség>
<választási lehetőségérték="2">Kettőválasztási lehetőség>
<választási lehetőségérték="3">Háromválasztási lehetőség>
válassza ki>

Figyelje meg, hogyan használhatja a .form-select osztályt magának a kijelölőmezőnek a stílusához.

Érvényesítési visszajelzés

A Bootstrap 5.3.0 új érvényesítési visszacsatolási stílusokat is bevezet az űrlapvezérlőkhöz. Ezek a stílusok megkönnyítik a vizuális visszajelzést a webhely felhasználóinak, ha helytelenül töltenek ki egy űrlapot.

Íme egy példa az új érvényesítési stílusok használatára:

<divosztály="forma-csoport">
<címkeszámára="exampleInputPassword1">Jelszócímke>
<bemenettípus="Jelszó"osztály="form-control is-invalid"id="exampleInputPassword1"helykitöltő="Jelszó"kívánt>
<divosztály="érvénytelen visszajelzés"> Kérjük, adjon meg egy érvényes jelszót. div>
div>

Figyeld meg, hogyan a .érvénytelen osztály azt jelzi, hogy a beviteli mező érvénytelen, és a .invalid-feedback osztály üzenetet jelenít meg a felhasználónak.

Ezekkel az új stílusokkal minden eddiginél egyszerűbb elérhető és egységes űrlapokat létrehozni webhelyéhez vagy alkalmazásához.

Izgalmas fejlesztések a Bootstrap 5.3.0-ban

A Bootstrap 5.3.0 a népszerű CSS-keretrendszer jelentős frissítése, amely számos új funkciót és fejlesztést hoz a táblázatba. A sötét mód kapcsolójától a betűméret- és csatorna-segédprogramokig rengeteg új eszköz áll az Ön rendelkezésére, amelyek segítenek jobb webhelyek és alkalmazások létrehozásában.