Боотстрап 5.3.0: Откључавање његових узбудљивих нових функција

Боотстрап је популаран фронт-енд оквир који је направио револуцију у развоју веба. Са својим најновијим издањем, Боотстрап 5.3.0, оквир је представио мноштво узбудљивих нових функција и побољшања која вам омогућавају да креирате запањујуће веб локације и апликације које реагују, богате функцијама.

Пребацивање тамног режима

Један од вредних пажње Боотстрап 5.3.0 додаци је прекидач за тамни режим. Овај прекидач омогућава корисницима ваше веб странице да без напора прелазе између светлих и тамних режима, олакшавајући беспрекорну употребу ваше веб странице или апликације у различитим условима осветљења.

Да бисте користили ову функцију, једноставно додајте дата-бс-тоггле="тамни режим" атрибут било ком дугмету или елементу везе.

Ево примера:

<дугметип="дугме"класа="бтн бтн-примари"дата-бс-тоггле="тамни режим">
 Укључите тамни режим
дугме>

Фонт Сцале Утилитиес

Боотстрап 5.3.0 уводи скуп услужних програма за скалирање фонтова који вам омогућавају да брзо прилагодите величину текста на основу унапред дефинисаних размера, без потребе за

сами изаберите одређене вредности фонта.

Можете да користите ове услужне програме у комбинацији са другим Боотстрап типографским класама да бисте постигли скалабилну и доследну типографију на вашој веб локацији или апликацији.

Ево неколико примера како можете да користите услужне програме за скалирање фонтова:

<стркласа="фс-1">Ово је највећа величина фонтастр>
<стркласа="фс-2">Ово је мало мања величина словастр>
<стркласа="фс-3">Ово је средња величина фонтастр>
<стркласа="фс-4">Ово је мала величина фонтастр>
<стркласа="фс-5">Ово је најмања величина фонтастр>

Гуттер Утилитиес

Још један нови додатак у Боотстрап 5.3.0 је увођење услужних програма за олуке. Ови услужни програми олакшавају додавање олука између колона у вашем Боотстрап распореду мреже без потребе за писањем прилагођеног ЦСС-а.

Ево примера како можете да користите услужне програме за олуке:

<дивкласа="ред гк-3">
<дивкласа="цол">Колона 1див>
<дивкласа="цол">Колона 2див>
див>

Овај пример користи гк-3 класе за додавање олука од 3 јединице (или 1,5 рем) између две колоне.

Ажуриране контроле обрасца

Тхе контроле форме у Боотстрапу су ажурирани у верзији 5.3.0 ради побољшања доследности и употребљивости. Нове контроле обрасца укључују ажуриране стилове за поља за потврду, радио дугмад и поља за избор, као и побољшане повратне информације о валидацији.

Поља за потврду и радио дугмад

Боотстрап 5.3.0 уводи нове стилове за поља за потврду и радио дугмад који их чине лакшим за коришћење и приступачнијим. Нови дизајн садржи веће погођене области и побољшане индикаторе фокуса, што вам олакшава интеракцију са овим улазима.

Ево примера како можете да користите нове стилове поља за потврду:

<дивкласа="провера обрасца">
<улазникласа=„форма-провера-унос“тип="поље за потврду"вредност=""ид="цхецк1">
<етикетакласа="образац-чек-ознака"за="цхецк1">Подразумевано поље за потврдуетикета>
див>

А ево примера како можете да користите нове стилове радио дугмади:

<дивкласа="провера обрасца">
<улазникласа=„форма-провера-унос“тип="радио"име="екамплеРадиос"ид="радио1"вредност="Опција 1">
<етикетакласа="образац-чек-ознака"за="радио1"> Опција 1 етикета>
див>

Обратите пажњу на то како ова ознака користи .форм-цхецк-инпут цласс за стилизовање самог улазног елемента и .форм-цхецк-лабел класе за стилизовање етикете.

Изаберите Кутије

Изабрана поља су такође ажурирана у Боотстрап 5.3.0 новим стиловима за бољу доследност и употребљивост. Нови стилови оквира за избор карактеришу веће области погођених подручја и побољшани индикатори фокуса, што вам олакшава интеракцију са овим уносима.

Ево примера како можете да користите нове стилове оквира за избор:

<изаберитекласа="избор обрасца"арија-ознака=„Пример за подразумевани избор“>
<опцијаизабрани>Отворите овај мени за изборопција>
<опцијавредност="1">Једанопција>
<опцијавредност="2">Дваопција>
<опцијавредност="3">Триопција>
изаберите>

Обратите пажњу на то како можете да користите .форм-селецт класе за стилизовање самог оквира за избор.

Повратне информације о валидацији

Боотстрап 5.3.0 такође уводи нове стилове повратних информација о валидацији за контроле обрасца. Ови стилови олакшавају пружање визуелних повратних информација корисницима ваше веб локације када погрешно попуне образац.

Ево примера како можете да користите нове стилове валидације:

<дивкласа="форма-група">
<етикетаза="екамплеИнпутПассворд1">Лозинкаетикета>
<улазнитип="Лозинка"класа=„контрола обрасца је неважећа“ид="екамплеИнпутПассворд1"чувар места="Лозинка"потребан>
<дивкласа="неважеће повратне информације"> Унесите важећу лозинку. див>
див>

Обратите пажњу на то како .је неважећи цласс означава да је поље за унос неважеће, а .инвалид-феедбацк цласс приказује поруку кориснику.

Са овим новим стиловима, лакше је него икада креирати приступачне и конзистентне обрасце за вашу веб локацију или апликацију.

Узбудљива побољшања у Боотстрапу 5.3.0

Боотстрап 5.3.0 је значајно ажурирање популарног ЦСС оквира које доноси неколико нових функција и побољшања. Од пребацивања тамног режима до услужних програма за скалу фонта и услужних програма за олуке, на располагању вам је много нових алата који ће вам помоћи да направите боље веб странице и апликације.