Migracja do v4

Bootstrap 4 to główna przeróbka całego projektu. Poniżej podsumowano najważniejsze zmiany, a następnie bardziej szczegółowe zmiany w odpowiednich komponentach.

Stabilne zmiany

Przechodząc z wersji Beta 3 do naszej stabilnej wersji 4.0, nie ma żadnych przełomowych zmian, ale jest kilka znaczących zmian.

Druk

• Naprawiono uszkodzone narzędzia drukowania. Wcześniej użycie .d-print-*klasy nieoczekiwanie unieważniało każdą inną .d-*klasę. Teraz pasują do naszych innych narzędzi wyświetlania i dotyczą tylko tego nośnika ( @media print).

• Rozszerzono dostępne narzędzia wyświetlania wydruku, aby pasowały do ​​innych narzędzi. Beta 3 i starsze miały tylko block, inline-block, inlinei none. Dodano stabilną wersję 4 flex, inline-flex, table, table-rowi table-cell.

• Naprawiono renderowanie podglądu wydruku w przeglądarkach z nowymi stylami wydruku, które określają @page size.

Zmiany w wersji beta 3

Podczas gdy Beta 2 widziała większość naszych przełomowych zmian w fazie beta, wciąż mamy kilka, które wymagały rozwiązania w wydaniu Beta 3. Te zmiany obowiązują w przypadku aktualizacji do wersji Beta 3 z wersji Beta 2 lub dowolnej starszej wersji Bootstrap.

Różnorodny

• Usunięto nieużywaną $thumbnail-transitionzmienną. Niczego nie zmienialiśmy, więc był to tylko dodatkowy kod.
• Pakiet npm nie zawiera już żadnych plików innych niż nasze pliki źródłowe i dystrybucyjne; jeśli polegałeś na nich i uruchamiałeś nasze skrypty za pośrednictwem node_modulesfolderu, powinieneś dostosować swój przepływ pracy.

Formularze

• Przepisano zarówno niestandardowe, jak i domyślne pola wyboru i radia. Teraz oba mają dopasowaną strukturę HTML (zewnętrzna <div>z siostrzanym <input>i <label>) i te same style układu (ułożone domyślnie, wbudowane z klasą modyfikatora). Dzięki temu możemy stylizować etykietę w oparciu o stan danych wejściowych, upraszczając obsługę disabledatrybutu (wcześniej wymagającą klasy nadrzędnej) i lepiej obsługując naszą walidację formularza.

  W ramach tego zmieniliśmy CSS do zarządzania wieloma background-images w polach wyboru formularzy niestandardowych i radiach. Wcześniej usunięty .custom-control-indicatorelement miał kolor tła, gradient i ikonę SVG. Dostosowanie gradientu tła oznaczało zastąpienie ich wszystkich za każdym razem, gdy trzeba było zmienić tylko jeden. Teraz mamy .custom-control-label::beforedo wypełnienia i gradientu oraz .custom-control-label::afterobsługuje ikonę.

  Aby utworzyć czek niestandardowy, dodaj .custom-control-inline.

• Zaktualizowany selektor dla grup przycisków opartych na danych wejściowych. Zamiast [data-toggle="buttons"] { }stylu i zachowania używamy dataatrybutu tylko dla zachowań JS i polegamy na nowej .btn-group-toggleklasie do stylizacji.

• Usunięto .col-form-legendna rzecz nieco ulepszonej .col-form-label. W ten sposób .col-form-label-smi .col-form-label-lgmoże być <legend>z łatwością stosowany na elementach.

• Niestandardowe dane wejściowe plików otrzymały zmianę w swojej $custom-file-textzmiennej Sass. Nie jest to już zagnieżdżona mapa Sassa, a teraz zasila tylko jeden ciąg — Browseprzycisk, ponieważ jest to teraz jedyny pseudo-element generowany z naszego Sassa. Tekst Choose filepochodzi teraz z .custom-file-label.

Grupy wejściowe

