Source

Migracija na v4

Bootstrap 4 je velika preinaka cijelog projekta. Najznačajnije promjene su sažete u nastavku, praćene konkretnijim promjenama relevantnih komponenti.

Stabilne promjene

Prelaskom sa Beta 3 na naše stabilno izdanje v4.0, nema značajnih promjena, ali postoje neke značajne promjene.

Štampanje

  • Popravljeni pokvareni uslužni programi za štampanje. Ranije .d-print-*bi korištenje klase neočekivano poništilo bilo koju drugu .d-*klasu. Sada se podudaraju s našim drugim uslužnim programima za prikaz i odnose se samo na taj medij ( @media print).

  • Prošireni dostupni uslužni programi za prikaz štampanja kako bi odgovarali drugim uslužnim programima. Beta 3 i starije su imale samo block, inline-block, inline, i none. Dodano je stabilno v4 flex, inline-flex, table, table-rowi table-cell.

  • Ispravljeno prikazivanje pregleda za štampu u svim pretraživačima sa novim stilovima štampanja koji specificiraju @page size.

Beta 3 promjene

Dok je Beta 2 doživjela najveći dio naših izmjena tokom beta faze, ali još uvijek imamo nekoliko koje je trebalo riješiti u Beta 3 izdanju. Ove promjene se primjenjuju ako ažurirate na Beta 3 sa Beta 2 ili bilo koje starije verzije Bootstrapa.

Razno

  • Uklonjena neiskorištena $thumbnail-transitionvarijabla. Nismo ništa prenosili, tako da je to bio samo dodatni kod.
  • npm paket više ne uključuje nikakve datoteke osim naših izvornih i dist datoteka; ako ste se oslanjali na njih i izvodili naše skripte preko node_modulesfoldera, trebali biste prilagoditi svoj tok rada.

Forms

  • Ponovo napisao i prilagođene i zadane potvrdne okvire i radio uređaje. Sada, oba imaju odgovarajuću HTML strukturu (spoljnu <div>sa siblingom <input>i <label>) i iste stilove izgleda (naslagani podrazumevani, umetnuti sa klasom modifikatora). Ovo nam omogućava da stiliziramo oznaku na osnovu stanja unosa, pojednostavljujući podršku za disabledatribut (prethodno je zahtijevala roditeljsku klasu) i bolju podršku provjere valjanosti obrasca.

    Kao dio ovoga, promijenili smo CSS za upravljanje višestrukim background-images na prilagođenim okvirima za potvrdu i radio uređajima. Ranije je sada uklonjeni .custom-control-indicatorelement imao boju pozadine, gradijent i SVG ikonu. Prilagođavanje gradijenta pozadine značilo je zamjenu svih njih svaki put kada trebate promijeniti samo jedan. Sada imamo .custom-control-label::beforeispunu i gradijent i .custom-control-label::afterobrađujemo ikonu.

    Da biste napravili prilagođenu provjeru u liniji, dodajte .custom-control-inline.

  • Ažuriran birač za grupe dugmadi zasnovane na unosu. Umjesto [data-toggle="buttons"] { }za stil i ponašanje, koristimo dataatribut samo za JS ponašanja i oslanjamo se na novu .btn-group-toggleklasu za oblikovanje.

  • Uklonjeno .col-form-legendu korist malo poboljšanog .col-form-label. Na ovaj način .col-form-label-smi .col-form-label-lgmože se <legend>s lakoćom koristiti na elementima.

  • Prilagođeni unos datoteka primili su promjenu svoje $custom-file-textSass varijable. To više nije ugniježđena Sass mapa i sada pokreće samo jedan niz— Browsedugme jer je to sada jedini pseudo-element generiran iz našeg Sass-a. Tekst Choose filesada dolazi iz .custom-file-label.

Grupe unosa

  • Dodaci grupe unosa su sada specifični za njihov položaj u odnosu na ulaz. Odustali smo .input-group-addoni .input-group-btnod dva nova razreda, .input-group-prependi .input-group-append. Sada morate eksplicitno koristiti dodatak ili dodatak, pojednostavljujući veći dio našeg CSS-a. Unutar dodatka ili dodatka, postavite dugmad onako kako bi postojali bilo gdje drugdje, ali umotajte tekst u .input-group-text.

  • Stilovi validacije su sada podržani, kao i višestruki ulazi (iako možete potvrditi samo jedan unos po grupi).

  • Klase veličine moraju biti na roditelju .input-group, a ne na pojedinačnim elementima obrasca.

