in English

Migracija na v4

Bootstrap 4 je velika preinaka cijelog projekta. Najznačajnije promjene sažete su u nastavku, nakon čega slijede specifičnije promjene relevantnih komponenti.

Stabilne promjene

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

Ispis

  • Popravljeni neispravni uslužni programi za ispis. Prethodno .d-print-*bi korištenje klase neočekivano nadjačalo bilo koju drugu .d-*klasu. Sada odgovaraju našim drugim uslužnim programima za prikaz i primjenjuju se samo na taj medij ( @media print).

  • Prošireni dostupni uslužni programi za prikaz ispisa koji odgovaraju drugim uslužnim programima. Beta 3 i stariji imali su samo block, inline-block, inlinei none. Stable v4 dodano flex, inline-flex, table, table-rowi table-cell.

  • Ispravljeno renderiranje pregleda ispisa u preglednicima s novim stilovima ispisa koji određuju @page size.

Beta 3 promjene

Iako je Beta 2 doživjela većinu naših ključnih promjena tijekom beta faze, još uvijek imamo nekoliko koje treba riješiti u Beta 3 izdanju. Ove se promjene primjenjuju ako ažurirate na Beta 3 s Beta 2 ili bilo koje starije verzije Bootstrapa.

Razno

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

Obrasci

  • Ponovno su napisani prilagođeni i zadani potvrdni okviri i radio stanice. Sada oba imaju podudarnu HTML strukturu (vanjski <div>s istorodnim <input>i <label>) i iste stilove rasporeda (složeni zadani, ugrađeni s klasom modifikatora). To nam omogućuje da stiliziramo oznaku na temelju stanja unosa, pojednostavljujući podršku za disabledatribut (prethodno je zahtijevao nadređenu klasu) i bolju podršku našoj provjeri valjanosti obrasca.

    Kao dio toga, promijenili smo CSS za upravljanje višestrukim background-imagepotvrdnim okvirima i radijima na prilagođenim obrascima. Prethodno je sada uklonjeni .custom-control-indicatorelement imao boju pozadine, gradijent i SVG ikonu. Prilagodba pozadinskog gradijenta značila je zamjenu svih njih svaki put kad biste trebali promijeniti samo jednu. Sada imamo .custom-control-label::beforeispunu i gradijent i .custom-control-label::afterupravlja ikonom.

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

  • Ažurirani selektor za grupe tipki na temelju unosa. 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 stil.

  • 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 koristiti na <legend>elementima s lakoćom.

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

Ulazne grupe

  • Dodaci grupe ulaza sada su specifični prema svom položaju u odnosu na unos. Otpustili smo .input-group-addoni .input-group-btndva nova razreda, .input-group-prependi .input-group-append. Sada morate eksplicitno koristiti dodatak ili početak, pojednostavljujući velik dio našeg CSS-a. Unutar dodavanja ili dodavanja ispred, postavite svoje gumbe kao što bi postojali bilo gdje drugdje, ali prelomite tekst u .input-group-text.

  • Sada su podržani stilovi provjere valjanosti, 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 je u beta verziji, cilj nam je da nema prijelomnih promjena. Međutim, stvari ne idu uvijek po planu. Ispod su najvažnije promjene koje morate imati na umu kada prelazite s Beta 1 na Beta 2.

