in English

Migracja do v5

Śledź i przeglądaj zmiany w plikach źródłowych Bootstrap, dokumentacji i składnikach, aby ułatwić migrację z wersji 4 do 5.

Na tej stronie

v5.2.0

Odświeżony projekt

Bootstrap v5.2.0 zawiera subtelną aktualizację projektu dla kilku komponentów i właściwości w całym projekcie, w szczególności poprzez udoskonalone border-radiuswartości przycisków i kontrolek formularzy . Nasza dokumentacja została również zaktualizowana o nową stronę główną, prostszy układ dokumentów, który nie zwija już sekcji paska bocznego, oraz bardziej widoczne przykłady ikon Bootstrap .

Więcej zmiennych CSS

Zaktualizowaliśmy wszystkie nasze komponenty, aby korzystały ze zmiennych CSS. Chociaż Sass wciąż stanowi podstawę wszystkiego, każdy komponent został zaktualizowany, aby zawierał zmienne CSS w klasach bazowych komponentu (np. .btn), co pozwala na większą personalizację Bootstrapa w czasie rzeczywistym. W kolejnych wydaniach będziemy nadal rozszerzać wykorzystanie zmiennych CSS w naszym układzie, formularzach, pomocnikach i narzędziach. Przeczytaj więcej o zmiennych CSS w każdym komponencie na odpowiednich stronach dokumentacji.

Nasze użycie zmiennych CSS będzie nieco niekompletne aż do Bootstrap 6. Chociaż bardzo chcielibyśmy je w pełni zaimplementować, istnieje ryzyko, że spowodują one poważne zmiany. Na przykład ustawienie $alert-border-width: var(--bs-border-width)w naszym kodzie źródłowym łamie potencjalny Sass we własnym kodzie, jeśli robiłeś to $alert-border-width * 2z jakiegoś powodu.

W związku z tym, tam gdzie to możliwe, będziemy dążyć do większej liczby zmiennych CSS, ale pamiętaj, że nasza implementacja może być nieco ograniczona w wersji 5.

Nowy`_maps.scss`

Bootstrap v5.2.0 wprowadził nowy plik Sass z _maps.scss. Wyciąga kilka map Sassa, _variables.scssaby naprawić problem polegający na tym, że aktualizacje oryginalnej mapy nie były stosowane do map pomocniczych, które je rozszerzają. Na przykład aktualizacje $theme-colorsnie były stosowane do innych map tematycznych, które opierały się na programie $theme-colors, co łamało kluczowe przepływy pracy związane z dostosowywaniem. Krótko mówiąc, Sass ma ograniczenie polegające na tym, że po użyciu domyślnej zmiennej lub mapy nie można jej zaktualizować. Podobna wada występuje w przypadku zmiennych CSS, gdy są one używane do tworzenia innych zmiennych CSS.

Dlatego też zmienne dostosowania w Bootstrap muszą nastąpić po @import "functions", ale przed @import "variables"i po pozostałej części naszego stosu importu. To samo dotyczy map Sass — musisz nadpisać wartości domyślne, zanim zostaną użyte. Następujące mapy zostały przeniesione do nowej wersji _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Twoje niestandardowe kompilacje Bootstrap CSS powinny teraz wyglądać mniej więcej tak z osobnym importem map.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Nowe narzędzia

Rozszerzone font-weightnarzędzia do .fw-semiboldobsługi czcionek półgrubych.
Rozszerzone border-radiusnarzędzia o dwa nowe rozmiary .rounded-4oraz .rounded-5, aby uzyskać więcej opcji.

Dodatkowe zmiany

