Migrácia na v4

Bootstrap 4 je zásadným prepísaním celého projektu. Najpozoruhodnejšie zmeny sú zhrnuté nižšie, po ktorých nasledujú konkrétnejšie zmeny relevantných komponentov.

Stabilné zmeny

Po prechode z Beta 3 na naše stabilné vydanie v4.x nedochádza k žiadnym prelomovým zmenám, no sú tu niektoré pozoruhodné zmeny.

Tlač

• Opravené nefunkčné tlačové nástroje. Predtým by použitie .d-print-*triedy neočakávane zrušilo akúkoľvek inú .d-*triedu. Teraz sa zhodujú s našimi ďalšími zobrazovacími pomôckami a vzťahujú sa len na toto médium ( @media print).

• Rozšírené dostupné nástroje na zobrazenie tlače, aby zodpovedali iným nástrojom. Beta 3 a staršia mali iba block, inline-block, inlinea none. Stable v4 pridané flex, inline-flex, table, table-rowa table-cell.

• Opravené vykresľovanie ukážky tlače v rôznych prehliadačoch s novými štýlmi tlače, ktoré špecifikujú @page size.

Beta 3 zmeny

Zatiaľ čo Beta 2 zaznamenala väčšinu našich prelomových zmien počas beta fázy, stále máme niekoľko, ktoré je potrebné vyriešiť vo vydaní Beta 3. Tieto zmeny platia, ak aktualizujete na Beta 3 z Beta 2 alebo akejkoľvek staršej verzie Bootstrapu.

Zmiešaný

• Odstránená nepoužitá $thumbnail-transitionpremenná. Nič sme neprevádzali, takže to bol len dodatočný kód.
• Balík npm už neobsahuje žiadne iné súbory okrem našich zdrojových a dist súborov; ak ste sa na ne spoliehali a spúšťali ste naše skripty cez node_modulespriečinok, mali by ste tomu prispôsobiť svoj pracovný postup.

Formuláre

• Prepíšte vlastné aj predvolené začiarkavacie políčka a rádiá. Teraz majú obe zodpovedajúcu štruktúru HTML (vonkajšiu <div>so súrodencom <input>a <label>) a rovnaké štýly rozloženia (predvolene zoskupené, vložené s triedou modifikátora). To nám umožňuje štylizovať štítok na základe stavu vstupu, zjednodušiť podporu pre disabledatribút (predtým si vyžadoval nadradenú triedu) a lepšie podporovať našu validáciu formulárov.

  V rámci toho sme zmenili CSS pre správu viacerých background-images na začiarkavacích políčkach a rádiách vlastného formulára. Predtým mal teraz odstránený .custom-control-indicatorprvok farbu pozadia, prechod a ikonu SVG. Prispôsobenie gradientu pozadia znamenalo nahradiť všetky vždy, keď ste potrebovali zmeniť iba jeden. Teraz máme .custom-control-label::beforepre výplň a prechod a .custom-control-label::aftermanipuláciu s ikonou.

  Ak chcete vložiť vlastný šek, pridajte .custom-control-inline.

• Aktualizovaný selektor pre skupiny tlačidiel založených na vstupe. Namiesto [data-toggle="buttons"] { }pre štýl a správanie používame dataatribút len ​​pre správanie JS a spoliehame sa na novú .btn-group-toggletriedu pre štýl.

• Odstránené .col-form-legendv prospech mierne vylepšeného .col-form-label. Týmto spôsobom .col-form-label-sma .col-form-label-lgmôže byť použitý na <legend>prvky s ľahkosťou.

• Vstupy vlastných súborov dostali zmenu $custom-file-textpremennej Sass. Už to nie je vnorená mapa Sass a teraz poháňa iba jeden reťazec – Browsetlačidlo, ktoré je teraz jediným pseudoprvkom generovaným z nášho Sass. Text Choose fileteraz pochádza z .custom-file-label.

Vstupné skupiny

