Source

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 (predvolené zoskupenie, vložené do triedy modifikátorov). 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ť prílohu alebo predponu, čo zjednodušuje veľkú časť nášho 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.
  • Vynechaná podpora Bower 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 vyšší, ale odporúčame vám používať verziu 3.x, pretože prehliadače podporujúce verziu 3.x Bootstrap podporuje a verzia 3.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. Skorš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.
  • Prepnuté z Less na Sass pre naše zdrojové CSS súbory.
  • Prepnuté z pxna remako 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 pod) 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 v3 je teraz .col-lg-6vo v4).
    • 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 prerušovacie body mediálneho dopytu a šírky kontajnera mriežkového systému, aby sa zohľadnila nová vrstva mriežky a zabezpečilo sa, že stĺpce sú 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šeobjímajúci komponent, karty .
  • Vypustilo písmo ikony Glyphicons. Ak potrebujete ikony, niektoré možnosti sú:
  • Zahodili doplnok Affix jQuery.
    • Namiesto toho odporúčame použiť position: sticky. Podrobnosti a konkrétne odporúčania pre polyfill nájdete v položke HTML5 Please . Jedným z návrhov je použiť @supportspravidlo na jeho implementáciu (napr @supports (position: sticky) { ... }.
    • Ak ste použili 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 .
  • Vypustil komponent pagera , pretože to boli v podstate mierne prispôsobené tlačidlá.
  • Takmer všetky komponenty boli zmenené 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 pre 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é resety 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 .rowon <dl>a použite triedy stĺpcov mriežky (alebo mixiny) na jeho <dt>a podriadených <dd>.
  • Prepracované blokové úvodzovky, presunutie ich štýlov z <blockquote>prvku do jednej 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-defaulta .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.scsssúbor.
  • Premenovaný .control-labelna .col-form-label.
  • Premenované .input-lga .input-smna .form-control-lga .form-control-sm, resp.
  • Z .form-group-*dôvodu jednoduchosti boli triedy zrušené. Namiesto toho teraz 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ženia horizontálnej mriežky (napr. <div class="form-group row">).
    • Pridaná nová .col-form-labeltrieda na vertikálne stredové štítky so .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.
  • .btn-xsTrieda úplne vypadla, pretože je .btn-smproporcioná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škrtávacie 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.
  • 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.
  • Prebudované štýly rozbaľovacích zoznamov a značky poskytujúce 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-actionna úpravu verzií odkazov a tlačidiel položiek skupiny zoznamu.
  • Pridaná .list-group-flushtrieda pre použitie s kartami.
  • 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 tak, 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.
  • Prepísaný komponent s flexboxom.
  • Vypustené 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ť.

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 vyberiete, 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é lišty teraz vyžadujú nejakú deklaráciu pozadia. Vyberte si z našich pomôcok na pozadí ( .bg-*) alebo si nastavte svoje vlastné s triedami light/inverse 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 na zálohovanie.
  • Navigačné panely už neobsahujú margin-bottomalebo border-radiussú 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.
  • 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. Teraz sú na to 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 tučné prvky alebo triedy (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.
  • 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 responzívne (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:
  • 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ž vo všeobecnosti 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 skombinovať 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.