Razbijanje

  • Uklonjena $badge-colorvarijabla i njezina upotreba na .badge. Koristimo funkciju kontrasta boja za odabir colorna temelju background-color, tako da je varijabla nepotrebna.
  • grayscale()Funkcija je preimenovana u gray()kako bi se izbjegao sukob s izvornim CSS grayscalefiltrom.
  • Preimenovano .table-inverseu , .thead-inverse, i .thead-defaultu .*-darki .*-light, u skladu s našim shemama boja koje se koriste drugdje.
  • Responzivne tablice sada generiraju klase za svaku prijelomnu točku rešetke. Ovo se razlikuje od Beta 1 po tome .table-responsivešto ste koristili više kao .table-responsive-md. Sada možete koristiti .table-responsiveili .table-responsive-{sm,md,lg,xl}prema potrebi.
  • Ukinuta podrška za Bower kao upravitelja paketima zastarjela je za alternative (npr. Yarn ili npm). Pogledajte bower/bower#2298 za detalje.
  • Bootstrap i dalje zahtijeva jQuery 1.9.1 ili noviji, ali savjetujemo vam da koristite verziju 3.x budući da su podržani preglednici v3.x oni koje Bootstrap podržava, a v3.x ima neke sigurnosne popravke.
  • Uklonjena neiskorištena .form-control-labelklasa. Ako ste upotrijebili ovu klasu, to je bio duplikat .col-form-labelklase koja je okomito centrirala a <label>s pripadajućim unosom u horizontalnim izgledima obrazaca.
  • Promijenjen je color-yiqiz mixina koji je uključivao colorsvojstvo u funkciju koja vraća vrijednost, što vam omogućuje da ga koristite za bilo koje CSS svojstvo. Na primjer, umjesto color-yiq(#000), napisali biste color: color-yiq(#000);.

Naglasci

  • Uvedena nova pointer-eventsupotreba na modalima. Vanjski .modal-dialogprolazi kroz događaje s pointer-events: noneza prilagođeno rukovanje klikovima (omogućujući samo slušanje .modal-backdropbilo kakvih klikova), a zatim se suprotstavlja stvarnim .modal-contents pointer-events: auto.

Sažetak

Evo velikih stavki koje biste htjeli znati kada prelazite s v3 na v4.

Podrška za preglednik

  • Ukinuta podrška za IE8, IE9 i iOS 6. v4 je sada samo IE10+ i iOS 7+. Za stranice kojima je potrebno jedno od toga, koristite v3.
  • Dodana službena podrška za Android v5.0 Lollipop preglednik i WebView. Ranije verzije preglednika Android i WebView i dalje su samo neslužbeno podržane.

Globalne promjene

  • Flexbox je omogućen prema zadanim postavkama. Općenito to znači odmak od lebdenja i više od svih naših komponenti.
  • Prebacili smo se s Less na Sass za naše izvorne CSS datoteke.
  • Prebačeno s pxna remkao našu primarnu CSS jedinicu, iako se pikseli i dalje koriste za medijske upite i ponašanje rešetke budući da veličina tipa ne utječe na okvire za prikaz uređaja.
  • Globalna veličina fonta povećana je s 14pxna 16px.
  • Prerađene razine mreže za dodavanje pete opcije (adresiranje manjih uređaja na 576pxi niže) i uklonjen -xsinfiks iz tih klasa. Primjer: .col-6.col-sm-4.col-md-3.
  • Zamijenjena zasebna opcijska tema s konfigurabilnim opcijama putem SCSS varijabli (npr. $enable-gradients: true).
  • Sustav izrade temeljito je preinačen da koristi niz npm skripti umjesto Grunta. Pogledajte package.jsonsve skripte ili readme našeg projekta za potrebe lokalnog razvoja.
  • Upotreba Bootstrapa bez odgovora više nije podržana.
  • Izbačen je online Customizer u korist opsežnije dokumentacije za postavljanje i prilagođenih verzija.
  • Dodani su deseci novih korisnih klasa za uobičajene parove svojstvo-vrijednost CSS-a i prečace za razmake margina/ispuna.

Mrežni sustav

  • Premješteno u flexbox.
    • Dodana je podrška za flexbox u grid miksinima i unaprijed definiranim klasama.
    • Kao dio flexboxa, uključena je podrška za klase okomitog i vodoravnog poravnanja.
  • Ažurirani nazivi klasa rešetke i nova razina mreže.
    • Dodana je nova smrazina mreže u nastavku 768pxza detaljniju kontrolu. Sada imamo xs, sm, md, lg, i xl. To također znači da je svaka razina podignuta za jednu razinu (tako da .col-md-6je u v3 sada .col-lg-6u v4).
    • xsklase rešetke su izmijenjene tako da ne zahtijevaju infiks za točnije predstavljanje da počinju primjenjivati ​​stilove na min-width: 0, a ne na postavljenoj vrijednosti piksela. Umjesto .col-xs-6, sada je .col-6. Sve druge razine 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 određene širine oluka na svakoj prijelomnoj točki.
    • Ažurirani miksini rešetki za korištenje make-col-readypripremnog miksina i a za make-colpostavljanje veličine pojedinačnog stupca.flexmax-width
    • Promijenjene su točke prekida medijskih upita grid sustava i širine spremnika kako bi se uzela u obzir nova razina rešetke i osiguralo da su stupci ravnomjerno djeljivi 12pri njihovoj maksimalnoj širini.
    • Prijelomne točke mreže i širine spremnika sada se obrađuju putem Sass mapa ( $grid-breakpointsi $container-max-widths) umjesto pregršt zasebnih varijabli. Oni u potpunosti zamjenjuju @screen-*varijable i omogućuju vam da u potpunosti prilagodite razine mreže.
    • Promijenili su se i medijski upiti. Umjesto ponavljanja naših deklaracija medijskih upita s istom vrijednošću svaki put, 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

  • Ispuštene ploče, sličice i jažice za novu sveobuhvatnu komponentu, kartice .
  • Izbačen je font ikone Glyphicons. Ako trebate ikone, neke opcije su:
  • Izbačen dodatak Affix jQuery.
    • Umjesto toga preporučujemo korištenje position: sticky. Pogledajte unos HTML5 Molimo za pojedinosti i posebne preporuke za polifill. Jedan prijedlog je korištenje @supportspravila 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 takve upotrebe je biblioteka ScrollPos-Styler treće strane .
  • Izbačena je komponenta dojavljivača jer su u biti bili malo prilagođeni gumbi.
  • Refaktorirane su gotovo sve komponente za korištenje više neugniježđenih selektora klasa umjesto previše specifičnih podređenih selektora.

Po komponenti

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

Ponovno podizanje sustava

Novost u Bootstrapu 4 je Reboot , nova lista stilova koja se nadovezuje na Normalize s našim vlastitim, pomalo tvrdoglavim stilovima resetiranja. Selektori koji se pojavljuju u ovoj datoteci koriste samo elemente—ovdje nema klasa. Ovo izolira naše stilove resetiranja od stilova naših komponenti radi modularnijeg pristupa. Neki od najvažnijih poništavanja koje ovo uključuje su box-sizing: border-boxpromjena, prelazak s emna remjedinice na mnogim elementima, stilovi veza i poništavanje mnogih elemenata obrasca.

Tipografija

  • Sve pomoćne programe premjestio .text-u _utilities.scssdatoteku.
  • Ispušteno .page-headerjer se njegovi stilovi mogu primijeniti putem uslužnih programa.
  • .dl-horizontalje odbačeno. Umjesto toga, koristite .rowon <dl>i koristite klase stupaca rešetke (ili mixins) na njegovim <dt>i podređenim elementima <dd>.
  • Redizajnirani blok citati, premještanje njihovih stilova iz <blockquote>elementa u jednu klasu, .blockquote. Izbačen je .blockquote-reversemodifikator za tekstualne pomoćne programe.
  • .list-inlinesada zahtijeva da njegove podređene stavke imaju novu .list-inline-itemklasu primijenjenu na njih.

Slike

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

Stolovi

  • Gotovo sve instance >selektora su uklonjene, što znači da će ugniježđene tablice sada automatski naslijediti stilove od svojih roditelja. To uvelike pojednostavljuje naše birače i potencijalne prilagodbe.
  • Preimenovano .table-condensedu .table-smradi dosljednosti.
  • Dodana je nova .table-inverseopcija.
  • Dodani modifikatori zaglavlja tablice: .thead-defaulti .thead-inverse.
  • Preimenovane kontekstualne klase da imaju .table--prefiks. Stoga .active, .success, .warning, .dangeri .infodo .table-active, .table-success, .table-warning, .table-dangeri .table-info.

Obrasci

  • Premješteni element vraća se u _reboot.scssdatoteku.
  • Preimenovano .control-labelu .col-form-label.
  • Preimenovano .input-lgi .input-smu .form-control-lgi .form-control-sm, redom.
  • Odustali smo .form-group-*od predavanja radi jednostavnosti. Umjesto toga sada koristite .form-control-*klase.
  • Ispušteno .help-blocki zamijenjeno .form-texttekstom pomoći na razini bloka. Za ugrađeni tekst pomoći i druge fleksibilne opcije koristite klase pomoćnih programa poput .text-muted.
  • Ispustio .radio-inlinei .checkbox-inline.
  • Konsolidirano .checkboxiu .radiorazličite .form-checkklase .form-check-*.
  • Prerađeni horizontalni oblici:
    • Izbačen zahtjev za .form-horizontalklasu.
    • .form-groupviše ne primjenjuje stilove iz .rowvia mixina, pa .rowje sada potreban za horizontalne rasporede rešetki (npr. <div class="form-group row">).
    • Dodana je nova .col-form-labelklasa okomito centriranim oznakama s .form-control.
    • Dodano novo .form-rowza kompaktne rasporede obrazaca s klasama mreže (zamijenite svoje .rowza .form-rowi krenite).
  • Dodana podrška za prilagođene obrasce (za potvrdne okvire, radio, odabire i unose datoteka).
  • .has-errorKlase , .has-warning, i zamijenjene .has-successHTML5 provjerom obrasca putem CSS- :invalida i :validpseudo-klasa.
  • Preimenovano .form-control-staticu .form-control-plaintext.

Gumbi

  • Preimenovano .btn-defaultu .btn-secondary.
  • Klasa je .btn-xspotpuno odbačena jer .btn-smje proporcionalno mnogo manja od v3.
  • Značajka statusnog gumba jQuery button.jsdodatka je izbačena. Ovo uključuje $().button(string)i $().button('reset')metode. Savjetujemo da umjesto toga koristite maleni komad prilagođenog JavaScripta, koji će imati prednost da se ponaša točno onako kako želite.
    • Imajte na umu da su ostale značajke dodatka (potvrdni okviri gumba, radio gumbi, gumbi s jednim prebacivanjem) zadržani u verziji 4.
  • Promijenite gumbe' [disabled]na :disabledono što IE9+ podržava :disabled. Međutim fieldset[disabled], i dalje je potrebno jer izvorno onemogućeni skupovi polja još uvijek imaju pogreške u IE11 .

Grupa gumba

  • Prepravljena komponenta s flexboxom.
  • Uklonjeno .btn-group-justified. Kao zamjenu možete koristiti <div class="btn-group d-flex" role="group"></div>kao omot oko elemenata s .w-100.
  • Razred je .btn-group-xspotpuno odbačen zbog uklanjanja .btn-xs.
  • Uklonjen eksplicitni razmak između grupa gumba na alatnim trakama gumba; sada koristite pomoćne programe margine.
  • Poboljšana dokumentacija za korištenje s drugim komponentama.
  • Prebačen s nadređenih selektora na pojedinačne klase za sve komponente, modifikatore itd.
  • Pojednostavljeni padajući stilovi koji se više ne isporučuju sa strelicama okrenutim prema gore ili dolje pričvršćenim na padajući izbornik.
  • Padajući izbornik se sada može napraviti pomoću <div>s ili <ul>s.
  • Ponovno izgrađeni padajući stilovi i oznake za pružanje jednostavne, ugrađene podrške za <a>i <button>temeljene padajuće stavke.
  • Preimenovano .divideru .dropdown-divider.
  • Padajuće stavke sada zahtijevaju .dropdown-item.
  • Padajući izbornik više ne zahtijeva eksplicitni <span class="caret"></span>; ovo se sada osigurava automatski putem CSS-a ::afterna .dropdown-toggle.

Mrežni sustav

  • Dodana je nova 576pxprijelomna točka rešetke kao sm, što znači da sada postoji ukupno pet razina ( xs, sm, md, lgi xl).
  • Preimenovane su klase modifikatora responzivne mreže iz .col-{breakpoint}-{modifier}-{size}u .{modifier}-{breakpoint}-{size}za jednostavnije klase mreže.
  • Izbačene su push i pull modifikatorske klase za nove klase koje pokreće flexbox order. Na primjer, umjesto .col-8.push-4i .col-4.pull-8upotrijebili biste .col-8.order-2i .col-4.order-1.
  • Dodane klase pomoćnih programa flexbox za mrežni sustav i komponente.

Popis grupa

  • Prepravljena komponenta s flexboxom.
  • Zamijenjen a.list-group-itemeksplicitnom klasom, .list-group-item-action, za stiliziranje verzija veza i gumba stavki grupe popisa.
  • Dodana .list-group-flushklasa za korištenje s karticama.
  • Prepravljena komponenta s flexboxom.
  • S obzirom na prelazak na flexbox, poravnanje ikona za odbacivanje u zaglavlju vjerojatno je pokvareno jer više ne koristimo float. Plutajući sadržaj je na prvom mjestu, ali s flexboxom to više nije slučaj. Ažurirajte ikone za odbacivanje tako da dolaze nakon modalnih naslova kako biste to ispravili.
  • Opcija remote(koja se može koristiti za automatsko učitavanje i ubacivanje vanjskog sadržaja u modal) i odgovarajući loaded.bs.modaldogađaj su uklonjeni. Umjesto toga preporučujemo korištenje predložaka na strani klijenta ili okvira za vezanje podataka ili sami pozovite jQuery.load .
  • Prepravljena komponenta s flexboxom.
  • Izbačeni su gotovo svi >selektori radi jednostavnijeg oblikovanja 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.

Navigacijska traka u potpunosti je ponovno napisana u flexboxu s poboljšanom podrškom za poravnanje, odziv i prilagodbu.

  • Ponašanje responzivne navigacijske trake sada se primjenjuje na .navbarklasu putem potrebnog .navbar-expand-{breakpoint} mjesta gdje odaberete gdje ćete sažeti navigacijsku traku. Prethodno je ovo bila manje varijabilna izmjena i zahtijevala je ponovno kompajliranje.
  • .navbar-defaultje sada .navbar-light, iako .navbar-darkostaje isti. Jedan od ovih je potreban na svakoj navigacijskoj traci. Međutim, ove klase više ne postavljaju background-colors; umjesto toga oni u biti samo utječu na color.
  • Navigacijske trake sada zahtijevaju neku vrstu pozadinske deklaracije. Odaberite iz naših pomoćnih programa za pozadinu ( .bg-*) ili postavite svoje vlastite s gornjim klasama light/inverse za ludu prilagodbu .
  • S obzirom na stilove flexboxa, navigacijske trake sada mogu koristiti uslužne programe flexboxa za opcije jednostavnog poravnanja.
  • .navbar-toggleje sada .navbar-toggleri ima različite stilove i unutarnje oznake (nema više tri <span>s).
  • Potpuno sam napustio .navbar-formrazred. Više nije potrebno; umjesto toga, samo koristite .form-inlinei primijenite pomoćne alate za margine prema potrebi.
  • Navigacijske trake više ne uključuju margin-bottomili border-radiusprema zadanim postavkama. Po potrebi koristite pomoćne programe.
  • Svi primjeri koji sadrže navigacijske trake ažurirani su kako bi uključili nove oznake.

Paginacija

  • Prepravljena komponenta s flexboxom.
  • Eksplicitne klase ( .page-item, .page-link) sada su potrebne na potomcima .paginations
  • Potpuno izostavljena .pagerkomponenta jer je bila nešto više od prilagođenih obrisnih gumba.
  • Eksplicitna klasa, .breadcrumb-item, sada je potrebna na potomcima .breadcrumbs

Etikete i značke

  • Konsolidirano .labeli .badgerazdvojiti od <label>elementa i pojednostaviti povezane komponente.
  • Dodano .badge-pillkao modifikator za zaobljeni izgled "pilule".
  • Značke se više ne prikazuju automatski u grupama popisa i drugim komponentama. Za to su sada potrebni časovi korisnosti.
  • .badge-defaultje izbačen i .badge-secondarydodan kako bi odgovarao 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 s flexboxom.
  • .panel-defaultuklonjeno i bez zamjene.
  • .panel-groupuklonjeno i bez zamjene. .card-groupnije zamjena, drugačije je.
  • .panel-headingdo.card-header
  • .panel-titledo .card-title. Ovisno o željenom izgledu, možda ćete također htjeti koristiti 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, daje drugačiji izgled od .panel-title.
  • .panel-bodydo.card-body
  • .panel-footerdo.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, i .panel-dangerodbačeni su za .bg-, .text-, i .borderpomoćne programe generirane iz naše $theme-colorsSass karte.

Napredak

  • Kontekstualne .progress-bar-*klase zamijenjene pomoćnim .bg-*programima. Na primjer, class="progress-bar progress-bar-danger"postaje class="progress-bar bg-danger".
  • Zamijenjeno .activeza animirane trake napretka s .progress-bar-animated.
  • Pregledana 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 uklonjen i preimenovan, osiguravajući da svaka klasa ima prefiks .carousel-.
    • Za stavke vrtuljka, .next, .prev, .lefti .rightsada su .carousel-item-next, .carousel-item-prev, .carousel-item-lefti .carousel-item-right.
    • .itemje i sada .carousel-item.
    • Za prethodne/sljedeće kontrole, .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 su svi responzivni stilovi, odgađajući pomoćne programe (npr. prikazivanje naslova na određenim prozorima) i prilagođene stilove prema potrebi.
  • Uklonjena nadjačavanja slika za slike u stavkama vrtuljka, odgađajući pomoćne programe.
  • Dotjeran je primjer vrtuljka kako bi se uključile nove oznake i stilovi.

Stolovi

  • Uklonjena podrška za stilizirane ugniježđene tablice. Svi stilovi tablica sada su naslijeđeni u v4 za jednostavnije birače.
  • Dodana varijanta inverzne tablice.

Komunalije

  • Prikaz, skriveno i više:
    • Pomoćni programi za prikaz su responzivni (npr. .d-nonei d-{sm,md,lg,xl}-none).
    • Odbačena većina .hidden-*pomoćnih programa za nove pomoćne programe za prikaz . Na primjer, umjesto .hidden-sm-up, koristite .d-sm-none. Preimenovali su .hidden-printuslužne programe da koriste shemu imenovanja uslužnih programa za prikaz. Više informacija u odjeljku Responzivni uslužni programi na ovoj stranici.
    • Dodane su .float-{sm,md,lg,xl}-{left,right,none}klase za responzivne plovke i uklonjene .pull-lefti .pull-rightbudući da su suvišne za .float-lefti .float-right.
  • Tip:
    • Dodane su prilagodljive varijacije našim klasama poravnanja teksta .text-{sm,md,lg,xl}-{left,center,right}.
  • Poravnanje i razmak:
  • Clearfix ažuriran kako bi ukinuo podršku za starije verzije preglednika.

Miksini prefiksa dobavljača

Miksini prefiksa dobavljača Bootstrapa 3 , koji su zastarjeli u verziji 3.2.0, uklonjeni su u Bootstrapu 4. Budući da koristimo Autoprefixer , oni više nisu potrebni.

Uklonjeni su sljedeći mixini: 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 je dokumentacija također dobila nadogradnju u svim segmentima. Evo niskog:

  • Još uvijek koristimo Jekyll, ali u kombinaciji imamo dodatke:
    • bugify.rbkoristi se za učinkovito ispisivanje unosa na našoj stranici s greškama preglednika.
    • example.rbje prilagođeni fork zadanog highlight.rbdodatka, koji omogućuje lakše rukovanje primjerima koda.
    • callout.rbje sličan prilagođeni fork toga, ali dizajniran za naše posebne oblačiće dokumenata.
    • jekyll-toc se koristi za generiranje našeg sadržaja.
  • Sav sadržaj dokumenata je ponovno napisan u Markdownu (umjesto u HTML-u) radi lakšeg uređivanja.
  • Stranice su reorganizirane radi jednostavnijeg sadržaja i pristupačnije hijerarhije.
  • Prešli smo s običnog CSS-a na SCSS kako bismo u potpunosti iskoristili Bootstrapove varijable, mixine i više.

Responzivni uslužni programi

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

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

  • Klase .hiddeni .showsu uklonjene jer su bile u sukobu s metodama jQuery $(...).hide()i . $(...).show()Umjesto toga, pokušajte uključiti [hidden]atribut ili upotrijebite ugrađene stilove poput style="display: none;"i style="display: block;".
  • Sve .hidden-klase su uklonjene, osim uslužnih programa za ispis 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 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
  • Pomoćni programi za ispis više ne počinju s .hidden-ili .visible-, već s .d-print-.
    • Stara imena: .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 da ga jednostavno ne skrivate na toj veličini zaslona. Možete kombinirati jednu .d-*-noneklasu s jednom .d-*-blockklasom kako biste prikazali element samo na određenom intervalu veličina zaslona (npr .d-none.d-md-block.d-xl-none. prikazuje element samo na srednjim i velikim uređajima).

Imajte na umu da promjene prijelomnih točaka rešetke u verziji 4 znače da ćete morati povećati jednu prijelomnu točku kako biste postigli iste rezultate. Nove responzivne uslužne klase ne pokušavaju prilagoditi manje uobičajene slučajeve gdje se vidljivost elementa ne može izraziti kao jedan kontinuirani raspon veličina prozora; umjesto toga u takvim ćete slučajevima morati koristiti prilagođeni CSS.