Wprowadzono nową $enable-container-classesopcję. — Teraz, gdy zdecydujesz się na eksperymentalny układ CSS Grid, .container-*klasy będą nadal kompilowane, chyba że ta opcja jest ustawiona na false. Kontenery również zachowują teraz swoje wartości rynny.
Komponent Offcanvas ma teraz responsywne odmiany . Oryginalna .offcanvasklasa pozostaje niezmieniona — ukrywa zawartość we wszystkich rzutniach. Aby była responsywna, zmień tę .offcanvasklasę na dowolną .offcanvas-{sm|md|lg|xl|xxl}.
Grubsze przegrody stołowe są teraz dostępne. — Usunęliśmy grubszą i trudniejszą do przesłonięcia granicę między grupami tabel i przenieśliśmy ją do opcjonalnej klasy, którą można zastosować, .table-group-divider. Zobacz przykładową tabelę dokumentów.
Scrollspy został przepisany , aby używać interfejsu API Intersection Observer , co oznacza, że nie potrzebujesz już względnych opakowań nadrzędnych, przestarzałejoffsetkonfiguracji i innych. Poszukaj swoich implementacji Scrollspy, aby były bardziej dokładne i spójne w podświetlaniu nawigacji.
Wyskakujące okienka i podpowiedzi używają teraz zmiennych CSS. Niektóre zmienne CSS zostały zaktualizowane z ich odpowiedników Sass, aby zmniejszyć liczbę zmiennych. W rezultacie w tej wersji trzy zmienne zostały wycofane: $popover-arrow-color, $popover-arrow-outer-colori $tooltip-arrow-color.
Dodano nowych .text-bg-{color}pomocników. Zamiast ustawiać jednostki .text-*i .bg-*narzędzia, możesz teraz użyć pomocników ,.text-bg-* aby ustawić background-colorkontrast z pierwszym planem color.
Dodano .form-check-reversemodyfikator, aby odwrócić kolejność etykiet i powiązanych pól wyboru/radiów.
Dodano obsługę kolumn w paski do tabel za pośrednictwem nowej .table-striped-columnsklasy.

Aby uzyskać pełną listę zmian, zobacz projekt v5.2.0 w witrynie GitHub .

v5.1.0

Dodano eksperymentalne wsparcie dla układu CSS Grid . — To jest w toku i nie jest jeszcze gotowe do użytku produkcyjnego, ale możesz włączyć nową funkcję za pośrednictwem Sass. Aby ją włączyć, wyłącz domyślną siatkę, ustawiając $enable-grid-classes: falsei włącz siatkę CSS, ustawiając $enable-cssgrid: true.
Zaktualizowano paski nawigacyjne, aby obsługiwać offcanvas. — Dodaj szuflady offcanvas na dowolnym pasku nawigacyjnym za pomocą responsywnych .navbar-expand-*klas i niektórych znaczników offcanvas.
Dodano nowy składnik zastępczy . — Nasz najnowszy komponent, sposób na tymczasowe blokowanie zamiast prawdziwej treści, aby wskazać, że coś wciąż się ładuje w Twojej witrynie lub aplikacji.
Wtyczka Collapse obsługuje teraz zwijanie w poziomie . — Dodaj .collapse-horizontaldo swojego, .collapseaby zwinąć widthzamiast height. Unikaj ponownego malowania przeglądarki, ustawiając min-heightlub height.
Dodano nowe pomocniki w stosie i linijkach pionowych. — Szybko zastosuj wiele właściwości flexbox, aby szybko tworzyć niestandardowe układy ze stosami . Wybierz spośród stosów poziomych ( .hstack) i pionowych ( ). .vstackDodaj pionowe dzielniki podobne do <hr>elementów z nowymi .vrpomocnikami .
Dodano nowe globalne :rootzmienne CSS. — Dodano kilka nowych zmiennych CSS do :rootpoziomu do kontrolowania <body>stylów. Trwają prace nad kolejnymi, w tym naszymi narzędziami i komponentami, ale na razie przeczytaj zmienne CSS w sekcji Dostosuj .
Zmodernizowane narzędzia do obsługi koloru i tła, umożliwiające korzystanie ze zmiennych CSS, oraz dodane nowe narzędzia służące do nieprzezroczystości tekstu i tła . — .text-* a .bg-*narzędzia są teraz zbudowane ze zmiennymi CSS i rgba()wartościami kolorów, co pozwala łatwo dostosować dowolne narzędzie za pomocą nowych narzędzi krycia.
Dodano nowe przykłady fragmentów kodu, aby pokazać, jak dostosować nasze komponenty. — Pociągnij gotowe do użycia niestandardowych komponentów i innych popularnych wzorców projektowych dzięki naszym nowym przykładom Snippets . Zawiera stopki , listy rozwijane , grupy list i modalne .
Usunięto nieużywane style pozycjonowania z okienek i podpowiedzi , ponieważ są one obsługiwane wyłącznie przez Poppera. $tooltip-marginzostał wycofany i ustawiony nullw procesie.

