Bootstrap 5.3.0: Odblokowywanie ekscytujących nowych funkcji

Bootstrap to popularny framework front-end, który zrewolucjonizował tworzenie stron internetowych. W swoim najnowszym wydaniu, Bootstrap 5.3.0, framework wprowadził wiele ekscytujących nowych funkcji i ulepszenia, które umożliwiają tworzenie oszałamiających, responsywnych, bogatych w funkcje stron internetowych i aplikacji.

Przełącznik trybu ciemnego

Jeden z godnych uwagi Dodatki Bootstrap 5.3.0 jest przełącznikiem dla tryb ciemny. Ten przełącznik umożliwia użytkownikom Twojej witryny bezproblemowe przełączanie między jasnym i ciemnym trybem, ułatwiając bezproblemowe korzystanie z witryny lub aplikacji w różnych warunkach oświetleniowych.

Aby skorzystać z tej funkcji, po prostu dodaj plik data-bs-toggle="tryb ciemny" atrybut do dowolnego przycisku lub elementu łącza.

Oto przykład:

<przycisktyp="przycisk"klasa="btn btn-podstawowy"data-bs-toggle=„tryb ciemny”>
 Przełącz tryb ciemny
przycisk>

Narzędzia do skalowania czcionek

Bootstrap 5.3.0 wprowadza zestaw narzędzi do skalowania czcionek, które pozwalają szybko dostosować rozmiar tekstu w oparciu o predefiniowane skale, bez konieczności sam wybierz określone wartości czcionek.

Tych narzędzi można używać w połączeniu z innymi klasami typografii Bootstrap, aby uzyskać skalowalną i spójną typografię w witrynie lub aplikacji.

Oto kilka przykładów wykorzystania narzędzi do skalowania czcionek:

<Pklasa="fs-1">Jest to największy rozmiar czcionkiP>
<Pklasa="fs-2">Jest to nieco mniejszy rozmiar czcionkiP>
<Pklasa="fs-3">Jest to średni rozmiar czcionkiP>
<Pklasa="fs-4">To jest mały rozmiar czcionkiP>
<Pklasa="fs-5">Jest to najmniejszy rozmiar czcionkiP>

Narzędzia rynnowe

Kolejnym nowym dodatkiem w Bootstrap 5.3.0 jest wprowadzenie narzędzi rynnowych. Te narzędzia ułatwiają dodawanie rynien między kolumnami w układzie siatki Bootstrap bez konieczności pisania niestandardowego CSS.

Oto przykład, w jaki sposób można korzystać z narzędzi rynnowych:

<dzklasa="wiersz gx-3">
<dzklasa="przełęcz">Kolumna 1dz>
<dzklasa="przełęcz">Kolumna 2dz>
dz>

W tym przykładzie użyto gx-3 class, aby dodać rynnę o długości 3 jednostek (lub 1,5 rem) między dwiema kolumnami.

Zaktualizowano kontrolki formularza

The kontrolki formularzy w Bootstrap zostały zaktualizowane w wersji 5.3.0 w celu poprawy spójności i użyteczności. Nowe formanty formularzy obejmują zaktualizowane style pól wyboru, przycisków radiowych i pól wyboru, a także ulepszone informacje zwrotne dotyczące sprawdzania poprawności.

Pola wyboru i przyciski radiowe

Bootstrap 5.3.0 wprowadza nowe style pól wyboru i przycisków radiowych, które czynią je łatwiejszymi w użyciu i bardziej dostępnymi. Nowy projekt obejmuje większe obszary uderzenia i ulepszone wskaźniki skupienia, co ułatwia interakcję z tymi danymi wejściowymi.

Oto przykład wykorzystania nowych stylów pól wyboru:

<dzklasa=„sprawdzanie formularza”>
<wejścieklasa=„formularz sprawdzania danych wejściowych”typ=„pole wyboru”wartość=""ID=„sprawdzenie 1”>
<etykietaklasa=„etykieta kontrolna formularza”Do=„sprawdzenie 1”>Domyślne pole wyboruetykieta>
dz>

A oto przykład wykorzystania nowych stylów przycisków radiowych:

<dzklasa=„sprawdzanie formularza”>
<wejścieklasa=„formularz sprawdzania danych wejściowych”typ="radio"nazwa=„przykładowe radia”ID="radio1"wartość="opcja 1">
<etykietaklasa=„etykieta kontrolna formularza”Do="radio1"> opcja 1 etykieta>
dz>

Zwróć uwagę, w jaki sposób ten znacznik wykorzystuje .formularz-sprawdzanie-wprowadzania class, aby nadać styl samemu elementowi wejściowemu, oraz .etykieta-sprawdzenia-formularza class, aby nadać styl etykiecie.

Wybierz pudełka

Pola wyboru zostały również zaktualizowane w Bootstrap 5.3.0 o nowe style dla lepszej spójności i użyteczności. Nowe style pól wyboru mają większe obszary trafienia i ulepszone wskaźniki skupienia, co ułatwia interakcję z tymi danymi wejściowymi.

Oto przykład wykorzystania nowych stylów pól wyboru:

<wybieraćklasa=„wybór formularza”aria-label=„Domyślny przykład wyboru”>
<opcjawybrany>Otwórz to menu wyboruopcja>
<opcjawartość="1">Jedenopcja>
<opcjawartość="2">Dwaopcja>
<opcjawartość="3">Trzyopcja>
wybierać>

Zwróć uwagę, jak możesz użyć .form-select class, aby stylizować samo pole wyboru.

Informacje zwrotne dotyczące walidacji

Bootstrap 5.3.0 wprowadza również nowe style informacji zwrotnych dotyczących walidacji dla kontrolek formularzy. Te style ułatwiają wizualne informowanie użytkowników witryny, gdy nieprawidłowo wypełniają formularz.

Oto przykład wykorzystania nowych stylów sprawdzania poprawności:

<dzklasa=„grupa formularzy”>
<etykietaDo=„przykładowe hasło wejściowe1”>Hasłoetykieta>
<wejścietyp="hasło"klasa=„Kontrola formularza jest nieprawidłowa”ID=„przykładowe hasło wejściowe1”symbol zastępczy="Hasło"wymagany>
<dzklasa=„nieprawidłowa informacja zwrotna”> Podaj prawidłowe hasło. dz>
dz>

Zauważ, jak .jest nieważny class wskazuje, że pole wejściowe jest nieprawidłowe, a .nieprawidłowa informacja zwrotna class wyświetla komunikat dla użytkownika.

Dzięki tym nowym stylom tworzenie przystępnych i spójnych formularzy dla witryny internetowej lub aplikacji jest łatwiejsze niż kiedykolwiek.

Ekscytujące ulepszenia w Bootstrap 5.3.0

Bootstrap 5.3.0 to znacząca aktualizacja popularnego frameworka CSS, która wprowadza kilka nowych funkcji i ulepszeń. Od przełączania trybu ciemnego po narzędzia do skalowania czcionek i narzędzia do zaznaczania marginesów — masz do dyspozycji wiele nowych narzędzi, które pomogą Ci tworzyć lepsze strony internetowe i aplikacje.