Bootstrap 5.3.0: Отключване на неговите вълнуващи нови функции

Bootstrap е популярна предна рамка, която революционизира уеб разработката. С последната си версия, Bootstrap 5.3.0, рамката въведе множество вълнуващи нови функции и подобрения, които ви дават възможност да създавате зашеметяващи, отзивчиви, богати на функции уебсайтове и приложения.

Превключване на тъмен режим

Един от забележителните Добавки към Bootstrap 5.3.0 е превключвател за тъмен режим. Този превключвател позволява на потребителите на вашия уебсайт без усилие да превключват между светъл и тъмен режим, улеснявайки безпроблемното използване на вашия уебсайт или приложение при различни условия на осветление.

За да използвате тази функция, просто добавете data-bs-toggle="тъмен режим" атрибут към произволен бутон или елемент на връзка.

Ето един пример:

<бутонТип="бутон"клас="btn btn-основен"данни-bs-превключване="тъмен режим">
 Превключване на тъмен режим
бутон>

Помощни програми за мащабиране на шрифта

Bootstrap 5.3.0 въвежда набор от помощни програми за мащабиране на шрифта, които ви позволяват бързо да коригирате размера на вашия текст въз основа на предварително дефинирани мащаби, без да се налага изберете сами конкретни стойности на шрифта.

Можете да използвате тези помощни програми в комбинация с други класове типография на Bootstrap, за да постигнете мащабируема и последователна типография във вашия уебсайт или приложение.

Ето няколко примера за това как можете да използвате помощните програми за мащабиране на шрифта:

<стрклас="fs-1">Това е най-големият размер на шрифтастр>
<стрклас="fs-2">Това е малко по-малък размер на шрифтастр>
<стрклас="fs-3">Това е среден размер на шрифтастр>
<стрклас="fs-4">Това е малък размер на шрифтастр>
<стрклас="fs-5">Това е най-малкият размер на шрифтастр>

Помощни програми за улуци

Друго ново допълнение в Bootstrap 5.3.0 е въвеждането на помощни програми за улуци. Тези помощни програми улесняват добавянето на улуци между колоните във вашето оформление на мрежата на Bootstrap, без да се налага да пишете персонализиран CSS.

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

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

Този пример използва gx-3 клас, за да добавите улей от 3 единици (или 1,5 rem) между двете колони.

Актуализирани контроли на формуляри

The контроли на формата в Bootstrap са актуализирани във версия 5.3.0 за подобряване на последователността и използваемостта. Новите контроли на формуляра включват актуализирани стилове за квадратчета за отметка, радио бутони и полета за избор, както и подобрена обратна връзка за валидиране.

Полета за отметка и радио бутони

Bootstrap 5.3.0 въвежда нови стилове за квадратчета за отметка и радио бутони, които ги правят по-лесни за използване и по-достъпни. Новият дизайн включва по-големи зони на удар и подобрени индикатори за фокус, което ви улеснява при взаимодействие с тези входове.

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

<дивклас="проверка на формуляр">
<входклас="форма-проверка-въвеждане"Тип="кутия за отметка"стойност=""документ за самоличност="проверка1">
<етикетклас="формуляр-проверка-етикет"за="проверка1">Квадратче за отметка по подразбиранеетикет>
див>

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

<дивклас="проверка на формуляр">
<входклас="форма-проверка-въвеждане"Тип="радио"име="примерни радиостанции"документ за самоличност="радио1"стойност="Опция 1">
<етикетклас="формуляр-проверка-етикет"за="радио1"> Опция 1 етикет>
див>

Забележете как тази маркировка използва .form-check-input клас за стилизиране на самия входен елемент и .form-check-label клас, за да стилизирате етикета.

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

Полетата за избор също са актуализирани в Bootstrap 5.3.0 с нови стилове за по-добра последователност и използваемост. Новите стилове на полета за избор включват по-големи области на удар и подобрени индикатори за фокус, което ви улеснява при взаимодействието с тези входове.

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

<изберетеклас="форма-избор"ария-етикет=„Пример за избор по подразбиране“>
<опцияизбрани>Отворете това меню за изборопция>
<опциястойност="1">единопция>
<опциястойност="2">двеопция>
<опциястойност="3">Триопция>
изберете>

Забележете как можете да използвате .form-select клас за стилизиране на самото поле за избор.

Обратна връзка за валидиране

Bootstrap 5.3.0 също въвежда нови стилове за обратна връзка за валидиране за контроли на формуляри. Тези стилове улесняват предоставянето на визуална обратна връзка на потребителите на вашия уебсайт, когато попълнят формуляр неправилно.

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

<дивклас="форма-група">
<етикетза="exampleInputPassword1">Паролаетикет>
<входТип="парола"клас="контролата на формуляра е невалидна"документ за самоличност="exampleInputPassword1"контейнер="Парола"изисква се>
<дивклас="невалидна обратна връзка"> Моля, въведете валидна парола. див>
див>

Забележете как .е невалиден клас показва, че полето за въвеждане е невалидно, а .invalid-feedback клас показва съобщение на потребителя.

С тези нови стилове е по-лесно от всякога да създавате достъпни и последователни форми за вашия уебсайт или приложение.

Вълнуващи подобрения в Bootstrap 5.3.0

Bootstrap 5.3.0 е значителна актуализация на популярната CSS рамка, която носи няколко нови функции и подобрения в таблицата. От превключването на тъмен режим до помощните програми за мащабиране на шрифта и помощните програми за улуци, има много нови инструменти на ваше разположение, които да ви помогнат да създадете по-добри уебсайтове и приложения.