• Dodatki grupy danych wejściowych są teraz zależne od ich położenia względem danych wejściowych. Zrezygnowaliśmy .input-group-addoni .input-group-btndla dwóch nowych klas .input-group-prependi .input-group-append. Musisz teraz wyraźnie użyć dodatku lub przedrostka, upraszczając wiele z naszego CSS. W dodawaniu lub dołączaniu umieść przyciski tak, jak mogłyby istnieć gdziekolwiek indziej, ale zawijaj tekst w .input-group-text.

• Style walidacji są teraz obsługiwane, podobnie jak wiele danych wejściowych (chociaż można sprawdzać tylko jedno dane wejściowe na grupę).

• Klasy rozmiarów muszą znajdować się w elemencie nadrzędnym .input-group, a nie w poszczególnych elementach formularza.

Zmiany w wersji beta 2

W fazie beta nie chcemy wprowadzać przełomowych zmian. Jednak nie zawsze wszystko idzie zgodnie z planem. Poniżej znajdują się przełomowe zmiany, o których należy pamiętać przy przejściu z wersji Beta 1 do Beta 2.

Łamanie

• Usunięto $badge-colorzmienną i jej wykorzystanie w dniu .badge. Używamy funkcji kontrastu kolorów, aby wybrać na colorpodstawie background-color, więc zmienna jest niepotrzebna.
• Zmieniono nazwę grayscale()funkcji, gray()aby uniknąć konfliktu z natywnym grayscalefiltrem CSS.
• Zmieniono nazwy .table-inverse, .thead-inverse, oraz .thead-defaultna .*-darki .*-light, zgodnie z naszymi schematami kolorów używanymi w innych miejscach.
• Responsywne tabele generują teraz klasy dla każdego punktu przerwania siatki. To różni się od wersji Beta 1, ponieważ .table-responsiveużywany przez Ciebie jest bardziej podobny do .table-responsive-md. Możesz teraz użyć .table-responsivelub .table-responsive-{sm,md,lg,xl}w razie potrzeby.
• Porzucono obsługę Bowera, ponieważ menedżer pakietów został przestarzały dla alternatyw (np. Yarn lub npm). Zobacz altanka/altana#2298 po szczegóły.
• Bootstrap nadal wymaga jQuery 1.9.1 lub nowszej, ale zaleca się używanie wersji 3.x, ponieważ obsługiwane przeglądarki v3.x to te, które obsługuje Bootstrap, a v3.x zawiera pewne poprawki bezpieczeństwa.
• Usunięto nieużywaną .form-control-labelklasę. Jeśli skorzystałeś z tej klasy, była to duplikat .col-form-labelklasy, która pionowo wyśrodkowała a <label>z powiązanymi danymi wejściowymi w układach formularzy poziomych.
• Zmieniono color-yiqmixin, który zawierał colorwłaściwość, na funkcję zwracającą wartość, co pozwala na użycie jej dla dowolnej właściwości CSS. Na przykład zamiast color-yiq(#000), napisałbyś color: color-yiq(#000);.

Przegląd najważniejszych wydarzeń

• Wprowadzono nowe pointer-eventszastosowanie na modalach. Zewnętrzna .modal-dialogprzechodzi przez zdarzenia z pointer-events: noneobsługą niestandardowego kliknięcia (umożliwiając po prostu nasłuchiwanie .modal-backdropwszelkich kliknięć), a następnie przeciwdziała temu rzeczywistemu .modal-contentza pomocą pointer-events: auto.

Streszczenie

Oto najważniejsze elementy biletu, o których warto wiedzieć, przechodząc z wersji 3 na 4.

Obsługa przeglądarki

• Zrezygnowano z obsługi IE8, IE9 i iOS 6. v4 to teraz tylko IE10+ i iOS 7+. W przypadku witryn wymagających jednego z nich użyj wersji v3.
• Dodano oficjalne wsparcie dla przeglądarki Android v5.0 Lollipop i WebView. Wcześniejsze wersje przeglądarki Android i WebView pozostają tylko nieoficjalnie obsługiwane.

Zmiany globalne

• Flexbox jest domyślnie włączony. Ogólnie oznacza to odejście od pływaków i nie tylko w naszych komponentach.
• Zmieniono wersję Less na Sass dla naszych źródłowych plików CSS.
• Zmieniono pxna remnaszą podstawową jednostkę CSS, ale piksele są nadal używane do zapytań o media i zachowania siatki, ponieważ rozmiar typu nie ma wpływu na widoczne urządzenia.
• Zwiększono globalny rozmiar czcionki z 14pxdo 16px.
• Zmieniono poziomy siatki, aby dodać piątą opcję (odnoszącą się do mniejszych urządzeń na 576pxi poniżej) i usunąć -xswrostek z tych klas. Przykład: .col-6.col-sm-4.col-md-3.
• Zamieniono oddzielny motyw opcjonalny na opcje konfigurowalne za pomocą zmiennych SCSS (np $enable-gradients: true. ).
• Przebudowany system kompilacji, aby używać serii skryptów npm zamiast Grunta. Zobacz package.jsonwszystkie skrypty lub nasz projekt readme dla potrzeb lokalnego rozwoju.
• Niereagujące użycie Bootstrap nie jest już obsługiwane.
• Zrezygnowano z konfiguratora online na rzecz obszerniejszej dokumentacji konfiguracji i niestandardowych kompilacji.
• Dodano dziesiątki nowych klas narzędziowych dla typowych par właściwość-wartość CSS oraz skrótów dotyczących odstępów margines/dopełnienie.

System siatki

• Przeniesiono do flexboxa.
  • Dodano wsparcie dla flexbox w mixinach siatki i predefiniowanych klasach.
  • W ramach flexbox włączono obsługę klas wyrównania w pionie i poziomie.
• Zaktualizowano nazwy klas siatki i nowy poziom siatki.
  • Dodano nowy smpoziom siatki poniżej 768px, aby uzyskać bardziej szczegółową kontrolę. Mamy teraz xs, sm, md, lgi xl. Oznacza to również, że każdy poziom został podniesiony o jeden poziom (więc .col-md-6w wersji 3 jest teraz .col-lg-6w wersji 4).
  • xsklasy siatki zostały zmodyfikowane tak, aby nie wymagały, aby wrostek dokładniej wskazywał, że zaczynają stosować style od min-width: 0wartości ustawionej w pikselach, a nie od niej. Zamiast .col-xs-6, jest teraz .col-6. Wszystkie inne warstwy siatki wymagają wrostka (np sm. ).
• Zaktualizowano rozmiary siatki, domieszki i zmienne.
  • Rynny siatki mają teraz mapę Sass, dzięki czemu możesz określić określone szerokości rynny w każdym punkcie przerwania.
  • Zaktualizowano mieszankę siatkową, aby wykorzystać make-col-readymieszankę przygotowawczą i a, make-colaby ustawić flexi max-widthdla indywidualnego rozmiaru kolumny.
  • Zmieniono punkty przerwania zapytań o media systemu siatki i szerokości kontenerów, aby uwzględnić nową warstwę siatki i zapewnić równomierne dzielenie kolumn przez 12przy ich maksymalnej szerokości.
  • Punkty przerwania siatki i szerokości kontenerów są teraz obsługiwane za pomocą map Sass ( $grid-breakpointsi $container-max-widths) zamiast kilku oddzielnych zmiennych. Zastępują one @screen-*całkowicie zmienne i pozwalają w pełni dostosować poziomy siatki.
  • Zapytania mediów również uległy zmianie. Zamiast powtarzać nasze deklaracje zapytań o media za każdym razem z tą samą wartością, mamy teraz @include media-breakpoint-up/down/only. Teraz zamiast pisać @media (min-width: @screen-sm-min) { ... }, możesz pisać @include media-breakpoint-up(sm) { ... }.

składniki

• Porzucone panele, miniatury i zagłębienia dla nowego, wszechogarniającego komponentu, kart .
• Usunięto czcionkę ikony Glyphicons. Jeśli potrzebujesz ikon, niektóre opcje to:
  • upstream wersja Glyphicons
  • Octicons
  • Czcionka niesamowita
  • Zobacz stronę Rozszerzenie, aby uzyskać listę alternatyw. Masz dodatkowe sugestie? Otwórz zgłoszenie lub PR.
• Zrezygnowano z wtyczki Affix jQuery.
  • Zalecamy używanie position: stickyzamiast tego. Zobacz wpis HTML5, aby uzyskać szczegółowe informacje i konkretne zalecenia dotyczące wypełnienia. Jedną z sugestii jest użycie @supportsreguły do ​​jej implementacji (np. @supports (position: sticky) { ... })/
  • Jeśli używasz afiksu do zastosowania dodatkowych, nie positionbędących stylami, wypełnienia mogą nie obsługiwać twojego przypadku użycia. Jedną z opcji takich zastosowań jest biblioteka ScrollPos-Styler innej firmy.
• Porzucono składnik pagera, ponieważ był to zasadniczo nieznacznie dostosowane przyciski.
• Zrefaktoryzowano prawie wszystkie komponenty, aby używać więcej niezagnieżdżonych selektorów klas zamiast nadmiernie określonych selektorów potomnych.

Według składnika

Ta lista przedstawia kluczowe zmiany według komponentów między wersjami 3.xx i 4.0.0.

Restart

Nowością w Bootstrap 4 jest Reboot , nowy arkusz stylów, który opiera się na Normalize z naszymi własnymi, nieco upartymi stylami resetowania. Selektory pojawiające się w tym pliku używają tylko elementów — nie ma tu żadnych klas. To izoluje nasze style resetowania od stylów komponentów, zapewniając bardziej modułowe podejście. Niektóre z najważniejszych resetów, które obejmują, to box-sizing: border-boxzmiana, przechodzenie od jednostek emdo remwielu elementów, style linków i wiele resetów elementów formularza.

Typografia

• Przeniesiono wszystkie .text-narzędzia do _utilities.scsspliku.
• Porzucone .page-header, ponieważ oprócz obramowania wszystkie jego style można zastosować za pomocą narzędzi.
• .dl-horizontalzostał upuszczony. Zamiast tego użyj .rowna <dl>i użyj klas kolumn siatki (lub domieszek) na jego <dt>i elementach podrzędnych <dd>.
• Styl niestandardowy <blockquote>został przeniesiony do klas — .blockquotei .blockquote-reversemodyfikatora.
• .list-inlineteraz wymaga, aby elementy listy podrzędnej miały .list-inline-itemdo ​​nich zastosowaną nową klasę.

Obrazy

• Zmieniono nazwę .img-responsivena .img-fluid.
• Zmieniono nazwę .img-roundedna.rounded
• Zmieniono nazwę .img-circlena.rounded-circle

Stoły

• Niemal wszystkie wystąpienia >selektora zostały usunięte, co oznacza, że ​​zagnieżdżone tabele będą teraz automatycznie dziedziczyć style od swoich rodziców. To znacznie upraszcza nasze selektory i potencjalne dostosowania.
• Responsywne tabele nie wymagają już elementu zawijania. Zamiast tego po prostu ustaw .table-responsiveprawo na <table>.
• Zmieniono nazwę .table-condensedna .table-smspójność.
• Dodano nową .table-inverseopcję.
• Dodano modyfikatory nagłówków tabeli: .thead-defaulti .thead-inverse.
• Zmieniono nazwy klas kontekstowych, aby miały .table-prefiks -. Stąd .active, .success, .warning, .dangeri .infodo .table-active, .table-success, .table-warning, .table-dangeri .table-info.

Formularze

• Przeniesiony element resetuje się do _reboot.scsspliku.
• Zmieniono nazwę .control-labelna .col-form-label.
• Zmieniono nazwę odpowiednio na .input-lgi .input-smna .form-control-lgi .form-control-sm.
• Porzucone .form-group-*klasy dla uproszczenia. Zamiast tego używaj .form-control-*klas.
• Porzucono .help-blocki zastąpiono .form-texttekstem pomocy na poziomie bloku. W przypadku tekstu pomocy wbudowanej i innych elastycznych opcji użyj klas narzędziowych, takich jak .text-muted.
• Porzucono .radio-inlinei .checkbox-inline.
• Skonsolidowane .checkboxi .radiopodzielone .form-checkna różne .form-check-*klasy.
• Remonty poziome form:
  • Zrezygnowano z .form-horizontalwymagań klasowych.
  • .form-groupnie stosuje już stylów z .rowdomieszki via, więc .rowjest teraz wymagane dla poziomych układów siatki (np <div class="form-group row">. ).
  • Dodano nową .col-form-labelklasę do wyśrodkowania w pionie etykiet z .form-controls.
  • Dodano nowe .form-rowdla kompaktowych układów formularzy z klasami siatki (zamień swój .rowna .form-rowi idź).
• Dodano obsługę formularzy niestandardowych (dla pól wyboru, radia, zaznaczeń i danych wejściowych plików).
• Zastąpiono .has-error, .has-warning, i .has-successklasy walidacją formularzy HTML5 za pomocą CSS :invalidi :validpseudoklas.
• Zmieniono nazwę .form-control-staticna .form-control-plaintext.

guziki

• Zmieniono nazwę .btn-defaultna .btn-secondary.
• Porzucił .btn-xsklasę całkowicie, ponieważ .btn-smjest proporcjonalnie znacznie mniejsza niż v3.
• Funkcja przycisku stanowego wtyczki button.jsjQuery została usunięta. Obejmuje to metody $().button(string)i $().button('reset'). Radzimy zamiast tego użyć odrobiny niestandardowego kodu JavaScript, który będzie zachowywał się dokładnie tak, jak chcesz.
  • Zwróć uwagę, że inne funkcje wtyczki (pola wyboru przycisków, przyciski radiowe, przyciski pojedynczego przełączania) zostały zachowane w wersji 4.
• Zmień przyciski” [disabled]na takie, jakie :disabledobsługuje IE9+ :disabled. Jednak fieldset[disabled]nadal jest to konieczne, ponieważ natywne wyłączone zestawy pól są nadal wadliwe w IE11 .

Grupa przycisków

• Przepisano komponent z flexboxem.
• Usunięto .btn-group-justified. Jako zamiennik możesz użyć <div class="btn-group d-flex" role="group"></div>jako wrappera wokół elementów z .w-100.
• Porzucono .btn-group-xsklasę całkowicie po usunięciu .btn-xs.
• Usunięto wyraźne odstępy między grupami przycisków w paskach narzędzi przycisków; użyj narzędzi do marży.
• Ulepszona dokumentacja do użytku z innymi komponentami.

Menu rozwijane

• Zmieniono selektory nadrzędne na pojedyncze klasy dla wszystkich komponentów, modyfikatorów itp.
• Uproszczone style rozwijane, które nie są już dostarczane ze strzałkami skierowanymi w górę lub w dół dołączonymi do menu rozwijanego.
• Listy rozwijane można teraz tworzyć za pomocą <div>s lub <ul>s.
• Przebudowane style rozwijane i znaczniki, aby zapewnić łatwą, wbudowaną obsługę <a>i <button>oparte na rozwijanych elementach.
• Zmieniono nazwę .dividerna .dropdown-divider.
• Pozycje rozwijane wymagają teraz .dropdown-item.
• Przełączniki rozwijane nie wymagają już wyraźnego <span class="caret"></span>; jest to teraz dostarczane automatycznie przez CSS ::afteron .dropdown-toggle.

System siatki

• Dodano nowy 576pxpunkt przerwania siatki jako sm, co oznacza, że ​​istnieje teraz łącznie pięć poziomów ( xs, sm, md, lgi xl).
• Zmieniono nazwę responsywnych klas modyfikatorów siatki z .col-{breakpoint}-{modifier}-{size}na .{modifier}-{breakpoint}-{size}dla prostszych klas siatki.
• Zrezygnowano z klas modyfikatorów push i pull dla nowych klas opartych na flexboksie order. Na przykład zamiast .col-8.push-4i .col-4.pull-8użyjesz .col-8.order-2i .col-4.order-1.
• Dodano klasy użyteczności flexbox dla systemu grid i komponentów.

Lista grup

• Przepisano komponent z flexboxem.
• Zastąpiona a.list-group-itemjawną klasą , .list-group-item-actiondo stylizowania wersji linków i przycisków elementów grupy list.
• Dodano .list-group-flushklasę do użytku z kartami.

Modalny

• Przepisano komponent z flexboxem.
• Biorąc pod uwagę przejście do flexboksa, wyrównanie ikon odrzucania w nagłówku prawdopodobnie jest zepsute, ponieważ nie używamy już elementów pływających. Treść pływająca jest na pierwszym miejscu, ale w przypadku flexboxa już tak nie jest. Zaktualizuj ikony odrzucania, aby pojawiły się po tytułach modalnych, aby to naprawić.
• Opcja remote(która mogła być używana do automatycznego ładowania i wstrzykiwania zawartości zewnętrznej do modu) i odpowiednie loaded.bs.modalzdarzenie zostały usunięte. Zamiast tego zalecamy korzystanie z szablonów po stronie klienta lub struktury wiązania danych albo samodzielne wywołanie jQuery.load .

Navs

• Przepisano komponent z flexboxem.
• Porzucono prawie wszystkie >selektory, aby uprościć stylizację za pomocą niezagnieżdżonych klas.
• Zamiast selektorów specyficznych dla HTML, takich jak .nav > li > a, używamy oddzielnych klas dla .navs, .nav-items i .nav-links. Dzięki temu Twój kod HTML jest bardziej elastyczny, a jednocześnie zwiększa się jego rozszerzalność.

Pasek nawigacyjny

Pasek nawigacyjny został całkowicie przepisany w flexboksie z ulepszoną obsługą wyrównania, responsywności i dostosowywania.

• Responsywne zachowania paska nawigacyjnego są teraz stosowane do .navbarklasy za pośrednictwem wymaganego .navbar-expand-{breakpoint} miejsca, w którym wybierasz miejsce zwinięcia paska nawigacyjnego. Wcześniej była to modyfikacja mniej zmienna i wymagała ponownej kompilacji.
• .navbar-defaultjest teraz .navbar-light, choć .navbar-darkpozostaje taka sama. Jeden z nich jest wymagany na każdym pasku nawigacyjnym. Jednak te klasy już nie ustawiają background-colors; zamiast tego zasadniczo wpływają tylko na color.
• Paski nawigacyjne wymagają teraz pewnego rodzaju deklaracji w tle. Wybierz z naszych narzędzi tła ( .bg-*) lub ustaw własne, korzystając z powyższych klas światła/odwrotności, aby uzyskać szaloną personalizację .
• Biorąc pod uwagę style flexbox, paski nawigacyjne mogą teraz używać narzędzi flexbox dla łatwych opcji wyrównania.
• .navbar-togglejest teraz .navbar-toggleri ma różne style i wewnętrzne znaczniki (nie więcej trzech <span>s).
• Całkowicie porzuciłem .navbar-formklasę. Nie jest to już konieczne; zamiast tego po prostu używaj .form-inlinei stosuj narzędzia marginesowe w razie potrzeby.
• Paski nawigacyjne nie zawierają już margin-bottomani border-radiusdomyślnie. W razie potrzeby użyj narzędzi.
• Wszystkie przykłady zawierające paski nawigacyjne zostały zaktualizowane i zawierają nowe znaczniki.

Paginacja

• Przepisano komponent z flexboxem.
• Klasy jawne ( .page-item, .page-link) są teraz wymagane na potomkach .paginations
• Całkowicie usunięto .pagerkomponent, ponieważ był to niewiele więcej niż niestandardowe przyciski konturu.

Bułka tarta

• Wyraźna klasa , .breadcrumb-itemjest teraz wymagana na potomkach .breadcrumbs

Etykiety i odznaki

• Zmieniono nazwę .labelna, .badgeaby odróżnić od <label>elementu.
• Porzucono .badgekomponent, ponieważ był prawie identyczny z etykietami. Użyj .badge-pillmodyfikatora razem z komponentem etykiety, aby uzyskać zaokrąglony wygląd.
• Plakietki nie są już automatycznie unoszone w grupach list i innych komponentach. Do tego potrzebne są teraz klasy użytkowe.
• .badge-defaultzostał usunięty i .badge-secondarydodany w celu dopasowania klas modyfikatorów komponentów używanych gdzie indziej.

Panele, miniatury i studnie

Porzucone całkowicie dla nowego komponentu karty.

Panele

• .paneldo .card, teraz zbudowany z flexbox.
• .panel-defaultusunięte i bez wymiany.
• .panel-groupusunięte i bez wymiany. .card-groupnie jest zamiennikiem, jest inaczej.
• .panel-headingdo.card-header
• .panel-titledo .card-title. W zależności od pożądanego wyglądu możesz również użyć elementów lub klas nagłówków (np <h3>. , .h3) lub elementów lub klas pogrubionych (np <strong>. , <b>, .font-weight-bold). Zauważ, że .card-title, chociaż podobnie nazwany, daje inny wygląd niż .panel-title.
• .panel-bodydo.card-body
• .panel-footerdo.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warningi .panel-dangerzostały porzucone dla .bg-, .text-, oraz .bordernarzędzi wygenerowanych z naszej $theme-colorsmapy Sass.

Postęp

• Zastąpiono .progress-bar-*klasy kontekstowe .bg-*narzędziami. Na przykład class="progress-bar progress-bar-danger"staje się class="progress-bar bg-danger".
• Zastąpiono .activedla animowanych pasków postępu .progress-bar-animated.

Karuzela

• Przerobiliśmy cały komponent, aby uprościć projektowanie i stylizację. Mamy mniej stylów do zastąpienia, nowe wskaźniki i nowe ikony.
• Wszystkie CSS zostały rozgnieżdżone i zmieniono ich nazwy, zapewniając, że każda klasa ma przedrostek .carousel-.
  • W przypadku elementów karuzeli , .next, .prev, .lefti .rightsą teraz .carousel-item-next, .carousel-item-prev, .carousel-item-left, i .carousel-item-right.
  • .itemjest również teraz .carousel-item.
  • W przypadku kontrolek prev/next są teraz .carousel-control.righti , co oznacza, że ​​nie wymagają już określonej klasy bazowej..carousel-control.left.carousel-control-next.carousel-control-prev
• Usunięto wszystkie responsywne style, odnoszące się do narzędzi (np. wyświetlanie podpisów w niektórych rzutniach) i niestandardowe style w razie potrzeby.
• Usunięto nadpisania obrazów dla obrazów w elementach karuzeli, odnosząc się do narzędzi.
• Poprawiono przykład karuzeli, aby uwzględnić nowe znaczniki i style.

Stoły

• Usunięto obsługę stylizowanych tabel zagnieżdżonych. Wszystkie style tabel są teraz dziedziczone w wersji 4 dla prostszych selektorów.
• Dodano wariant tabeli odwróconej.

Narzędzia

• Wyświetlaj, ukrywaj i nie tylko:
  • Umożliwiono responsywność narzędzi wyświetlania (np. .d-nonei d-{sm,md,lg,xl}-none).
  • Zrezygnowano z większości .hidden-*narzędzi dla nowych narzędzi wyświetlania . Na przykład zamiast .hidden-sm-up, użyj .d-sm-none. Zmieniono nazwy .hidden-printnarzędzi, aby korzystały ze schematu nazewnictwa narzędzi wyświetlania. Więcej informacji można znaleźć w sekcji Responsywne narzędzia na tej stronie.
  • Dodano .float-{sm,md,lg,xl}-{left,right,none}i usunięto klasy dla responsywnych elementów pływających, .pull-lefta .pull-rightponieważ są one nadmiarowe w .float-lefti .float-right.
• Rodzaj:
  • Dodano responsywne odmiany do naszych klas wyrównania tekstu .text-{sm,md,lg,xl}-{left,center,right}.
• Wyrównanie i odstępy:
  • Dodano nowe narzędzia do responsywnych marginesów i dopełniania dla wszystkich stron, a także skrócone pionowe i poziome.
  • Dodano mnóstwo narzędzi flexbox .
  • Wypada .center-blockz nowej .mx-autoklasy.
• Zaktualizowano Clearfix, aby usunąć obsługę starszych wersji przeglądarek.

Mieszanki prefiksu dostawcy

Mieszanki prefiksów dostawcy Bootstrap 3 , które zostały przestarzałe w wersji 3.2.0, zostały usunięte w Bootstrap 4. Ponieważ używamy Autoprefixera , nie są już potrzebne.

Usunięto następujące mixiny: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Dokumentacja

Nasza dokumentacja również została uaktualniona. Oto dół:

• Nadal używamy Jekyll, ale mamy w miksie wtyczki:
  • bugify.rbsłuży do efektywnego wyświetlania wpisów na naszej stronie z błędami przeglądarki .
  • example.rbjest niestandardowym rozwidleniem domyślnej highlight.rbwtyczki, pozwalającym na łatwiejszą obsługę przykładowego kodu.
  • callout.rbjest podobnym niestandardowym widelcem, ale zaprojektowanym z myślą o naszych specjalnych objaśnieniach w dokumentach.
  • markdown-block.rbsłuży do renderowania fragmentów kodu Markdown w elementach HTML, takich jak tabele.
  • jekyll-toc służy do generowania naszego spisu treści.
• Cała zawartość dokumentów została przepisana w języku Markdown (zamiast HTML), aby ułatwić edycję.
• Strony zostały zreorganizowane w celu uproszczenia treści i bardziej przystępnej hierarchii.
• Przeszliśmy od zwykłego CSS do SCSS, aby w pełni wykorzystać zmienne, domieszki i nie tylko Bootstrapa.

Responsywne narzędzia

Wszystkie @screen-zmienne zostały usunięte w wersji 4.0.0. Zamiast tego użyj domieszek media-breakpoint-up(), media-breakpoint-down(), media-breakpoint-only()Sass lub $grid-breakpointsmapy Sass.

Nasze responsywne klasy użyteczności zostały w dużej mierze usunięte na rzecz jawnych displaynarzędzi.

• Klasy .hiddeni .showzostały usunięte, ponieważ kolidowały z metodami $(...).hide()i jQuery. $(...).show()Zamiast tego spróbuj przełączyć [hidden]atrybut lub użyj stylów wbudowanych, takich jak style="display: none;"i style="display: block;".
• Wszystkie .hidden-klasy zostały usunięte, z wyjątkiem narzędzi drukowania, których nazwy zostały zmienione.
  • Usunięto z wersji 3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Usunięto z wersji alfa v4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Narzędzia drukowania nie zaczynają się już od .hidden-lub .visible-, ale od .d-print-.
  • Stare nazwy: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Nowe zajęcia: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Zamiast używać jawnych .visible-*klas, tworzysz element widoczny, po prostu nie ukrywając go w tym rozmiarze ekranu. Możesz połączyć jedną .d-*-noneklasę z jedną .d-*-blockklasą, aby pokazać element tylko na zadanym interwale rozmiarów ekranu (np .d-none.d-md-block.d-xl-none. pokazuje element tylko na średnich i dużych urządzeniach).

Zwróć uwagę, że zmiany w punktach przerwania siatki w wersji 4 oznaczają, że będziesz musiał zwiększyć o jeden punkt przerwania, aby osiągnąć te same wyniki. Nowe responsywne klasy narzędziowe nie próbują uwzględniać mniej typowych przypadków, w których widoczność elementu nie może być wyrażona jako pojedynczy ciągły zakres rozmiarów okienka ekranu; w takich przypadkach będziesz musiał użyć niestandardowego CSS.