• Doplnky skupiny vstupov sú teraz špecifické vzhľadom na ich umiestnenie vzhľadom na vstup. Vypadli sme .input-group-addona .input-group-btnpre dve nové triedy .input-group-prependa .input-group-append. Teraz musíte explicitne použiť pridanie alebo predponu, čo zjednoduší mnohé z našich CSS. V rámci prílohy alebo predpony umiestnite tlačidlá tak, ako by existovali kdekoľvek inde, ale zalamujte text do .input-group-text.

• Štýly overenia sú teraz podporované, rovnako ako viaceré vstupy (hoci môžete overiť iba jeden vstup na skupinu).

• Triedy veľkosti musia byť na rodičovi .input-groupa nie na jednotlivých prvkoch formulára.

Beta 2 sa mení

V beta verzii sa snažíme nerobiť žiadne prevratné zmeny. Nie vždy však veci idú podľa plánu. Nižšie sú uvedené prelomové zmeny, ktoré je potrebné mať na pamäti pri prechode z Beta 1 na Beta 2.

Prelomenie

• Odstránená $badge-colorpremenná a jej použitie na .badge. Používame funkciu farebného kontrastu na výber colorna základe background-color, takže premenná je zbytočná.
• grayscale()Funkcia bola premenovaná na gray(), aby sa predišlo konfliktu s natívnym grayscalefiltrom CSS.
• Premenované .table-inversena , .thead-inverse, a .thead-defaultna .*-darka .*-light, ktoré zodpovedajú našim farebným schémam používaným inde.
• Responzívne tabuľky teraz generujú triedy pre každý bod prerušenia mriežky. Toto sa líši od Beta 1 v tom, že to, .table-responsivečo ste používali, je skôr ako .table-responsive-md. Teraz môžete použiť .table-responsivealebo .table-responsive-{sm,md,lg,xl}podľa potreby.
• Podpora zrušeného Bowera ako správcu balíkov bola pre alternatívy (napr. Yarn alebo npm) zastaraná. Podrobnosti nájdete v časti bower/bower#2298 .
• Bootstrap stále vyžaduje jQuery 1.9.1 alebo novšiu verziu, ale odporúčame vám používať verziu 3.x, pretože podporované prehliadače verzie 3.x sú tie, ktoré Bootstrap podporuje a v3.x má niekoľko bezpečnostných opráv.
• .form-control-labelNepoužívaná trieda bola odstránená . Ak ste túto triedu použili, bola to duplikát .col-form-labeltriedy, ktorá bola vertikálne centrovaná a <label>s jej priradeným vstupom v horizontálnych rozloženiach formulárov.
• Zmenil sa color-yiqz mixinu, ktorý obsahoval colorvlastnosť, na funkciu, ktorá vracia hodnotu, čo vám umožňuje použiť ho pre akúkoľvek vlastnosť CSS. Napríklad namiesto color-yiq(#000), by ste napísali color: color-yiq(#000);.

Zvýraznenie

• Zavedené nové pointer-eventspoužitie na modáloch. Vonkajšie .modal-dialogprechádza cez udalosti s pointer-events: nonepre vlastné spracovanie kliknutí (umožňujúce len počúvať na .modal-backdropakékoľvek kliknutia) a potom proti tomu pôsobí na skutočné .modal-contents pointer-events: auto.

Zhrnutie

Tu sú veľké položky lístkov, o ktorých by ste mali vedieť pri prechode z verzie 3 na verziu 4.

Podpora prehliadača

• Podpora IE8, IE9 a iOS 6 bola zrušená. v4 je teraz len IE10+ a iOS 7+. Pre stránky, ktoré potrebujú jeden z nich, použite v3.
• Pridaná oficiálna podpora pre Android v5.0 Lollipop's Browser a WebView. Staršie verzie prehliadača Android a WebView zostávajú len neoficiálne podporované.

Globálne zmeny

• Flexbox je predvolene povolený. Vo všeobecnosti to znamená odklon od plavákov a viac naprieč našimi komponentmi.
• Pre naše zdrojové súbory CSS sme prešli z Less na Sass .
• Prepnuté z pxna remako na našu primárnu jednotku CSS, hoci pixely sa stále používajú na mediálne dopyty a správanie mriežky, pretože výrezy zariadenia nie sú ovplyvnené veľkosťou typu.
• Globálna veľkosť písma sa zvýšila z 14pxna 16px.
• Prepracované vrstvy mriežky na pridanie piatej možnosti (adresovanie menších zariadení na úrovni 576pxa nižšie) a odstránenie -xsinfixu z týchto tried. Príklad: .col-6.col-sm-4.col-md-3.
• Samostatnú voliteľnú tému nahradili konfigurovateľnými možnosťami prostredníctvom premenných SCSS (napr. $enable-gradients: true).
• Systém zostavy bol prepracovaný tak, aby namiesto Gruntu používal sériu skriptov npm. Pozrite si package.jsonvšetky skripty alebo súbor readme nášho projektu pre potreby miestneho rozvoja.
• Nereagujúce používanie Bootstrapu už nie je podporované.
• Vypustil online Customizer v prospech rozsiahlejšej dokumentácie nastavenia a prispôsobených zostavení.
• Pridané desiatky nových pomocných tried pre bežné páry CSS vlastnosť-hodnota a skratky medzi okrajmi/výplňami.

Mriežkový systém

• Presunuté do flexboxu.
  • Pridaná podpora pre flexbox v mixoch mriežky a preddefinovaných triedach.
  • Súčasťou flexboxu je podpora pre triedy vertikálneho a horizontálneho zarovnania.
• Aktualizované názvy tried mriežky a nová vrstva mriežky.
  • Nižšie bola pridaná nová smvrstva mriežky 768pxpre podrobnejšie ovládanie. Teraz máme xs, sm, md, lga xl. To tiež znamená, že každá úroveň bola zvýšená o jednu úroveň (takže .col-md-6vo verzii 3 je teraz .col-lg-6vo verzii 4).
  • xstriedy mriežky boli upravené tak, aby nevyžadovali infix, aby presnejšie reprezentovali, že začínajú používať štýly pri min-width: 0a nie nastavenej hodnote pixelov. Namiesto .col-xs-6, je to teraz .col-6. Všetky ostatné vrstvy mriežky vyžadujú infix (napr. sm).
• Aktualizované veľkosti mriežky, mixiny a premenné.
  • Mriežkové odkvapy majú teraz mapu Sass, takže môžete určiť konkrétne šírky odkvapov v každom bode zlomu.
  • Aktualizované mriežkové mixy na použitie make-col-readyprípravného mixu a make-colna nastavenie flexa max-widthpre jednotlivé veľkosti stĺpcov.
  • Zmenili sa body prerušenia dopytu médií a šírky kontajnera mriežkového systému, aby sa zohľadnila nová vrstva mriežky a zabezpečilo sa, že stĺpce budú rovnomerne deliteľné podľa 12maximálnej šírky.
  • Prerušovacie body mriežky a šírky kontajnerov sa teraz spracúvajú prostredníctvom máp Sass ( $grid-breakpointsa $container-max-widths) namiesto niekoľkých samostatných premenných. Tieto úplne nahrádzajú @screen-*premenné a umožňujú vám plne prispôsobiť úrovne mriežky.
  • Zmenili sa aj mediálne dopyty. Namiesto toho, aby sme zakaždým opakovali deklarácie mediálnych dopytov s rovnakou hodnotou, teraz máme @include media-breakpoint-up/down/only. Teraz namiesto písania @media (min-width: @screen-sm-min) { ... }môžete písať @include media-breakpoint-up(sm) { ... }.

Komponenty

• Vypustené panely, miniatúry a jamky pre nový všestranný komponent, karty .
• Vypustilo písmo ikony Glyphicons. Ak potrebujete ikony, niektoré možnosti sú:
  • upstream verziu Glyphicons
  • Octicons
  • Font úžasné
  • Pozrite si stránke Rozšíriť nájdete zoznam alternatív. Máte ďalšie návrhy? Otvorte problém alebo PR.
• Zahodili doplnok Affix jQuery.
  • Odporúčame position: stickynamiesto toho použiť. Pozrite si prosím vstup HTML5Podrobnosti a konkrétne odporúčania pre polyfillJedným z návrhov je použiť @supportspravidlo na jeho implementáciu (napr. @supports (position: sticky) { ... })/
  • Ak ste používali Affix na aplikovanie ďalších štýlov, ktoré nie positionsú štýlmi, polyvýplne nemusia podporovať váš prípad použitia. Jednou z možností pre takéto použitie je knižnica ScrollPos-Styler tretej strany .
• Vypadol komponent pagera , pretože to boli v podstate mierne prispôsobené tlačidlá.
• Refaktorované takmer všetky komponenty tak, aby používali viac nevnorených selektorov tried namiesto príliš špecifických selektorov potomkov.

Podľa komponentu

Tento zoznam zvýrazňuje kľúčové zmeny podľa komponentov medzi verziou 3.xx a verziou 4.0.0.

Reštartovať

Novinkou v Bootstrap 4 je Reboot , nová šablóna so štýlmi, ktorá stavia na Normalize s našimi vlastnými trochu názorovo založenými štýlmi resetovania. Selektory v tomto súbore používajú iba prvky – nie sú tu žiadne triedy. Toto izoluje naše štýly resetovania od štýlov komponentov pre modulárnejší prístup. Niektoré z najdôležitejších resetov, ktoré to zahŕňa, sú box-sizing: border-boxzmena, prechod z emna remjednotky na mnohých prvkoch, štýly odkazov a mnohé resetovania prvkov formulára.

Typografia

• Všetky pomôcky boli presunuté .text-do _utilities.scsssúboru.
• Vypustené .page-header, pretože jeho štýly možno použiť pomocou nástrojov.
• .dl-horizontalbola zrušená. Namiesto toho použite .rowna <dl>a použite triedy stĺpcov mriežky (alebo mixiny).<dt> a podriadených <dd>.
• Prepracované blokové úvodzovky, presunutie ich štýlov z <blockquote>prvku do jedinej triedy, .blockquote. Vypustil .blockquote-reversemodifikátor pre textové nástroje.
• .list-inlineteraz vyžaduje, aby položky zoznamu jeho potomkov mali .list-inline-itemaplikovanú novú triedu.

snímky

• Premenovaný .img-responsivena .img-fluid.
• Premenované .img-roundedna.rounded
• Premenované .img-circlena.rounded-circle

Tabuľky

• Takmer všetky inštancie >selektora boli odstránené, čo znamená, že vnorené tabuľky budú teraz automaticky dediť štýly od svojich rodičov. To výrazne zjednodušuje naše selektory a potenciálne prispôsobenia.
• Premenované .table-condensedna .table-smkvôli konzistencii.
• Pridaná nová .table-inversemožnosť.
• Pridané modifikátory hlavičky tabuľky:.thead-default a .thead-inverse.
• Kontextové triedy boli premenované tak, aby mali .table-predponu -. Preto .active, .success, .warning, .dangera .infodo .table-active, .table-success, .table-warning, .table-dangera .table-info.

Formuláre

• Presunutý prvok sa resetuje na_reboot.scss súbor.
• Premenované .control-labelna.col-form-label.
• Premenované .input-lga .input-smna .form-control-lga.form-control-sm , resp.
• Triedy .form-group-*boli kvôli jednoduchosti zrušené. Použite.form-control-* triedy.
• Vypustené .help-blocka nahradené .form-texttextom pomocníka na úrovni bloku. Pre inline pomocný text a ďalšie flexibilné možnosti použite pomocné triedy ako.text-muted .
• Spadol .radio-inlinea.checkbox-inline .
• Konsolidované .checkboxa .radiodo .form-checka rôznych .form-check-*tried.
• Horizontálne tvary prepracované:
  • Upustil od .form-horizontalpožiadavky triedy.
  • .form-groupuž nepoužíva štýly z .rowmixinu via, takže .rowje teraz vyžadovaný pre rozloženie horizontálnej mriežky (napr. <div class="form-group row">).
  • Pridaná nová .col-form-labeltrieda na vertikálne stredové štítky s .form-controls.
  • Pridané nové .form-rowpre kompaktné rozloženia formulárov s triedami mriežky (vymeňte svoje .rowza a .form-rowa choďte).
• Pridaná podpora vlastných formulárov (pre začiarkavacie políčka, rádiá, výbery a vstupy do súborov).
• .has-errorTriedy , .has-warning, a boli nahradené .has-successvalidáciou formulárov HTML5 prostredníctvom CSS :invalida :validpseudotried.
• Premenovaný .form-control-staticna .form-control-plaintext.

Tlačidlá

• Premenovaný .btn-defaultna .btn-secondary.
• Triedu .btn-xsúplne vypustil ako.btn-sm proporcionálne oveľa menšia ako trieda v3.
• Funkcia stavového tlačidla doplnku button.jsjQuery bola zrušená. To zahŕňa metódy $().button(string)a $().button('reset'). Odporúčame namiesto toho použiť malý kúsok vlastného JavaScriptu, ktorý bude mať tú výhodu, že sa bude správať presne tak, ako chcete.
  • Všimnite si, že ostatné funkcie doplnku (začiarkavacie políčka tlačidiel, prepínače tlačidiel, tlačidlá s jedným prepínačom) zostali vo verzii 4 zachované.
• Zmeňte tlačidlá [disabled]na, :disabledpretože IE9+ podporuje :disabled. Je fieldset[disabled]to však stále potrebné, pretože natívne zakázané sady polí sú v IE11 stále chybné .

Skupina tlačidiel

• Prepísaný komponent s flexboxom.
• Odstránené .btn-group-justified. Ako náhradu môžete použiť <div class="btn-group d-flex" role="group"></div>ako obal okolo prvkov s.w-100 .
• Triedu úplne vypustil z .btn-group-xsdôvodu odstránenia .btn-xs.
• Odstránené explicitné medzery medzi skupinami tlačidiel v paneloch nástrojov tlačidiel; teraz použite nástroje na maržu.
• Vylepšená dokumentácia pre použitie s inými komponentmi.

Rozbaľovacie ponuky

• Prepnuté z rodičovských selektorov na singulárne triedy pre všetky komponenty, modifikátory atď.
• Zjednodušené štýly rozbaľovacej ponuky, ktoré sa už nebudú dodávať so šípkami smerujúcimi nahor alebo nadol pripojenými k rozbaľovacej ponuke.
• Rozbaľovacie zoznamy je možné teraz vytvoriť pomocou <div>s alebo <ul>s.
• Prerobené štýly a značky rozbaľovacích zoznamov, ktoré poskytujú jednoduchú, vstavanú podporu pre <a>položky <button>rozbaľovacej ponuky založené na nich.
• Premenovaný .dividerna .dropdown-divider.
• Položky rozbaľovacej ponuky teraz vyžadujú .dropdown-item.
• Rozbaľovacie prepínače už nevyžadujú explicitné <span class="caret"></span>; toto sa teraz poskytuje automaticky prostredníctvom CSS ::afterna .dropdown-toggle.

Mriežkový systém

• Pridaný nový 576pxbod prerušenia mriežky ako sm, čo znamená, že teraz je celkovo päť úrovní ( xs, sm, md, lga xl).
• Premenovali sa responzívne triedy modifikátorov mriežky z .col-{breakpoint}-{modifier}-{size}na .{modifier}-{breakpoint}-{size}jednoduchšie triedy mriežky.
• Vypustené triedy modifikátorov push a pull pre nové triedy poháňané flexboxom order. Napríklad namiesto .col-8.push-4a .col-4.pull-8by ste použili .col-8.order-2a .col-4.order-1.
• Pridané pomocné triedy flexbox pre gridový systém a komponenty.

Zoznam skupín

• Prepísaný komponent s flexboxom.
• Nahradené a.list-group-itemexplicitnou triedou,.list-group-item-action na úpravu verzií odkazov a tlačidiel položiek skupiny zoznamu.
• Pridaná .list-group-flushtrieda pre použitie s kartami.

Modálny

• Prepísaný komponent s flexboxom.
• Vzhľadom na prechod na flexbox je zarovnanie ikon zrušenia v hlavičke pravdepodobne prerušené, pretože už nepoužívame plávajúce objekty. Plávajúci obsah je na prvom mieste, ale s flexboxom to už neplatí. Aktualizujte svoje ikony odmietnutia, aby nasledovali po modálnych názvoch a opravte ich.
• Možnosť remote(ktorá sa dala použiť na automatické načítanie a vloženie externého obsahu do modálu) a zodpovedajúca loaded.bs.modaludalosť boli odstránené. Namiesto toho odporúčame použiť šablóny na strane klienta alebo rámec viazania údajov, prípadne zavolať jQuery.load sami.

Nav

• Prepísaný komponent s flexboxom.
• Zhodili takmer všetky> selektory pre jednoduchší štýl prostredníctvom nevnorených tried.
• Namiesto selektorov špecifických pre HTML, ako .nav > li > aje , používame samostatné triedy pre .navs, .nav-items a .nav-links. Vďaka tomu je váš kód HTML flexibilnejší a zároveň prináša zvýšenú rozšíriteľnosť.

Navbar

Navigačný panel bol úplne prepísaný do flexboxu s vylepšenou podporou zarovnania, odozvy a prispôsobenia.

• Responzívne správanie navigačnej lišty sa teraz aplikuje na .navbartriedu prostredníctvom požadovaného .navbar-expand-{breakpoint} , ​​kde si môžete vybrať, kde sa má navigačná lišta zbaliť. Predtým to bola menej variabilná modifikácia a vyžadovala si rekompiláciu.
• .navbar-defaultje teraz .navbar-light, aj keď .navbar-darkzostáva rovnaký. Jeden z nich sa vyžaduje na každej navigačnej lište. Tieto triedy však už nenastavujú background-colors; namiesto toho v podstate ovplyvňujú iba color.
• Navigačné panely teraz vyžadujú nejaké vyhlásenie o pozadí. Vyberte si z našich pomôcok na pozadí ( .bg-*) alebo si nastavte svoje vlastné pomocou tried light/inverzných vyššie pre šialené prispôsobenie .
• Vzhľadom na štýly flexboxu môžu navigačné panely teraz používať nástroje flexbox na jednoduché možnosti zarovnania.
• .navbar-toggleje teraz .navbar-togglera má rôzne štýly a vnútorné označenie (už nie tri <span>s).
• Triedu .navbar-formúplne vypustil. Už to nie je potrebné; namiesto toho .form-inlinepodľa potreby použite a aplikujte pomocné nástroje okraja.
• Navigačné lišty už neobsahujú margin-bottomrespborder-radius predvolene. Podľa potreby používajte pomôcky.
• Všetky príklady s navigačnými panelmi boli aktualizované, aby obsahovali nové značky.

Stránkovanie

• Prepísaný komponent s flexboxom.
• Explicitné triedy ( .page-item, .page-link) sa teraz vyžadujú na potomkoch .paginations
• Komponent úplne vypadol .pager, pretože bol o niečo viac ako prispôsobené tlačidlá obrysu.

Strúhanka

• Explicitná trieda , .breadcrumb-itemsa teraz vyžaduje na potomkoch .breadcrumbs

Štítky a odznaky

• Konsolidované .labela .badgeodlíšenie od <label>prvku a zjednodušenie súvisiacich komponentov.
• Pridaný .badge-pillako modifikátor pre zaoblený vzhľad „pilulky“.
• Odznaky sa už v skupinách zoznamov a iných komponentoch neumiestňujú automaticky. Na to sú teraz potrebné úžitkové triedy.
• .badge-defaultbol zrušený a .badge-secondarypridaný, aby zodpovedal triedam modifikátorov komponentov používaných inde.

Panely, miniatúry a jamky

Úplne vynechané pre nový komponent karty.

Panely

• .paneldo .card, teraz postavený s flexboxom.
• .panel-defaultodstránené a bez výmeny.
• .panel-groupodstránené a bez výmeny. .card-groupnie je náhrada, je to iné.
• .panel-headingdo.card-header
• .panel-titledo .card-title. V závislosti od požadovaného vzhľadu možno budete chcieť použiť aj prvky alebo triedy nadpisov (napr <h3>. , .h3) alebo prvky alebo triedy s tučným písmom (napr <strong>. , <b>, .font-weight-bold). Všimnite si, že .card-titleaj keď má podobný názov, vytvára iný vzhľad ako .panel-title.
• .panel-bodydo.card-body
• .panel-footerdo.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, a .panel-dangerboli zrušené pre .bg-, .text-, a .borderpomôcky vygenerované z našej $theme-colorsmapy Sass.

Pokrok

• Nahradené kontextové .progress-bar-*triedy .bg-*pomocnými programami. Napríklad sa class="progress-bar progress-bar-danger"stáva class="progress-bar bg-danger".
• .activeAnimované indikátory priebehu boli nahradené znakom .progress-bar-animated.

Kolotoč

• Prepracovaný celý komponent, aby sa zjednodušil dizajn a štýl. Máme pre vás menej štýlov na prepísanie, nové indikátory a nové ikony.
• Všetky CSS boli zrušené vnorením a premenované, čím sa zabezpečilo, že každá trieda má predponu .carousel-.
  • Pre položky karuselu sú , .next, .prev, .lefta .rightteraz .carousel-item-next, .carousel-item-prev, .carousel-item-lefta .carousel-item-right.
  • .itemje aj teraz .carousel-item.
  • Pre predchádzajúce/nasledujúce ovládacie prvky .carousel-control.righta .carousel-control.leftsú teraz .carousel-control-nexta .carousel-control-prev, čo znamená, že už nevyžadujú špecifickú základnú triedu.
• Odstránené všetky responzívne štýly, odloženie na pomocné programy (napr. zobrazovanie titulkov v určitých výrezoch) a vlastné štýly podľa potreby.
• Odstránené prepisy obrázkov pre obrázky v položkách karuselu, odložené na pomocné programy.
• Vylepšili sme príklad Carousel tak, aby zahŕňal nové značky a štýly.

Tabuľky

• Odstránená podpora pre štylizované vnorené tabuľky. Všetky štýly tabuliek sú teraz zdedené vo verzii 4 pre jednoduchšie selektory.
• Pridaný variant inverznej tabuľky.

Verejné služby

• Zobraziť, skryté a ďalšie:
  • Pomôcky displeja boli prispôsobené (napr. .d-nonea d-{sm,md,lg,xl}-none).
  • Upustil od väčšiny .hidden-*nástrojov pre nové nástroje na zobrazenie . Napríklad namiesto .hidden-sm-up, použite .d-sm-none. Premenoval .hidden-printpomocné programy, aby používali schému pomenovania pomocných programov zobrazenia. Viac informácií nájdete v časti Responzívne nástroje na tejto stránke.
  • Pridané .float-{sm,md,lg,xl}-{left,right,none}triedy pre responzívne plávajúce a odstránené .pull-lefta .pull-rightkeďže sú pre .float-lefta .float-right.
• Typ:
  • Do našich tried zarovnania textu boli pridané responzívne variácie .text-{sm,md,lg,xl}-{left,center,right}.
• Zarovnanie a rozstup:
  • Pridané nové nástroje pre responzívne okraje a výplne pre všetky strany, plus vertikálne a horizontálne skratky.
  • Pridaná lodná záťaž flexbox utilít .
  • Odišiel .center-blockdo novej .mx-autotriedy.
• Clearfix bol aktualizovaný, aby zrušil podporu pre staršie verzie prehliadačov.

Mixiny predpony dodávateľa

Mixiny predpony dodávateľa Bootstrapu 3 , ktoré boli zastarané vo verzii 3.2.0, boli z Bootstrapu 4 odstránené. Keďže používame Autoprefixer , už nie sú potrebné.

Odstránili sa nasledujúce mixy : 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-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Dokumentácia

Naša dokumentácia bola tiež aktualizovaná. Tu je spodná časť:

• Stále používame Jekyll, ale v mixe máme pluginy:
  • bugify.rbsa používa na efektívny zoznam záznamov na našej stránke s chybami prehliadača .
  • example.rbje prispôsobená vidlica predvoleného highlight.rbdoplnku, ktorá umožňuje jednoduchšiu manipuláciu s príkladmi kódu.
  • callout.rbje podobná vlastná vidlica, ale navrhnutá pre naše špeciálne popisky dokumentov.
  • jekyll-toc sa používa na generovanie nášho obsahu.
• Všetok obsah dokumentov bol prepísaný v Markdown (namiesto HTML) pre jednoduchšie úpravy.
• Stránky boli reorganizované pre jednoduchší obsah a prístupnejšiu hierarchiu.
• Prešli sme z bežného CSS na SCSS, aby sme naplno využili premenné Bootstrapu, mixiny a ďalšie.

Responzívne nástroje

Všetky @screen-premenné boli vo verzii 4.0.0 odstránené. Namiesto toho použite mixy media-breakpoint-up(), media-breakpoint-down(), alebo media-breakpoint-only()Sass alebo $grid-breakpointsmapu Sass.

Naše responzívne pomocné triedy boli z veľkej časti odstránené v prospech explicitných displaypomôcok.

• Triedy .hiddena .showboli odstránené, pretože boli v konflikte s metódami $(...).hide()a jQuery. $(...).show()Namiesto toho skúste prepnúť [hidden]atribút alebo použite vložené štýly ako style="display: none;"a style="display: block;".
• Všetky .hidden-triedy boli odstránené, okrem tlačových nástrojov, ktoré boli premenované.
  • Odstránené z v3:.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
  • Odstránené z verzie 4 alpha:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Tlačové nástroje už nezačínajú s .hidden-alebo .visible-, ale s .d-print-.
  • Staré mená: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Nové triedy: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Namiesto použitia explicitných .visible-*tried zviditeľníte prvok tak, že ho pri danej veľkosti obrazovky jednoducho neskryjete. Môžete kombinovať jednu .d-*-nonetriedu s jednou .d-*-blocktriedou, aby ste zobrazili prvok iba na danom intervale veľkostí obrazoviek (napr .d-none.d-md-block.d-xl-none. zobrazí prvok len na stredných a veľkých zariadeniach).

Všimnite si, že zmeny bodov prerušenia mriežky vo verzii 4 znamenajú, že na dosiahnutie rovnakých výsledkov budete musieť zväčšiť jeden bod prerušenia. Nové responzívne pomocné triedy sa nepokúšajú prispôsobiť menej bežným prípadom, keď viditeľnosť prvku nemožno vyjadriť ako jeden súvislý rozsah veľkostí výrezu; v takýchto prípadoch budete musieť namiesto toho použiť vlastný CSS.