Bootstrap 5.3.0: Odemykání jeho vzrušujících nových funkcí

Bootstrap je populární front-end framework, který způsobil revoluci ve vývoji webu. S jeho nejnovější verzí, Bootstrap 5.3.0, framework zavedl spoustu zajímavých nových funkcí a vylepšení, která vám umožní vytvářet úžasné, responzivní weby a aplikace s bohatými funkcemi.

Přepínání tmavého režimu

Jedna z pozoruhodných Doplnění bootstrapu 5.3.0 je přepínač pro tmavý režim. Tento přepínač umožňuje uživatelům vašeho webu bez námahy přepínat mezi světlým a tmavým režimem, což usnadňuje bezproblémové používání vašeho webu nebo aplikace za různých světelných podmínek.

Chcete-li tuto funkci použít, jednoduše přidejte data-bs-toggle="dark-mode" atribut k libovolnému tlačítku nebo prvku odkazu.

Zde je příklad:

<knoflíktyp="knoflík"třída="btn btn-primary"data-bs-toggle="tmavý režim">
 Přepnout tmavý režim
knoflík>

Nástroje pro měřítko písma

Bootstrap 5.3.0 zavádí sadu nástrojů pro měřítko písem, které vám umožňují rychle upravit velikost textu na základě předdefinovaných měřítek, aniž byste museli

vyberte konkrétní hodnoty písma sami.

Tyto nástroje můžete použít v kombinaci s jinými třídami typografie Bootstrap, abyste dosáhli škálovatelné a konzistentní typografie na vašem webu nebo aplikaci.

Zde je několik příkladů, jak můžete použít nástroje pro změnu velikosti písma:

<ptřída="fs-1">Toto je největší velikost písmap>
<ptřída="fs-2">Toto je o něco menší velikost písmap>
<ptřída="fs-3">Toto je střední velikost písmap>
<ptřída="fs-4">Toto je malá velikost písmap>
<ptřída="fs-5">Toto je nejmenší velikost písmap>

Okapové utility

Dalším novým přírůstkem v Bootstrap 5.3.0 je zavedení gutter utilit. Tyto nástroje usnadňují přidávání mezer mezi sloupce v rozložení mřížky Bootstrap, aniž byste museli psát vlastní CSS.

Zde je příklad toho, jak můžete použít okapové nástroje:

<divtřída="řádek gx-3">
<divtřída="col">Sloupec 1div>
<divtřída="col">Sloupec 2div>
div>

Tento příklad používá gx-3 třídy přidat mezi dva sloupy okap o 3 jednotkách (nebo 1,5rem).

Aktualizované ovládací prvky formuláře

The ovládací prvky formuláře v Bootstrapu byly aktualizovány ve verzi 5.3.0 pro zlepšení konzistence a použitelnosti. Nové ovládací prvky formuláře zahrnují aktualizované styly zaškrtávacích políček, přepínačů a výběrových polí a také vylepšenou zpětnou vazbu při ověřování.

Zaškrtávací políčka a přepínače

Bootstrap 5.3.0 zavádí nové styly zaškrtávacích políček a přepínačů, které usnadňují jejich použití a jsou přístupnější. Nový design obsahuje větší oblasti zásahu a vylepšené indikátory zaostření, což vám usnadňuje interakci s těmito vstupy.

Zde je příklad, jak můžete použít nové styly zaškrtávacích políček:

<divtřída="kontrola formuláře">
<vstuptřída="form-check-input"typ="zaškrtávací políčko"hodnota=""id="kontrola1">
<označenítřída="form-check-label"pro="kontrola1">Výchozí zaškrtávací políčkooznačení>
div>

A zde je příklad toho, jak můžete použít nové styly přepínačů:

<divtřída="kontrola formuláře">
<vstuptřída="form-check-input"typ="rádio"název="exampleRadios"id="radio1"hodnota="Možnost 1">
<označenítřída="form-check-label"pro="radio1"> Možnost 1 označení>
div>

Všimněte si, jak toto označení používá .form-check-input třídy pro stylování samotného vstupního prvku a .form-check-label třídy pro stylování štítku.

Vyberte Boxy

V Bootstrapu 5.3.0 byly také aktualizovány výběrové boxy o nové styly pro lepší konzistenci a použitelnost. Nové styly výběrových polí obsahují větší oblasti zásahu a vylepšené indikátory zaměření, což vám usnadňuje interakci s těmito vstupy.

Zde je příklad, jak můžete použít nové styly výběrových polí:

<vybrattřída="form-select"árie-štítek="Výchozí příklad výběru">
<volbavybraný>Otevřete tuto výběrovou nabídkuvolba>
<volbahodnota="1">Jedenvolba>
<volbahodnota="2">Dvavolba>
<volbahodnota="3">Třivolba>
vybrat>

Všimněte si, jak můžete použít .form-select class pro úpravu samotného výběrového pole.

Zpětná vazba k ověření

Bootstrap 5.3.0 také zavádí nové styly zpětné vazby ověření pro ovládací prvky formuláře. Tyto styly usnadňují poskytování vizuální zpětné vazby uživatelům vašeho webu, když špatně vyplní formulář.

Zde je příklad, jak můžete použít nové styly ověřování:

<divtřída="form-skupina">
<označenípro="exampleInputPassword1">Heslooznačení>
<vstuptyp="Heslo"třída="form-control is-invalid"id="exampleInputPassword1"zástupný symbol="Heslo"Požadované>
<divtřída="neplatná zpětná vazba"> Zadejte prosím platné heslo. div>
div>

Všimněte si, jak .je neplatný class označuje, že vstupní pole je neplatné, a .invalid-feedback třída zobrazí zprávu uživateli.

S těmito novými styly je snazší než kdy dříve vytvářet přístupné a konzistentní formuláře pro váš web nebo aplikaci.

Vzrušující vylepšení v Bootstrapu 5.3.0

Bootstrap 5.3.0 je významnou aktualizací populárního frameworku CSS, která přináší několik nových funkcí a vylepšení. Máte k dispozici spoustu nových nástrojů, které vám pomohou vytvářet lepší webové stránky a aplikace, od přepínání tmavého režimu po nástroje pro změnu velikosti písma a nástroje pro okap.