Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
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.

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ę Tematy 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 nr 28265 i stronę narzędzi flex, aby zapoznać się z przykładem .

  • Ł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

  • 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.

  • Trwający od dawna 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

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.

  • 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ż JavaScript 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 korzyść 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 .

  • 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 &times;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.
  • Dodano nowy.dropdown-menu-dark wariant 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

Lista grup

  • Dodano nowe nullzmienne dla font-size, font-weight, colori :hover colordo .nav-linkklasy.
  • ŁamanieNavbars wymagają teraz kontenera (w celu drastycznego uproszczenia wymagań dotyczących odstępów i wymaganego CSS).

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 także 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().