Chcesz więcej informacji? Przeczytaj wpis na blogu w wersji 5.1.0.

No hej! Zmiany w naszym pierwszym głównym wydaniu Bootstrap 5, v5.0.0, są udokumentowane poniżej. Nie odzwierciedlają dodatkowych zmian pokazanych powyżej.

Zależności

Porzucone jQuery.
Zaktualizowano Poppera v1.x do Poppera v2.x.
Zastąpiono Libsass Dart Sass, ponieważ nasz kompilator Sass, który otrzymał Libsass, był przestarzały.
Przeniesiony z Jekyll do Hugo w celu zbudowania naszej dokumentacji

Obsługa przeglądarki

Zrezygnowano z Internet Explorera 10 i 11
Porzucono Microsoft Edge < 16 (starsza krawędź)
Zrezygnowano z Firefoksa <60
Zrzucono Safari < 12
Zrezygnowano z Safari na iOS < 12
Upadły chrom <60

Zmiany w dokumentacji

Przeprojektowana strona główna, układ dokumentów i stopka.
Dodano nowy przewodnik po przesyłkach .
Dodano nową sekcję Dostosuj , zastępując stronę Motywy v4 nowymi szczegółami dotyczącymi Sass, globalnymi opcjami konfiguracji, schematami kolorów, zmiennymi CSS i nie tylko.
Zreorganizowano całą dokumentację formularzy w nową sekcję Formularze , dzieląc zawartość na bardziej szczegółowe strony.
Podobnie zaktualizowano sekcję Układ , aby wyraźniej uwydatnić zawartość siatki.
Zmieniono nazwę strony komponentu „Navs” na „Navs & Tabs”.
Zmieniono nazwę strony „Czeki” na „Czeki i radia”.
Przeprojektowano pasek nawigacyjny i dodano nowy podrzędny, aby ułatwić poruszanie się po naszych witrynach i wersjach dokumentów.
Dodano nowy skrót klawiaturowy do pola wyszukiwania: Ctrl + /.

Sass

Porzuciliśmy domyślne scalanie map Sass, aby ułatwić usuwanie zbędnych wartości. Pamiętaj, że teraz musisz zdefiniować wszystkie wartości na mapach Sass, takie jak $theme-colors. Sprawdź, jak radzić sobie z mapami Sassa .
ŁamanieZmieniono nazwę color-yiq()funkcji i powiązanych zmiennych na color-contrast(), ponieważ nie jest już związana z przestrzenią kolorów YIQ. Zobacz nr 30168.
- $yiq-contrasted-thresholdzmieniono nazwę na $min-contrast-ratio.
- $yiq-text-darki $yiq-text-lightsą odpowiednio przemianowane na $color-contrast-darki $color-contrast-light.
ŁamanieParametry domieszek zapytań o media zostały zmienione w celu uzyskania bardziej logicznego podejścia.
- media-breakpoint-down()używa samego punktu przerwania zamiast następnego punktu przerwania (np. media-breakpoint-down(lg)zamiast media-breakpoint-down(md)docelowych rzutni mniejszych niż lg).
- Podobnie, drugi parametr w media-breakpoint-between()używa również samego punktu przerwania zamiast następnego punktu przerwania (np. media-between(sm, lg)zamiast media-breakpoint-between(sm, md)docelowych rzutni między smi lg).
ŁamanieUsunięto style drukowania i $enable-print-styleszmienną. Klasy wyświetlania druku są nadal dostępne. Zobacz #28339 .
ŁamaniePorzucone funkcje color(), theme-color(), i gray()na rzecz zmiennych. Zobacz #29083 .
ŁamanieZmieniono nazwę theme-color-level()funkcji na color-level()i teraz akceptuje dowolny kolor, a nie tylko $theme-colorkolory. Zobacz #29083 Uważaj: color-level() został później wrzucony v5.0.0-alpha3.
ŁamanieZmieniono nazwę $enable-prefers-reduced-motion-media-queryi $enable-pointer-cursor-for-buttonsdo $enable-reduced-motioni $enable-button-pointersdla zwięzłości.
ŁamanieUsunięto bg-gradient-variant()mieszankę. Użyj .bg-gradientklasy, aby dodać gradienty do elementów zamiast wygenerowanych .bg-gradient-*klas.
Łamanie Usunięto wcześniej przestarzałe domieszki:
- hover, hover-focus, plain-hover-focus, ihover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(porzuciła także powiązaną klasę narzędziową, .text-hide)
- visibility()
- form-control-focus()
ŁamanieZmieniono nazwę scale-color()funkcji, shift-color()aby uniknąć kolizji z własną funkcją skalowania kolorów Sassa.
box-shadowdomieszki pozwalają teraz na nullwartości i porzucają nonez wielu argumentów. Zobacz #30394 .
Mixin border-radius()ma teraz wartość domyślną.

