Bootstrap 5.3.0: Odomknutie jeho vzrušujúcich nových funkcií

Bootstrap je populárny front-end rámec, ktorý spôsobil revolúciu vo vývoji webu. Vo svojom najnovšom vydaní, Bootstrap 5.3.0, framework zaviedol množstvo zaujímavých nových funkcií a vylepšenia, ktoré vám umožňujú vytvárať úžasné, responzívne webové stránky a aplikácie s množstvom funkcií.

Prepínač tmavého režimu

Jedna z pozoruhodných Bootstrap 5.3.0 doplnky je prepínač pre tmavý režim. Tento prepínač umožňuje používateľom vášho webu bez námahy prepínať medzi svetlým a tmavým režimom, čím uľahčuje bezproblémové používanie vášho webu alebo aplikácie v rôznych svetelných podmienkach.

Ak chcete použiť túto funkciu, jednoducho pridajte data-bs-toggle="dark-mode" atribút ľubovoľného tlačidla alebo prvku odkazu.

Tu je príklad:

<tlačidlotypu="tlačidlo"trieda="btn btn-primary"data-bs-toggle="tmavý režim">
 Prepnúť tmavý režim
tlačidlo>

Nástroje mierky písma

Bootstrap 5.3.0 predstavuje sadu nástrojov na zmenu mierky písma, ktoré vám umožňujú rýchlo upraviť veľkosť textu na základe preddefinovaných mierok bez toho, aby ste museli

vyberte konkrétne hodnoty písma sami.

Tieto pomôcky môžete použiť v kombinácii s inými triedami typografie Bootstrap, aby ste dosiahli škálovateľnú a konzistentnú typografiu v rámci vašej webovej lokality alebo aplikácie.

Tu je niekoľko príkladov toho, ako môžete použiť nástroje na zmenu mierky písma:

<ptrieda="fs-1">Toto je najväčšia veľkosť písmap>
<ptrieda="fs-2">Toto je o niečo menšia veľkosť písmap>
<ptrieda="fs-3">Toto je stredná veľkosť písmap>
<ptrieda="fs-4">Toto je malá veľkosť písmap>
<ptrieda="fs-5">Toto je najmenšia veľkosť písmap>

Odkvapové služby

Ďalším novým prírastkom v Bootstrap 5.3.0 je zavedenie odkvapových utilít. Tieto nástroje uľahčujú pridávanie odkvapov medzi stĺpce v rozložení mriežky Bootstrap bez toho, aby ste museli písať vlastné CSS.

Tu je príklad, ako môžete použiť odkvapové nástroje:

<divtrieda="riadok gx-3">
<divtrieda="col">Stĺpec 1div>
<divtrieda="col">2. stĺpecdiv>
div>

Tento príklad používa gx-3 triedy pridať žľab 3 jednotiek (alebo 1,5rem) medzi dva stĺpy.

Aktualizované ovládacie prvky formulára

The ovládacie prvky formulára v Bootstrape boli aktualizované vo verzii 5.3.0, aby sa zlepšila konzistencia a použiteľnosť. Nové ovládacie prvky formulárov zahŕňajú aktualizované štýly začiarkavacích políčok, prepínačov a políčok výberu, ako aj vylepšenú spätnú väzbu na overenie.

Začiarkavacie políčka a prepínače

Bootstrap 5.3.0 zavádza nové štýly začiarkavacích políčok a prepínačov, ktoré uľahčujú ich používanie a sú prístupnejšie. Nový dizajn obsahuje väčšie oblasti zásahu a vylepšené indikátory zaostrenia, čo vám uľahčí interakciu s týmito vstupmi.

Tu je príklad toho, ako môžete použiť nové štýly začiarkavacích políčok:

<divtrieda="kontrola formulára">
<vstuptrieda="form-check-input"typu="zaškrtávacie políčko"hodnotu=""id="kontrola1">
<štítoktrieda="forma-check-label"pre="kontrola1">Predvolené začiarkavacie políčkoštítok>
div>

A tu je príklad toho, ako môžete použiť nové štýly prepínačov:

<divtrieda="kontrola formulára">
<vstuptrieda="form-check-input"typu="rádio"názov="exampleRadios"id="radio1"hodnotu="možnosť 1">
<štítoktrieda="forma-check-label"pre="radio1"> možnosť 1 štítok>
div>

Všimnite si, ako toto označenie používa .formulár-kontrola-vstup trieda na štýl samotného vstupného prvku a .form-check-label triedy na štýl štítku.

Vyberte položku Boxy

Select boxy boli tiež aktualizované v Bootstrap 5.3.0 s novými štýlmi pre lepšiu konzistenciu a použiteľnosť. Nové štýly výberového poľa obsahujú väčšie oblasti zásahu a vylepšené indikátory zamerania, čo vám uľahčí interakciu s týmito vstupmi.

Tu je príklad toho, ako môžete použiť nové štýly výberového poľa:

<vybertetrieda="form-select"árie-štítok="Predvolený príklad výberu">
<možnosťvybraný>Otvorte túto výberovú ponukumožnosť>
<možnosťhodnotu="1">Jedenmožnosť>
<možnosťhodnotu="2">Dvamožnosť>
<možnosťhodnotu="3">Trimožnosť>
vyberte>

Všimnite si, ako môžete použiť .form-select class na štýl samotného výberového poľa.

Overovacia spätná väzba

Bootstrap 5.3.0 tiež zavádza nové štýly overovania spätnej väzby pre ovládacie prvky formulárov. Tieto štýly uľahčujú poskytovanie vizuálnej spätnej väzby používateľom vašich webových stránok, keď nesprávne vyplnia formulár.

Tu je príklad, ako môžete použiť nové štýly overenia:

<divtrieda="formová skupina">
<štítokpre="exampleInputPassword1">hesloštítok>
<vstuptypu="heslo"trieda="form-control is-invalid"id="exampleInputPassword1"zástupný symbol="heslo"požadovaný>
<divtrieda="neplatná spätná väzba"> Zadajte platné heslo. div>
div>

Všimnite si, ako .je neplatné class označuje, že vstupné pole je neplatné a .invalid-feedback trieda zobrazí správu používateľovi.

S týmito novými štýlmi je vytváranie prístupných a konzistentných formulárov pre vašu webovú lokalitu alebo aplikáciu jednoduchšie ako kedykoľvek predtým.

Vzrušujúce vylepšenia v Bootstrap 5.3.0

Bootstrap 5.3.0 je významnou aktualizáciou populárneho rámca CSS, ktorá prináša niekoľko nových funkcií a vylepšení. Od prepínania tmavého režimu až po nástroje na zmenu mierky písma a nástroje na odkvapkávanie, máte k dispozícii množstvo nových nástrojov, ktoré vám pomôžu vytvárať lepšie webové stránky a aplikácie.