Beta 2 promjene

Dok smo u beta verziji, cilj nam je da nemamo značajne promjene. Međutim, stvari ne idu uvijek po planu. Ispod su ključne promene koje treba imati na umu kada prelazite sa Beta 1 na Beta 2.

Breaking

  • Uklonjena $badge-colorvarijabla i njena upotreba na .badge. Koristimo funkciju kontrasta boja za odabir colorna temelju background-color, tako da varijabla nije potrebna.
  • grayscale()Funkcija je preimenovana u gray()da bi se izbjegao prekid sukoba s izvornim CSS grayscalefilterom.
  • Preimenovano .table-inverseu , .thead-inverse, i .thead-defaultu .*-darki .*-light, što odgovara našim shemama boja koje se koriste na drugim mjestima.
  • Responzivne tabele sada generišu klase za svaku tačku prekida mreže. Ovo se razlikuje od Beta 1 po tome što je ono .table-responsivešto ste koristili više kao .table-responsive-md. Sada možete koristiti .table-responsiveili .table-responsive-{sm,md,lg,xl}po potrebi.
  • Izbačena podrška za Bower kao menadžer paketa je zastarjela za alternative (npr. Yarn ili npm). Vidi bower/bower#2298 za detalje.
  • Bootstrap i dalje zahtijeva jQuery 1.9.1 ili noviji, ali vam se savjetuje da koristite verziju 3.x jer su podržani pretraživači v3.x oni koje Bootstrap podržava plus v3.x ima neke sigurnosne ispravke.
  • Uklonjena nekorištena .form-control-labelklasa. Ako ste koristili ovu klasu, ona je bila duplikat .col-form-labelklase koja je vertikalno centrirala a <label>sa pripadajućim ulazom u horizontalnim rasporedima oblika.
  • Promijenjen je color-yiqiz mixina koji je uključivao colorsvojstvo u funkciju koja vraća vrijednost, što vam omogućava da ga koristite za bilo koje CSS svojstvo. Na primjer, umjesto color-yiq(#000), napisali biste color: color-yiq(#000);.

Highlights

  • Uvedena nova pointer-eventsupotreba na modalima. Vanjski .modal-dialogprolazi kroz događaje sa pointer-events: noneza prilagođeno rukovanje klikovima (omogućujući samo slušanje .modal-backdropbilo kojeg klika), a zatim ga suprotstavlja za stvarni .modal-contentpomoću pointer-events: auto.

Sažetak

Evo velikih stavki za ulaznice kojih biste trebali biti svjesni kada prelazite s v3 na v4.

Podrška za pretraživač

  • Izbačena podrška za IE8, IE9 i iOS 6. v4 je sada samo IE10+ i iOS 7+. Za stranice kojima je potrebno bilo koje od njih, koristite v3.
  • Dodata zvanična podrška za Android v5.0 Lollipop's Browser i WebView. Ranije verzije Android pretraživača i WebViewa ostaju samo nezvanično podržane.

Globalne promjene

  • Flexbox je podrazumevano omogućen. Općenito, ovo znači odmak od plutajućih i više od naših komponenti.
  • Prešli smo sa Less na Sass za naše izvorne CSS datoteke.
  • Prebacili smo se sa pxna remkao našu primarnu CSS jedinicu, iako se pikseli i dalje koriste za medijske upite i ponašanje mreže jer veličina tipa ne utiče na okvire prikaza uređaja.
  • Globalna veličina fonta je povećana sa 14pxna 16px.
  • Prepravljeni su slojevi mreže kako bi se dodala peta opcija (adresiranje manjih uređaja na 576pxi ispod) i uklonjena -xsinfiks iz tih klasa. Primjer: .col-6.col-sm-4.col-md-3.
  • Zamijenjena je posebna opciona tema sa konfigurabilnim opcijama preko SCSS varijabli (npr. $enable-gradients: true).
  • Sistem izgradnje je revidiran da koristi seriju npm skripti umjesto Grunt-a. Pogledajte package.jsonsve skripte ili čitaj me za naš projekat za potrebe lokalnog razvoja.
  • Nereagirajuća upotreba Bootstrapa više nije podržana.
  • Odbacili smo online Customizer u korist opsežnije dokumentacije za podešavanje i prilagođenih verzija.
  • Dodano desetine novih uslužnih klasa za uobičajene parove CSS svojstvo-vrijednost i prečice za razmake margina/dopuna.

Mrežni sistem

  • Premješteno u flexbox.
    • Dodata podrška za flexbox u grid miksinama i unaprijed definiranim klasama.
    • Kao dio flexboxa, uključena je podrška za klase vertikalnog i horizontalnog poravnanja.
  • Ažurirana imena klasa mreže i novi sloj mreže.
    • Dodan je novi smnivo mreže ispod 768pxza detaljniju kontrolu. Sada imamo xs, sm, md, lg, i xl. To također znači da je svaki nivo povećan za jedan nivo (tako da .col-md-6je u v3 sada .col-lg-6u v4).
    • xsgrid klase su modificirane da ne zahtijevaju infiks da preciznije predstavlja da počinju primjenjivati ​​stilove na min-width: 0, a ne na postavljenoj vrijednosti piksela. Umesto .col-xs-6, sada je .col-6. Svi ostali slojevi mreže zahtijevaju infiks (npr. sm).
  • Ažurirane veličine mreže, miksini i varijable.
    • Mrežni oluci sada imaju Sass mapu tako da možete odrediti specifične širine oluka na svakoj tački prekida.
    • Ažurirani grid mixin za korištenje make-col-readypripremnog miksa i a make-colza postavljanje flexi max-widthza individualnu veličinu kolone.
    • Promijenjene tačke za upite medija mreže mreže i širine kontejnera kako bi se uračunao novi sloj mreže i osigurao da su stupci ravnomjerno djeljivi sa 12svojom maksimalnom širinom.
    • Prelomne tačke mreže i širine kontejnera sada se rukuju preko Sass mapa ( $grid-breakpointsi $container-max-widths) umesto nekoliko zasebnih varijabli. One u potpunosti zamjenjuju @screen-*varijable i omogućavaju vam da u potpunosti prilagodite slojeve mreže.
    • Promijenjeni su i medijski upiti. Umjesto da svaki put ponavljamo naše deklaracije medijskog upita sa istom vrijednošću, sada imamo @include media-breakpoint-up/down/only. Sada, umjesto da pišete @media (min-width: @screen-sm-min) { ... }, možete pisati @include media-breakpoint-up(sm) { ... }.

Komponente

  • Izbačeni paneli, sličice i bunari za novu sveobuhvatnu komponentu, kartice .
  • Ispušten je font ikone Glyphicons. Ako su vam potrebne ikone, neke opcije su:
  • Izbacio je dodatak Affix jQuery.
    • Preporučujemo korištenje position: stickyumjesto toga. Pogledajte HTML5 Molimo unesite detalje i specifične preporuke za polifil. Jedan prijedlog je da koristite @supportspravilo za njegovu implementaciju (npr. @supports (position: sticky) { ... })/
    • Ako ste koristili Affix za primjenu dodatnih, ne position-stilova, polifili možda neće podržavati vaš slučaj upotrebe. Jedna opcija za takvu upotrebu je biblioteka ScrollPos-Styler treće strane .
  • Izbačena je komponenta pejdžera jer je u suštini bila malo prilagođena dugmad.
  • Refaktorirao je skoro sve komponente da koristi više neugniježđenih selektora klasa umjesto previše specifičnih selektora djece.

Po komponenti

Ova lista ističe ključne promjene po komponentama između v3.xx i v4.0.0.

Ponovo pokreni

Novo u Bootstrapu 4 je Reboot , nova tablica stilova koja se temelji na Normalize s našim vlastitim pomalo tvrdoglavim stilovima resetovanja. Selektori koji se pojavljuju u ovoj datoteci koriste samo elemente - ovdje nema klasa. Ovo izoluje naše stilove resetovanja od stilova komponenti za modularniji pristup. Neki od najvažnijih poništavanja koje ovo uključuje su box-sizing: border-boxpromjena, pomicanje s emna remjedinice na mnogim elementima, stilovi veza i mnogi resetovi elemenata obrasca.

Tipografija

  • Premješteni svi .text-uslužni programi u _utilities.scssdatoteku.
  • Izbačen .page-headerjer se njegovi stilovi mogu primijeniti putem uslužnih programa.
  • .dl-horizontalje odbačeno. Umjesto toga, koristite .rowon <dl>i koristite klase stupaca mreže (ili miksine) na svojim <dt>i podređenima <dd>.
  • Redizajnirani blok citati, premještanje njihovih stilova iz <blockquote>elementa u jednu klasu, .blockquote. Izbačen je .blockquote-reversemodifikator za tekstualne uslužne programe.
  • .list-inlinesada zahtijeva da njegove podređene stavke liste imaju .list-inline-itemprimijenjenu novu klasu na njih.

Slike

  • Preimenovano .img-responsiveu .img-fluid.
  • Preimenovano .img-roundedu.rounded
  • Preimenovano .img-circleu.rounded-circle

Stolovi

  • Skoro sve instance >selektora su uklonjene, što znači da će ugniježđene tablice sada automatski naslijediti stilove od svojih roditelja. Ovo uvelike pojednostavljuje naše selektore i potencijalna prilagođavanja.
  • Preimenovano .table-condensedu .table-smradi dosljednosti.
  • Dodata nova .table-inverseopcija.
  • Dodani modifikatori zaglavlja tablice: .thead-defaulti .thead-inverse.
  • Preimenovane kontekstualne klase da imaju .table--prefiks. Stoga .active, .success, .warning, .dangeri .infona .table-active, .table-success, .table-warning, .table-dangeri .table-info.

Forms

  • Premješteni element se resetira u _reboot.scssdatoteku.
  • Preimenovano .control-labelu .col-form-label.
  • Preimenovano .input-lgi .input-smu .form-control-lgi .form-control-sm, respektivno.
  • Odustao .form-group-*od nastave radi jednostavnosti. Umjesto toga sada koristite .form-control-*časove.
  • Ispušten .help-blocki zamijenjen sa .form-textza tekst pomoći na nivou bloka. Za ugrađeni tekst pomoći i druge fleksibilne opcije koristite uslužne klase kao što je .text-muted.
  • Pao .radio-inlinei .checkbox-inline.
  • Konsolidovani .checkboxi .radiou .form-checki različite .form-check-*klase.
  • Remontovane horizontalne forme:
    • Odbačen je .form-horizontaluslov za razred.
    • .form-groupviše ne primjenjuje stilove iz .rowvia mixina, pa .rowje sada potrebno za horizontalne rasporede mreže (npr. <div class="form-group row">).
    • Dodana je nova .col-form-labelklasa vertikalno centriranim oznakama sa .form-controls.
    • Dodato je novo .form-rowza kompaktne izglede oblika sa klasama mreže (zamijenite .rowza a .form-rowi idite).
  • Dodata podrška prilagođenih obrazaca (za potvrdne okvire, radio, odabire i unose datoteka).
  • Zamijenjene .has-error, .has-warning, i .has-successklase sa provjerom valjanosti HTML5 forme putem CSS-a :invalidi :validpseudo-klasa.
  • Preimenovano .form-control-staticu .form-control-plaintext.

Dugmad

  • Preimenovano .btn-defaultu .btn-secondary.
  • .btn-xsU potpunosti je odbačena klasa jer .btn-smje proporcionalno mnogo manja od v3.
  • Funkcija dugmeta za praćenje stanja button.jsjQuery dodatka je izbačena. Ovo uključuje metode $().button(string)i . $().button('reset')Savjetujemo da umjesto toga koristite mali dio prilagođenog JavaScripta, koji će imati prednost da se ponaša upravo onako kako želite.
    • Imajte na umu da su ostale karakteristike dodatka (potvrdni okviri za dugmad, radio gumbi, dugmad za jednostruko prebacivanje) zadržane u v4.
  • Promijenite dugmad' [disabled]u :disabledkako IE9+ podržava :disabled. Međutim fieldset[disabled], i dalje je neophodno jer su izvorni onemogućeni skupovi polja još uvijek u greškama u IE11 .

Grupa dugmadi

  • Prepisana komponenta sa flexboxom.
  • Uklonjeno .btn-group-justified. Kao zamjenu možete koristiti <div class="btn-group d-flex" role="group"></div>kao omotač oko elemenata sa .w-100.
  • Odbacio je .btn-group-xsklasu u potpunosti s obzirom na uklanjanje .btn-xs.
  • Uklonjen eksplicitni razmak između grupa dugmadi u alatnim trakama dugmadi; sada koristite margine.
  • Poboljšana dokumentacija za korištenje s drugim komponentama.
  • Prebačen sa roditeljskih selektora na singularne klase za sve komponente, modifikatore, itd.
  • Pojednostavljeni stilovi padajućeg menija da se više ne isporučuju sa strelicama okrenutim nagore ili nadole u padajućem meniju.
  • Padajući meni se sada može napraviti pomoću <div>s ili <ul>s.
  • Ponovo izgrađeni stilovi padajućeg menija i oznake da bi se obezbedila laka, ugrađena podrška za <a>stavke <button>padajućeg menija zasnovane na njima.
  • Preimenovano .divideru .dropdown-divider.
  • Padajuće stavke sada zahtijevaju .dropdown-item.
  • Padajući prekidači više ne zahtijevaju eksplicitni <span class="caret"></span>; ovo se sada daje automatski preko CSS-a ::afterna .dropdown-toggle.

Mrežni sistem

  • Dodana je nova 576pxtačka prekida mreže kao sm, što znači da sada postoji ukupno pet nivoa ( xs, sm, md, lg, i xl).
  • Preimenovane su responzivne klase modifikatora mreže iz .col-{breakpoint}-{modifier}-{size}u .{modifier}-{breakpoint}-{size}za jednostavnije klase mreže.
  • Izbačene push and pull modifikatorske klase za nove klase koje pokreće flexbox order. Na primjer, umjesto .col-8.push-4i .col-4.pull-8, koristili biste .col-8.order-2i .col-4.order-1.
  • Dodane flexbox uslužne klase za grid sistem i komponente.

Lista grupa

  • Prepisana komponenta sa flexboxom.
  • Zamijenjeno a.list-group-itemeksplicitnom klasom, .list-group-item-action, za stiliziranje verzija veza i gumba stavki grupe liste.
  • Dodata .list-group-flushklasa za korištenje s karticama.
  • Prepisana komponenta sa flexboxom.
  • S obzirom na prelazak na flexbox, poravnanje ikona za odbacivanje u zaglavlju je vjerovatno pokvareno jer više ne koristimo float. Plutajući sadržaj je na prvom mjestu, ali sa flexboxom to više nije slučaj. Ažurirajte svoje ikone za odbacivanje da dolaze nakon modalnih naslova kako biste to popravili.
  • Opcija remote(koja bi se mogla koristiti za automatsko učitavanje i ubacivanje vanjskog sadržaja u modalni) i odgovarajući loaded.bs.modaldogađaj su uklonjeni. Umjesto toga preporučujemo korištenje šablona na strani klijenta ili okvira za povezivanje podataka, ili sami pozovite jQuery.load .
  • Prepisana komponenta sa flexboxom.
  • Izbačeni su gotovo svi >selektori radi jednostavnijeg stiliziranja putem neugniježđenih klasa.
  • Umjesto selektora specifičnih za HTML kao što je .nav > li > a, koristimo zasebne klase za .navs, .nav-items i .nav-links. Ovo čini vaš HTML fleksibilnijim, a istovremeno donosi povećanu proširivost.

Navbar je u potpunosti prepisan u flexbox sa poboljšanom podrškom za poravnanje, odziv i prilagođavanje.

  • Responzivna ponašanja navigacijske trake sada se primjenjuju na .navbarklasu putem obaveznog .navbar-expand-{breakpoint} gdje birate gdje ćete skupiti navigacijsku traku. Ranije je ovo bila modifikacija sa manje varijable i zahtijevala je ponovno kompajliranje.
  • .navbar-defaultje sada .navbar-light, iako .navbar-darkostaje isti. Jedan od njih je potreban na svakoj navigacijskoj traci. Međutim, ove klase više ne postavljaju background-colors; umjesto toga oni u suštini samo utiču na color.
  • Navbarovi sada zahtijevaju neku vrstu pozadinske deklaracije. Odaberite neki od naših pozadinskih uslužnih programa ( .bg-*) ili postavite svoje s gore navedenim light/inverznim klasama za ludo prilagođavanje .
  • S obzirom na flexbox stilove, navigacijske trake sada mogu koristiti flexbox uslužne programe za jednostavne opcije poravnanja.
  • .navbar-toggleje sada .navbar-toggleri ima različite stilove i unutrašnje oznake (ne više od tri <span>s).
  • Potpuno je napustio .navbar-formrazred. Više nije potrebno; umjesto toga, samo koristite .form-inlinei primijenite pomoćne programe margine po potrebi.
  • Navbari više ne uključuju margin-bottomili border-radiuspo zadanim postavkama. Koristite uslužne programe po potrebi.
  • Svi primjeri koji sadrže navigacijske trake su ažurirani kako bi uključili nove oznake.

Paginacija

  • Prepisana komponenta sa flexboxom.
  • Eksplicitne klase ( .page-item, .page-link) su sada potrebne za potomke .paginations
  • Potpuno je odbačena .pagerkomponenta jer se radilo o malo više od prilagođenih dugmadi obrisa.
  • Eksplicitna klasa, .breadcrumb-item, sada je potrebna za potomke .breadcrumbs

Oznake i značke

  • Konsolidirano .labeli .badgeda se odvoji od <label>elementa i pojednostavi povezane komponente.
  • Dodan .badge-pillkao modifikator za zaobljen izgled "pilule".
  • Značke se više ne prikazuju automatski u grupama lista i drugim komponentama. Za to su sada potrebne uslužne klase.
  • .badge-defaultje izbačen i .badge-secondarydodan da odgovara klasama modifikatora komponenti koje se koriste drugdje.

Paneli, sličice i bunari

Potpuno odbačeno zbog nove komponente kartice.

Paneli

  • .paneldo .card, sada izgrađen sa flexboxom.
  • .panel-defaultuklonjen i bez zamjene.
  • .panel-groupuklonjen i bez zamjene. .card-groupnije zamjena, drugačija je.
  • .panel-headingto.card-header
  • .panel-titledo .card-title. U zavisnosti od željenog izgleda, možda ćete želeti da koristite elemente ili klase naslova (npr <h3>. , .h3) ili podebljane elemente ili klase (npr <strong>. , <b>, .font-weight-bold). Imajte na umu da .card-title, iako ima sličan naziv, proizvodi drugačiji izgled od .panel-title.
  • .panel-bodyto.card-body
  • .panel-footerto.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, i .panel-dangerizbačeni su za .bg-, .text-, i .borderuslužne programe generirane iz naše $theme-colorsSass mape.

Napredak

  • Zamijenjene kontekstualne .progress-bar-*klase .bg-*uslužnim programima. Na primjer, class="progress-bar progress-bar-danger"postaje class="progress-bar bg-danger".
  • Zamijenjeno .activeza animirane trake napretka sa .progress-bar-animated.
  • Remontirana je cijela komponenta kako bi se pojednostavio dizajn i stil. Imamo manje stilova koje možete nadjačati, nove indikatore i nove ikone.
  • Sav CSS je neugniježđen i preimenovan, osiguravajući da svaka klasa ima prefiks .carousel-.
    • Za stavke vrteške, .next, .prev, .left, i .rightsada su .carousel-item-next, .carousel-item-prev, .carousel-item-left, i .carousel-item-right.
    • .itemje takođe sada .carousel-item.
    • Za kontrole prev/nex, .carousel-control.righti .carousel-control.leftsu sada .carousel-control-nexti .carousel-control-prev, što znači da više ne zahtijevaju određenu osnovnu klasu.
  • Uklonjeni svi responzivni stilovi, odlažući se na pomoćne programe (npr. prikazivanje natpisa na određenim okvirima za prikaz) i prilagođene stilove po potrebi.
  • Uklonjene su zaobilaženja slika za slike u stavkama vrteške, s obzirom na uslužne programe.
  • Podešavanje primjera Carousel tako da uključuje nove oznake i stilove.

Stolovi

  • Uklonjena podrška za stilizirane ugniježđene tablice. Svi stilovi tablice su sada naslijeđeni u v4 za jednostavnije selektore.
  • Dodata inverzna varijanta tabele.

Komunalne usluge

  • Prikaz, skriven i još mnogo toga:
    • Uslužni programi za prikaz su napravljeni da odgovaraju (npr. .d-nonei d-{sm,md,lg,xl}-none).
    • Izbačena većina .hidden-*uslužnih programa za nove uslužne programe za prikaz . Na primjer, umjesto .hidden-sm-up, koristite .d-sm-none. Preimenovani .hidden-printuslužni programi da koriste shemu imenovanja uslužnog programa za prikaz. Više informacija u odjeljku Responsive utilities na ovoj stranici.
    • Dodane .float-{sm,md,lg,xl}-{left,right,none}klase za prilagodljive float i uklonjene .pull-lefti .pull-rightpošto su suvišne za .float-lefti .float-right.
  • Vrsta:
    • Dodane su prilagodljive varijacije našim klasama poravnanja teksta .text-{sm,md,lg,xl}-{left,center,right}.
  • Poravnanje i razmak:
  • Clearfix je ažuriran da ukine podršku za starije verzije pretraživača.

Miksovi prefiksa dobavljača

Miksini prefiksa dobavljača Bootstrapa 3 , koji su zastarjeli u v3.2.0, uklonjeni su u Bootstrapu 4. Pošto koristimo Autoprefixer , više nisu potrebni.

Uklonjeni su sljedeći miksinovi: 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

Dokumentacija

Naša dokumentacija je također dobila nadogradnju. Evo donjeg dijela:

  • Još uvijek koristimo Jekyll, ali imamo dodatke u kombinaciji:
    • bugify.rbkoristi se za efikasno ispisivanje unosa na našoj stranici o greškama u pretraživaču .
    • example.rbje prilagođeni fork zadanog highlight.rbdodatka, koji omogućava lakše rukovanje primjerom koda.
    • callout.rbje slična prilagođena vilica za to, ali dizajnirana za naše posebne oblačiće dokumenata.
    • jekyll-toc se koristi za generiranje našeg sadržaja.
  • Sav sadržaj dokumenata je prepisan u Markdown (umjesto u HTML) radi lakšeg uređivanja.
  • Stranice su reorganizirane radi jednostavnijeg sadržaja i pristupačnije hijerarhije.
  • Prešli smo sa običnog CSS-a na SCSS kako bismo u potpunosti iskoristili Bootstrap-ove varijable, miksine i još mnogo toga.

Responsive utilities

Sve @screen-varijable su uklonjene u v4.0.0. Umjesto toga koristite miksine media-breakpoint-up(), media-breakpoint-down(), ili Sass ili Sass mapu.media-breakpoint-only()$grid-breakpoints

Naše responzivne uslužne klase su uglavnom uklonjene u korist eksplicitnih displayuslužnih programa.

  • Klase .hiddeni .showsu uklonjene jer su u sukobu sa jQuery-jevim metodama $(...).hide()i $(...).show()metodama. Umjesto toga, pokušajte prebaciti [hidden]atribut ili koristiti umetnute stilove poput style="display: none;"i style="display: block;".
  • Sve .hidden-klase su uklonjene, osim uslužnih programa za štampanje koji su preimenovani.
    • Uklonjeno iz 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
    • Uklonjeno iz v4 alfa:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Uslužni programi za štampanje više ne počinju sa .hidden-ili .visible-, već sa .d-print-.
    • Stari nazivi: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nove klase: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Umjesto da koristite eksplicitne .visible-*klase, element činite vidljivim tako što ga jednostavno ne skrivate na toj veličini ekrana. Možete kombinovati jednu .d-*-noneklasu sa jednom .d-*-blockklasom da prikažete element samo na datom intervalu veličina ekrana (npr .d-none.d-md-block.d-xl-none. prikazuje element samo na srednjim i velikim uređajima).

Imajte na umu da promjene tačaka prekida mreže u v4 znače da ćete morati ići jednu tačku prijeloma više da biste postigli iste rezultate. Nove responzivne uslužne klase ne pokušavaju da prilagode manje uobičajene slučajeve u kojima se vidljivost elementa ne može izraziti kao jedan neprekidni raspon veličina polja za prikaz; umjesto toga ćete morati koristiti prilagođeni CSS u takvim slučajevima.