System kolorów

System kolorów, który działał color-level()i $theme-color-intervalzostał usunięty na rzecz nowego systemu kolorów. Wszystkie funkcje lighten()i darken()w naszej bazie kodu zostały zastąpione przez tint-color()i shade-color(). Funkcje te będą mieszać kolor z bielą lub czernią, zamiast zmieniać jego jasność o ustaloną wartość. Zabarwi shift-color()lub przyciemni kolor w zależności od tego, czy jego parametr wagowy jest dodatni, czy ujemny. Zobacz #30622 po więcej szczegółów.
Dodano nowe odcienie i odcienie dla każdego koloru, zapewniając dziewięć oddzielnych kolorów dla każdego koloru bazowego, jako nowe zmienne Sass.
Poprawiony kontrast kolorów. Podwyższony współczynnik kontrastu kolorów z 3:1 do 4,5:1 i zaktualizowane kolory niebieski, zielony, cyjan i różowy, aby zapewnić kontrast WCAG 2.1 AA. Zmieniliśmy również nasz kontrast kolorów z $gray-900na $black.
Aby wesprzeć nasz system kolorów, dodaliśmy nowe niestandardowe tint-color()i shade-color()funkcje, aby odpowiednio mieszać nasze kolory.

Aktualizacje siatki

Nowy punkt przerwania! Dodano nowy xxlpunkt przerwania dla 1400pxi w górę. Brak zmian we wszystkich pozostałych punktach przerwania.
Ulepszone rynny. Rynny są teraz ustawione w remach i są węższe niż v4 ( 1.5rem, lub około 24px, w dół od 30px). To wyrównuje rynny naszego systemu kratowego z naszymi narzędziami do rozmieszczania.
- Dodano nową klasę rynien ( .g-*, .gx-*i .gy-*) do sterowania rynnami poziomymi/pionowymi, rynnami poziomymi i rynnami pionowymi.
- ŁamanieZmieniono nazwę .no-guttersna .g-0pasującą do nowych narzędzi rynnowych.
Kolumny nie są już position: relativestosowane, więc może być konieczne dodanie .position-relativeniektórych elementów, aby przywrócić to zachowanie.
ŁamanieZrezygnowano z kilku .order-*klas, które często nie były używane. Teraz dostarczamy tylko .order-1po .order-5wyjęciu z pudełka.
ŁamaniePorzucono .mediakomponent, ponieważ można go łatwo replikować za pomocą narzędzi. Zobacz przykład nr 28265 i stronę narzędzi flex .
Łamanie bootstrap-grid.cssteraz dotyczy tylko box-sizing: border-boxkolumny zamiast resetowania globalnego rozmiaru pudełka. W ten sposób nasze style siatki mogą być używane w większej liczbie miejsc bez zakłóceń.
$enable-grid-classesnie wyłącza już generowania klas kontenerów. Zobacz #29146.
Zaktualizowano make-coldomieszkę do domyślnych równych kolumn bez określonego rozmiaru.

Treść, ponowne uruchomienie itp.

