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

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-checkjest teraz .form-check.
- .custom-check.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.
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 zakotwiczenie 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 ustawiony, gdy pozycja menu rozwijanego jest statyczna i data-bs-popper="none"gdy 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).

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:
```
var modal = new bootstrap.Modal('#myModal')
var 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().