RFS jest teraz domyślnie włączony. Nagłówki korzystające zfont-size()domieszki automatycznie dostosują sięfont-sizedo skali z rzutnią. Ta funkcja była wcześniej dostępna w wersji 4.
ŁamanieZmieniliśmy naszą typografię wyświetlania, aby zastąpić nasze $display-*zmienne i $display-font-sizesmapą Sassa. Usunięto również poszczególne $display-*-weightzmienne dla pojedynczego $display-font-weighti skorygowanego font-sizes.
Dodano dwa nowe .display-*rozmiary nagłówków .display-5oraz .display-6.
Łącza są domyślnie podkreślone (nie tylko po najechaniu myszą), chyba że są częścią określonych komponentów.
Przeprojektowane tabele , aby odświeżyć ich style i przebudować je za pomocą zmiennych CSS, aby uzyskać większą kontrolę nad stylami.
ŁamanieTabele zagnieżdżone nie dziedziczą już stylów.
Łamanie .thead-lighti .thead-darksą porzucane na rzecz .table-*klas wariantów, które mogą być używane dla wszystkich elementów tabeli ( thead, tbody, tfoot, tri ) th.td
ŁamanieMixin table-row-variant()zostaje przemianowany na table-variant()i akceptuje tylko 2 parametry: $color(nazwa koloru) i $value(kod koloru). Kolor obramowania i kolory akcentów są obliczane automatycznie na podstawie zmiennych współczynników tabeli.
Podziel zmienne wypełniające komórki tabeli na -yi -x.
ŁamaniePorzucona .pre-scrollableklasa. Zobacz #29135
Łamanie .text-*narzędzia nie dodają już stanów najechania i fokusu do łączy. .link-*zamiast tego można użyć klas pomocniczych. Zobacz #29267
ŁamaniePorzucona .text-justifyklasa. Zobacz #29793
Łamanie <hr>elementy teraz używają heightzamiast , borderaby lepiej wspierać sizeatrybut. Umożliwia to również korzystanie z narzędzi dopełniających do tworzenia grubszych przekładek (np <hr class="py-1">. ).
Zresetuj domyślne ustawienia poziome padding-leftna <ul>i <ol>elementy z domyślnej przeglądarki 40pxna 2rem.
Dodano $enable-smooth-scroll, który ma zastosowanie scroll-behavior: smoothglobalnie — z wyjątkiem użytkowników proszących o ograniczenie ruchu za pomocą prefers-reduced-motionzapytania o media. Zobacz #31877

RTL

Zmienne specyficzne dla kierunku poziomego, narzędzia i domieszki zostały przemianowane, aby używać właściwości logicznych, takich jak te, które można znaleźć w układach flexboksa – np. starti endzamiast lefti right.

Formularze

Dodano nowe pływające formy! Promowaliśmy przykład etykiet pływających na w pełni obsługiwane komponenty formularzy. Zobacz nową stronę Swobodne etykiety.
Łamanie Skonsolidowane natywne i niestandardowe elementy formularzy. Pola wyboru, radia, selekcje i inne dane wejściowe, które miały natywne i niestandardowe klasy w v4 zostały skonsolidowane. Teraz prawie wszystkie nasze elementy formularzy są całkowicie niestandardowe, większość z nich nie wymaga niestandardowego kodu HTML.
- .custom-control.custom-checkboxjest teraz .form-check.
- .custom-control.custom-custom-radiojest teraz .form-check.
- .custom-control.custom-switchjest teraz .form-check.form-switch.
- .custom-selectjest teraz .form-select.
- .custom-filei .form-filezostały zastąpione niestandardowymi stylami na górze .form-control.
- .custom-rangejest teraz .form-range.
- Porzucono natywny .form-control-filei .form-control-range.
ŁamaniePorzucono .input-group-appendi .input-group-prepend. Możesz teraz po prostu dodawać przyciski i .input-group-textjako bezpośrednie dzieci grup wejściowych.
Długotrwały promień brakującego obramowania w grupie wejściowej z błędem informacji zwrotnej o walidacji został ostatecznie naprawiony przez dodanie dodatkowej .has-validationklasy do grup wejściowych z walidacją.
Łamanie Porzucone klasy układu specyficzne dla formularza dla naszego systemu siatek. Użyj naszej siatki i narzędzi zamiast .form-group, .form-rowlub .form-inline.
ŁamanieEtykiety formularzy wymagają teraz .form-label.
Łamanie .form-textnie ustawia już display, co pozwala na tworzenie tekstu pomocy w tekście lub blokowaniu według własnego uznania, po prostu zmieniając element HTML.
Kontrolki formularzy nie są już używane naprawione height, gdy jest to możliwe, zamiast tego odroczono w min-heightcelu poprawy dostosowania i zgodności z innymi składnikami.
Ikony walidacji nie są już stosowane do <select>s z multiple.
Zmieniono rozmieszczenie źródłowych plików Sass w obszarze scss/forms/, w tym style grup wejściowych.

składniki

Ujednolicone paddingwartości dla alertów, menu nawigacyjnego, kart, list rozwijanych, grup list, modów, okienek popover i podpowiedzi, oparte na naszej $spacerzmiennej. Zobacz #30564 .

Akordeon

Dodano nowy komponent akordeon .

Alerty

Alerty mają teraz przykłady z ikonami .
Usunięto niestandardowe style dla <hr>s w każdym alercie, ponieważ są już używane currentColor.

Odznaki

ŁamanieUsunięto wszystkie .badge-*klasy kolorów dla narzędzi działających w tle (np. use .bg-primaryzamiast .badge-primary).
ŁamanieDropped — zamiast tego użyj narzędzia .badge-pill..rounded-pill
ŁamanieUsunięto style najechania i skupienia dla elementów <a>i .<button>
Zwiększono domyślne wypełnienie odznak z .25em/ .5emdo .35em/ .65em.

Bułka tarta

Uproszczono domyślny wygląd bułki tartej, usuwając padding, background-colori border-radius.
Dodano nową niestandardową właściwość CSS --bs-breadcrumb-dividerdla łatwego dostosowywania bez konieczności ponownej kompilacji CSS.

guziki

Łamanie Przyciski przełączania , z polami wyboru lub radiami, nie wymagają już JavaScriptu i mają nowe znaczniki. Nie potrzebujemy już elementu opakowującego, dodajemy.btn-checkdo<input>, i łączymy go z dowolnymi.btnklasami na<label>. Zobacz #30650 . Dokumentacja w tym zakresie została przeniesiona z naszej strony przycisków do nowej sekcji Formularze.
Łamanie Porzucone .btn-blockdla mediów. Zamiast używać .btn-blockna .btn, owiń swoje przyciski .d-gridi .gap-*narzędzie, aby je rozmieścić w razie potrzeby. Przełącz się na responsywne klasy, aby mieć nad nimi jeszcze większą kontrolę. Przeczytaj kilka przykładów w dokumentacji.
Zaktualizowano nasze button-variant()i button-outline-variant()domieszki, aby obsługiwały dodatkowe parametry.
Zaktualizowano przyciski, aby zapewnić zwiększony kontrast przy najechaniu i stanach aktywnych.
Wyłączone przyciski mają teraz pointer-events: none;.

Karta

ŁamanieZrezygnowano .card-deckna rzecz naszej siatki. Zawiń swoje karty w klasy kolumn i dodaj kontener nadrzędny .row-cols-*, aby odtworzyć talie kart (ale z większą kontrolą nad responsywnym wyrównaniem).
ŁamanieZrezygnowano .card-columnsna rzecz masonerii. Zobacz #28922 .
ŁamanieZastąpiono bazowy .cardakordeon nowym komponentem akordeonu .

Karuzela

Dodano nowy .carousel-darkwariant dla ciemnego tekstu, kontrolek i wskaźników (idealny do jaśniejszego tła).
Zamieniono ikony szewronów dla elementów sterujących karuzeli na nowe pliki SVG z ikon Bootstrap .

Przycisk zamykania

ŁamanieZmieniono nazwę .closena .btn-closemniej ogólną nazwę.
Przyciski zamykania używają teraz background-image(osadzonego SVG) zamiast ×w HTML, co pozwala na łatwiejsze dostosowywanie bez konieczności dotykania znaczników.
Dodano nowy .btn-close-whitewariant, który służy filter: invert(1)do włączania ikon odrzucania o wyższym kontraście na ciemniejszym tle.

Upadek

Usunięto kotwiczenie przewijania dla akordeonów.

Menu rozwijane

Dodano nowy .dropdown-menu-darkwariant i powiązane zmienne dla ciemnych menu na żądanie.
Dodano nową zmienną dla $dropdown-padding-x.
Przyciemniono rozdzielacz listy rozwijanej, aby poprawić kontrast.
ŁamanieWszystkie zdarzenia z listy rozwijanej są teraz wywoływane za pomocą przycisku przełącznika listy rozwijanej, a następnie przesyłane do elementu nadrzędnego.
Menu rozwijane mają teraz data-bs-popper="static"atrybut ustawiany, gdy pozycja menu rozwijanego jest statyczna lub menu rozwijane znajduje się na pasku nawigacyjnym. Jest to dodawane przez nasz JavaScript i pomaga nam używać niestandardowych stylów pozycji bez zakłócania pozycjonowania Poppera.
ŁamanieZrezygnowano flipz opcji rozwijanej wtyczki na rzecz natywnej konfiguracji Poppera. Możesz teraz wyłączyć zachowanie odwracania, przekazując pustą tablicę dla fallbackPlacementsopcji w modyfikatorze odwracania .
Rozwijane menu można teraz kliknąć z nową autoCloseopcją obsługi automatycznego zamykania . Możesz użyć tej opcji, aby zaakceptować kliknięcie wewnątrz lub poza menu rozwijanym, aby uczynić je interaktywnym.
Lista rozwijana obsługuje teraz .dropdown-items zawinięte w <li>s.

Jumbotron

ŁamanieZrezygnowano z komponentu jumbotron, ponieważ można go replikować za pomocą narzędzi. Zobacz nasz nowy przykład Jumbotron na demo.

Lista grup

Dodano nowy .list-group-numberedmodyfikator do grup list.

Navs i karty

Dodano nowe nullzmienne dla font-size, font-weight, colori :hover colordo .nav-linkklasy.

Paski nawigacyjne

ŁamanieNavbars wymagają teraz kontenera (w celu drastycznego uproszczenia wymagań dotyczących odstępów i wymaganego CSS).
ŁamanieKlasy .activenie można już zastosować do .nav-items, należy ją zastosować bezpośrednio do .nav-links.

Offcanvas

Dodano nowy składnik offcanvas .

Paginacja

Łącza do stronicowania mają teraz możliwość dostosowania margin-left, które są dynamicznie zaokrąglane we wszystkich rogach, gdy są od siebie oddzielone.
Dodano transitions do linków stronicowania.

Popovery

ŁamanieZmieniono nazwę .arrowna .popover-arroww naszym domyślnym szablonie popover.
Zmieniono nazwę whiteListopcji na allowList.

Błystki

Prządki honorują teraz prefers-reduced-motion: reduce, spowalniając animacje. Zobacz #31882 .
Ulepszone wyrównanie tarczy w pionie.

Tosty

Grzanki można teraz ustawiać w a .toast-containerza pomocą narzędzi do pozycjonowania .
Zmieniono domyślny czas trwania tostów na 5 sekund.
Usunięty overflow: hiddenz tostów i zastąpiony odpowiednimi border-radiuss z calc()funkcjami.

Podpowiedzi

ŁamanieZmieniono nazwę .arrowna .tooltip-arroww naszym domyślnym szablonie podpowiedzi.
ŁamanieDomyślna wartość dla fallbackPlacementsjest zmieniona na ['top', 'right', 'bottom', 'left']dla lepszego rozmieszczenia elementów poppera.
ŁamanieZmieniono nazwę whiteListopcji na allowList.

Narzędzia

ŁamanieZmieniono nazwy kilku narzędzi tak, aby używały logicznych nazw właściwości zamiast nazw kierunkowych z dodaniem obsługi RTL:
- Zmieniono nazwę .left-*i .right-*na .start-*i .end-*.
- Zmieniono nazwę .float-lefti .float-rightna .float-starti .float-end.
- Zmieniono nazwę .border-lefti .border-rightna .border-starti .border-end.
- Zmieniono nazwę .rounded-lefti .rounded-rightna .rounded-starti .rounded-end.
- Zmieniono nazwę .ml-*i .mr-*na .ms-*i .me-*.
- Zmieniono nazwę .pl-*i .pr-*na .ps-*i .pe-*.
- Zmieniono nazwę .text-lefti .text-rightna .text-starti .text-end.
ŁamanieDomyślnie wyłączone ujemne marginesy.
Dodano nową .bg-bodyklasę do szybkiego ustawiania <body>tła na dodatkowe elementy.
Dodano nowe narzędzia pozycji dla top, right, bottomi left. Wartości obejmują 0, 50%i 100%dla każdej właściwości.
Dodano nowe .translate-middle-xi .translate-middle-ynarzędzia do poziomego lub pionowego wyśrodkowania bezwzględnych/stałych elementów pozycjonowanych.
Dodano nowe border-widthnarzędzia .
ŁamanieZmieniono nazwę .text-monospacena .font-monospace.
ŁamanieUsunięto .text-hide, ponieważ jest to przestarzała metoda ukrywania tekstu, którego nie należy już używać.
Dodano .fs-*narzędzia dla font-sizenarzędzi (z włączonym RFS). Używają one tej samej skali, co domyślne nagłówki HTML (1-6, od dużego do małego) i można je modyfikować za pomocą mapy Sass.
ŁamanieZmieniono nazwy .font-weight-*narzędzi ze .fw-*względu na zwięzłość i spójność.
ŁamanieZmieniono nazwy .font-style-*narzędzi ze .fst-*względu na zwięzłość i spójność.
Dodano .d-griddo wyświetlania narzędzi i nowych gapnarzędzi ( .gap) dla układów CSS Grid i flexbox.
ŁamanieUsunięto .rounded-smi rounded-lg, a wprowadzono nową skalę klas, .rounded-0do .rounded-3. Zobacz #31687 .
Dodano nowe line-heightnarzędzia : .lh-1, .lh-smi .lh-base. .lh-lgZobacz tutaj .
Przeniesiono .d-nonenarzędzie w naszym CSS, aby nadać mu większą wagę w stosunku do innych narzędzi do wyświetlania.
Rozszerzono .visually-hidden-focusablepomocnika, aby działał również na kontenerach, używając :focus-within.

Pomocnicy

Łamanie Responsywne helpery embed zostały przemianowane na helpery ratio z nowymi nazwami klas i ulepszonymi zachowaniami, a także pomocną zmienną CSS.
- Zmieniono nazwy klas, aby zmienić byich xproporcje na. Na przykład .ratio-16by9jest teraz .ratio-16x9.
- Zrezygnowaliśmy z .embed-responsive-itemselektora i grupy elementów na rzecz prostszego .ratio > *selektora. Nie potrzeba więcej klasy, a helper ratio działa teraz z dowolnym elementem HTML.
- Mapa $embed-responsive-aspect-ratiosSass została zmieniona na, $aspect-ratiosa jej wartości zostały uproszczone, tak aby zawierała nazwę klasy i procent jako key: valueparę.
- Zmienne CSS są teraz generowane i uwzględniane dla każdej wartości na mapie Sass. Zmodyfikuj --bs-aspect-ratiozmienną na , .ratioaby utworzyć dowolny niestandardowy współczynnik proporcji .
Łamanie Klasy „Czytnik ekranu” są teraz klasami „ukrytymi wizualnie” .
- Zmieniono plik Sass z scss/helpers/_screenreaders.scssnascss/helpers/_visually-hidden.scss
- Zmieniono nazwę .sr-onlyi .sr-only-focusablena .visually-hiddeni.visually-hidden-focusable
- Zmieniono nazwę sr-only()i sr-only-focusable()domieszki na visually-hidden()i visually-hidden-focusable().
bootstrap-utilities.cssteraz obejmuje również naszych pomocników. Pomocników nie trzeba już importować w kompilacjach niestandardowych.

JavaScript

Zrezygnowano z zależności jQuery i przepisano wtyczki, aby były w zwykłym JavaScript.
ŁamanieAtrybuty danych dla wszystkich wtyczek JavaScript mają teraz przestrzeń nazw, aby pomóc odróżnić funkcjonalność Bootstrap od stron trzecich i własnego kodu. Na przykład używamy data-bs-togglezamiast data-toggle.
Wszystkie wtyczki mogą teraz akceptować selektor CSS jako pierwszy argument. Możesz przekazać element DOM lub dowolny prawidłowy selektor CSS, aby utworzyć nową instancję wtyczki:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigmożna przekazać jako funkcję, która akceptuje domyślną konfigurację Poppera Bootstrapa jako argument, dzięki czemu można scalić tę domyślną konfigurację na swój sposób. Dotyczy list rozwijanych, okienek naręcznych i podpowiedzi.
Domyślna wartość dla fallbackPlacementsjest zmieniona na ['top', 'right', 'bottom', 'left']dla lepszego rozmieszczenia elementów Poppera. Dotyczy list rozwijanych, okienek naręcznych i podpowiedzi.
Usunięto podkreślenie z publicznych metod statycznych, takich jak _getInstance()→ getInstance().