in English

Notiek migrēšana uz v4

Bootstrap 4 ir liela visa projekta pārrakstīšana. Ievērojamākās izmaiņas ir apkopotas tālāk, kam seko specifiskākas attiecīgo komponentu izmaiņas.

Stabilas izmaiņas

Pārejot no Beta 3 uz mūsu stabilo v4.x izlaidumu, nav notikušas nekādas būtiskas izmaiņas, taču ir dažas ievērojamas izmaiņas.

Drukāšana

  • Novērstas bojātas drukas utilītas. Iepriekš .d-print-*klases izmantošana negaidīti ignorēja jebkuru citu .d-*klasi. Tagad tie atbilst citām mūsu displeja utilītprogrammām un attiecas tikai uz šo datu nesēju ( @media print).

  • Paplašinātas pieejamās drukas displeja utilītas, lai tās atbilstu citām utilītprogrammām. Beta 3 un vecākām versijām bija tikai block, inline-block, inlineun none. Stabils v4 pievienots flex, inline-flex, table, table-row, un table-cell.

  • Fiksēta drukas priekšskatījuma renderēšana dažādās pārlūkprogrammās ar jauniem drukas stiliem, kas norāda @page size.

Beta 3 izmaiņas

Lai gan Beta 2 versijā lielākā daļa mūsu neveiksmīgo izmaiņu tika novērotas beta fāzes laikā, mums joprojām ir dažas, kas bija jārisina Beta 3 laidienā. Šīs izmaiņas ir spēkā, ja atjaunināt uz Beta 3 no Beta 2 vai jebkuras vecākas Bootstrap versijas.

Dažādi

  • Noņemts neizmantotais $thumbnail-transitionmainīgais. Mēs neko nepārvietojām, tāpēc tas bija tikai papildu kods.
  • Npm pakotnē vairs nav iekļauti citi faili, izņemot mūsu avota un dist failus; ja paļāvāties uz tiem un palaidāt mūsu skriptus, izmantojot node_modulesmapi, jums vajadzētu pielāgot savu darbplūsmu.

Veidlapas

  • Pārrakstīja gan pielāgotās, gan noklusējuma izvēles rūtiņas un radio. Tagad abiem ir atbilstoša HTML struktūra (ārējā <div>ar brāli <input>un <label>) un vienādi izkārtojuma stili (noklusējuma grupēšana, iekļauta modifikācijas klasē). Tas ļauj mums veidot etiķetes stilu, pamatojoties uz ievades stāvokli, vienkāršojot disabledatribūta atbalstu (kam iepriekš bija nepieciešama vecākklase) un labāk atbalstot mūsu veidlapas validāciju.

    Tā ietvaros mēs esam mainījuši CSS, lai pārvaldītu vairākas background-imagepielāgotās veidlapas izvēles rūtiņas un radio. Iepriekš tagad noņemtajam .custom-control-indicatorelementam bija fona krāsa, gradients un SVG ikona. Fona gradienta pielāgošana nozīmēja to visu nomaiņu katru reizi, kad vajadzēja mainīt tikai vienu. Tagad mums ir .custom-control-label::beforeaizpildījums un gradients, kā .custom-control-label::afterarī ikonas rokturi.

    Lai veiktu pielāgotu pārbaudi iekļautā veidā, pievienojiet .custom-control-inline.

  • Atjaunināts uz ievadi balstītu pogu grupu atlasītājs. Stila un uzvedības vietā [data-toggle="buttons"] { }mēs izmantojam dataatribūtu tikai JS uzvedībai un paļaujamies uz jaunu .btn-group-togglestilu veidošanai.

  • Noņemts .col-form-legendpar labu nedaudz uzlabotam .col-form-label. Tādā veidā .col-form-label-smun .col-form-label-lgto var viegli izmantot <legend>elementiem.

  • Pielāgotās failu ievades saņēma izmaiņas to $custom-file-textSass mainīgajā. Tā vairs nav ligzdota Sass karte, un tagad tā nodrošina tikai vienu virkni — šī Browsepoga tagad ir vienīgais pseidoelements, kas ģenerēts no mūsu Sass. Teksts Choose filetagad nāk no .custom-file-label.

Ievades grupas

  • Ievades grupas papildinājumi tagad ir raksturīgi to izvietojumam attiecībā pret ievadi. Mēs esam pametuši .input-group-addonun .input-group-btndivas jaunas nodarbības, .input-group-prependun .input-group-append. Tagad ir skaidri jāizmanto pielikums vai priekšraksts, vienkāršojot lielu daļu no mūsu CSS. Papildinājumā vai pirmspievienojumā ievietojiet pogas tā, kā tās būtu jebkur citur, bet aplauziet tekstu .input-group-text.

  • Tagad tiek atbalstīti validācijas stili, kā arī vairākas ievades (lai gan katrā grupā varat apstiprināt tikai vienu ievadi).

  • Izmēru klasēm ir jānorāda vecākelementi .input-group, nevis atsevišķi veidlapas elementi.

Beta 2 izmaiņas

Beta versijā mēs cenšamies panākt, lai nebūtu būtiskas izmaiņas. Tomēr lietas ne vienmēr notiek, kā plānots. Tālāk ir norādītas galvenās izmaiņas, kas jāpatur prātā, pārejot no 1. beta uz 2. beta versiju.

Laušana

  • Noņemts $badge-colormainīgais un tā lietojums .badge. Mēs izmantojam krāsu kontrasta funkciju, lai izvēlētos, colorpamatojoties uz background-color, tāpēc mainīgais nav nepieciešams.
  • grayscale()Funkcija pārdēvēta par, gray()lai izvairītos no konflikta ar CSS vietējo grayscalefiltru.
  • Pārdēvēts par .table-inverse, .thead-inverseun .thead-defaultuz .*-darkun .*-light, kas atbilst mūsu citur izmantotajām krāsu shēmām.
  • Adaptīvās tabulas tagad ģenerē klases katram režģa pārtraukuma punktam. Tas atšķiras no Beta 1, jo .table-responsivejūsu izmantotā versija ir vairāk līdzīga .table-responsive-md. Tagad varat izmantot .table-responsivevai .table-responsive-{sm,md,lg,xl}pēc vajadzības.
  • Bower atbalsts tika pārtraukts, jo pakotņu pārvaldnieks ir novecojis alternatīvām (piemēram, Yarn vai npm). Plašāku informāciju skatiet bower/bower#2298 .
  • Bootstrap joprojām ir nepieciešama jQuery 1.9.1 vai jaunāka versija, taču ieteicams izmantot versiju 3.x, jo Bootstrap atbalsta versijas v3.x atbalstītās pārlūkprogrammas, kā arī v3.x ir daži drošības labojumi.
  • Noņemta neizmantotā .form-control-labelklase. Ja izmantojāt šo klasi, tā bija tās .col-form-labelklases dublikāts, kas vertikāli centrēja a <label>ar ar to saistīto ievadi horizontālos veidlapu izkārtojumos.
  • Mainīts color-yiqno mixin, kurā bija iekļauts colorrekvizīts, uz funkciju, kas atgriež vērtību, ļaujot to izmantot jebkuram CSS īpašumam. Piemēram, tā vietā color-yiq(#000)jūs rakstītu color: color-yiq(#000);.

Izceļ

  • Ieviests jauns pointer-eventslietojums modāļiem. Ārējā daļa .modal-dialogiet cauri notikumiem, pointer-events: nonelai pielāgotu klikšķu apstrādi (ļaujot vienkārši noklausīties .modal-backdropvisus klikšķus), un pēc tam neitralizē faktiskos, .modal-contentizmantojot pointer-events: auto.

Kopsavilkums

Šeit ir norādīti lielie biļešu vienumi, kas jums jāzina, pārejot no v3 uz v4.

Pārlūka atbalsts

  • Atmests IE8, IE9 un iOS 6 atbalsts. v4 tagad ir tikai IE10+ un iOS 7+. Vietnēm, kurām nepieciešams kāds no tiem, izmantojiet v3.
  • Pievienots oficiālais Android v5.0 Lollipop pārlūkprogrammas un WebView atbalsts. Iepriekšējās Android pārlūkprogrammas un WebView versijas tiek atbalstītas tikai neoficiāli.

Globālās izmaiņas

  • Flexbox ir iespējots pēc noklusējuma. Kopumā tas nozīmē attālināšanos no pludiņiem un citiem mūsu komponentiem.
  • Pārslēgts no Less uz Sass mūsu avota CSS failiem.
  • Pārslēgts no pxuz remkā mūsu primāro CSS vienību, lai gan pikseļi joprojām tiek izmantoti multivides vaicājumiem un režģa darbībai, jo ierīces skata logus neietekmē tipa lielums.
  • Globālais fonta lielums palielināts no 14pxuz 16px.
  • Pārveidoti režģa līmeņi, lai pievienotu piekto opciju (kas attiecas uz mazākām ierīcēm, kas atrodas 576pxun zemāk), un -xsno šīm klasēm tika noņemts infix. Piemērs: .col-6.col-sm-4.col-md-3.
  • Atsevišķā izvēles tēma ir aizstāta ar konfigurējamām opcijām, izmantojot SCSS mainīgos (piemēram, $enable-gradients: true).
  • Būvsistēma ir pārveidota, lai Grunt vietā izmantotu virkni npm skriptu. Skatiet package.jsonvisus skriptus vai mūsu projekta readme vietējās attīstības vajadzībām.
  • Bootstrap nereaģējoša lietošana vairs netiek atbalstīta.
  • Tiešsaistes pielāgošanas rīks tika atmests par labu plašākai iestatīšanas dokumentācijai un pielāgotām versijām.
  • Pievienotas desmitiem jaunu utilītu klašu parastajiem CSS rekvizītu-vērtību pāriem un piemales/polsterējuma atstarpju īsinājumtaustiņiem.

Režģa sistēma

  • Pārvietots uz flexbox.
    • Pievienots atbalsts flexbox režģa mixins un iepriekš definētās klasēs.
    • Kā daļa no flexbox, iekļauts atbalsts vertikālās un horizontālās izlīdzināšanas klasēm.
  • Atjaunināti režģa klašu nosaukumi un jauns režģa līmenis.
    • Tālāk ir pievienots jauns smrežģa līmenis, 768pxlai iegūtu detalizētāku kontroli. Tagad mums ir xs, sm, md, lgun xl. Tas arī nozīmē, ka katrs līmenis ir paaugstināts par vienu līmeni (tātad .col-md-6v3 tagad .col-lg-6ir v4).
    • xsrežģa klases ir modificētas, lai neprasītu infiksu, lai precīzāk attēlotu, ka tās sāk lietot stilus no iestatītās pikseļa vērtības, min-width: 0nevis iestatītās pikseļa vērtības. Tā vietā .col-xs-6, tas ir tagad .col-6. Visiem pārējiem režģa līmeņiem ir nepieciešams infikss (piem., sm).
  • Atjaunināti režģa izmēri, kombinācijas un mainīgie.
    • Režģa notekcaurulēm tagad ir Sass karte, lai jūs varētu norādīt konkrētu noteku platumu katrā pārtraukuma punktā.
    • Atjaunināti režģa mixins, lai izmantotu make-col-readysagatavošanas sajaukšanu un a make-col, lai iestatītu flexun max-widthatsevišķu kolonnu izmērus.
    • Mainīti režģa sistēmas multivides vaicājumu pārtraukuma punkti un konteineru platumi, lai ņemtu vērā jauno režģa līmeni un nodrošinātu, ka kolonnas ir vienmērīgi dalāmas ar 12to maksimālo platumu.
    • Režģa pārtraukuma punkti un konteineru platumi tagad tiek apstrādāti, izmantojot Sass kartes ( $grid-breakpointsun $container-max-widths), nevis dažus atsevišķus mainīgos. Tie pilnībā aizstāj @screen-*mainīgos un ļauj pilnībā pielāgot režģa līmeņus.
    • Mainījušies arī mediju vaicājumi. Tā vietā, lai katru reizi atkārtotu multivides vaicājumu deklarācijas ar vienu un to pašu vērtību, tagad mums ir @include media-breakpoint-up/down/only. Tagad rakstīšanas vietā @media (min-width: @screen-sm-min) { ... }varat rakstīt @include media-breakpoint-up(sm) { ... }.

Sastāvdaļas

  • Nomesti paneļi, sīktēli un iedobes jaunam visaptverošam komponentam — kartēm .
  • Atmests Glyphicons ikonas fonts. Ja jums ir nepieciešamas ikonas, dažas iespējas ir:
  • Atmests spraudnis Affix jQuery.
    • Mēs iesakām izmantot position: stickytā vietā. Skatiet HTML5, lūdzu , ievadiet, lai iegūtu detalizētu informāciju un konkrētus ieteikumus par aizpildījumu. Viens no ieteikumiem ir izmantot @supportsnoteikumu tā ieviešanai (piemēram, @supports (position: sticky) { ... })
    • Ja izmantojāt Affix, lai lietotu papildu, ne- positionstilus, poliaizpildes var neatbalstīt jūsu lietošanas gadījumu. Viena no iespējām šādiem lietojumiem ir trešās puses ScrollPos-Styler bibliotēka.
  • Atkrita peidžera komponents , jo tas būtībā bija nedaudz pielāgotas pogas.
  • Pārveidoti gandrīz visi komponenti , lai izmantotu vairāk neligzdotu klašu atlasītāju, nevis pārāk specifiskus bērnu atlasītājus.

Pēc sastāvdaļas

Šajā sarakstā ir izceltas galvenās izmaiņas pa komponentiem starp v3.xx un v4.0.0.

Reboot

Bootstrap 4 jaunums ir Reboot — jauna stila lapa, kas balstās uz Normalize ar mūsu pašu zināmajiem atiestatīšanas stiliem. Šajā failā redzamie atlasītāji izmanto tikai elementus — šeit nav klašu. Tādējādi mūsu atiestatīšanas stili tiek izolēti no mūsu komponentu stiliem, lai nodrošinātu modulārāku pieeju. Dažas no svarīgākajām atiestatīšanas reizēm ir daudzu elementu box-sizing: border-boxmaiņa, pāreja no emvienībām rem, saišu stili un daudzu veidlapas elementu atiestatīšana.

Tipogrāfija

  • Visas .text-utilītas ir pārvietotas uz _utilities.scssfailu.
  • Atmests .page-header, jo tā stilus var lietot, izmantojot utilītas.
  • .dl-horizontalir nomests. Tā vietā izmantojiet .rowun <dl>izmantojiet režģa kolonnu klases (vai mixins) tās <dt>un <dd>bērniem.
  • Pārveidoti pēdiņas, pārceļot to stilus no <blockquote>elementa uz vienu klasi, .blockquote. Teksta utilītu .blockquote-reversemodifikators tika atmests.
  • .list-inlinetagad pieprasa, lai tās pakārtotā saraksta vienumiem tiktu piemērota jaunā .list-inline-itemklase.

Attēli

  • Pārdēvēts .img-responsivepar .img-fluid.
  • Pārdēvēts .img-roundedpar.rounded
  • Pārdēvēts .img-circlepar.rounded-circle

Tabulas

  • Gandrīz visi >atlasītāja gadījumi ir noņemti, tas nozīmē, ka ligzdotās tabulas tagad automātiski pārmantos stilus no saviem vecākiem. Tas ievērojami vienkāršo mūsu atlasītājus un iespējamos pielāgojumus.
  • Konsekvences labad pārdēvēts .table-condensedpar ..table-sm
  • Pievienota jauna .table-inverseopcija.
  • Pievienoti tabulas galvenes modifikatori: .thead-defaultun .thead-inverse.
  • Kontekstuālās klases pārdēvētas, lai tām būtu .table--prefikss. Tādējādi .active, .success, .warning, .dangerun .infouz .table-active, .table-success, .table-warning, .table-dangerun .table-info.

Veidlapas

  • Pārvietotais elements tiek atiestatīts uz _reboot.scssfailu.
  • Pārdēvēts .control-labelpar .col-form-label.
  • Pārdēvēts attiecīgi par .input-lgun ..input-sm.form-control-lg.form-control-sm
  • Nodarbības tika pārtrauktas .form-group-*vienkāršības labad. Tā vietā izmantojiet .form-control-*nodarbības tagad.
  • Atmests .help-blockun aizstāts ar .form-textbloka līmeņa palīdzības tekstam. Iekļautam palīdzības tekstam un citām elastīgām opcijām izmantojiet utilītu klases, piemēram, .text-muted.
  • Nokrita .radio-inlineun .checkbox-inline.
  • Konsolidēts .checkboxun .radiodažādās klasēs .form-check..form-check-*
  • Horizontālās formas kapitāli remontētas:
    • Atteicās no .form-horizontalklases prasības.
    • .form-groupvairs neizmanto stilus no .rowvia mixin, tāpēc .rowtagad ir nepieciešams horizontālajiem režģa izkārtojumiem (piem., <div class="form-group row">).
    • Pievienota jauna .col-form-labelklase vertikāli centrētajām etiķetēm ar .form-controls.
    • Pievienots jaunums .form-rowkompakto formu izkārtojumiem ar režģa klasēm (nomainiet savu .rowpret a .form-rowun aiziet).
  • Pievienots pielāgoto veidlapu atbalsts (izvēles rūtiņām, radioaparātiem, atlasēm un failu ievadēm).
  • Aizstāts .has-error, .has-warning, un .has-successklases ar HTML5 veidlapu validāciju, izmantojot CSS :invalidun :validpseidoklases.
  • Pārdēvēts .form-control-staticpar .form-control-plaintext.

Pogas

  • Pārdēvēts .btn-defaultpar .btn-secondary.
  • Pilnībā atmeta .btn-xsklase, jo .btn-smtā ir proporcionāli daudz mazāka par v3.
  • jQuery spraudņa statusa pogas funkcija button.jsir atcelta. Tas ietver $().button(string)un $().button('reset')metodes. Tā vietā mēs iesakām izmantot nelielu pielāgotu JavaScript, kas dos labumu, ja darbosies tieši tā, kā vēlaties.
    • Ņemiet vērā, ka pārējās spraudņa funkcijas (pogu izvēles rūtiņas, pogu radio, vienas pārslēgšanas pogas) ir saglabātas versijā 4.
  • Mainiet pogas [disabled]uz :disabledIE9+ atbalsta :disabled. Tomēr fieldset[disabled]tas joprojām ir nepieciešams, jo vietējās atspējotās lauku kopas joprojām ir kļūdainas IE11 .

Pogu grupa

  • Pārrakstīja komponentu ar flexbox.
  • Noņemts .btn-group-justified. Kā nomaiņu varat izmantot <div class="btn-group d-flex" role="group"></div>kā aptinumu ap elementiem ar .w-100.
  • .btn-group-xsNodarbība tika pilnībā pārtraukta, jo tika noņemts .btn-xs.
  • Noņemtas skaidras atstarpes starp pogu grupām pogu rīkjoslās; izmantojiet maržas komunālos pakalpojumus tagad.
  • Uzlabota dokumentācija lietošanai ar citām sastāvdaļām.
  • Pārslēgts no vecāku atlasītājiem uz vienskaitļa klasēm visiem komponentiem, modifikatoriem utt.
  • Vienkāršoti nolaižamās izvēlnes stili, lai vairs netiktu piegādāti ar uz augšu vai uz leju vērstām bultiņām, kas pievienotas nolaižamajai izvēlnei.
  • Nolaižamās izvēlnes var izveidot ar <div>s vai <ul>s tagad.
  • <a>Pārbūvēti nolaižamās izvēlnes stili un marķējums, lai nodrošinātu vienkāršu , iebūvētu atbalstu <button>nolaižamajiem vienumiem.
  • Pārdēvēts .dividerpar .dropdown-divider.
  • Nolaižamajiem vienumiem tagad ir nepieciešams .dropdown-item.
  • Nolaižamajiem pārslēgiem vairs nav nepieciešams precīzs <span class="caret"></span>; tagad tas tiek nodrošināts automātiski, izmantojot CSS ::aftervietnē .dropdown-toggle.

Režģa sistēma

  • Pievienots jauns 576pxrežģa pārtraukuma punkts kā sm, kas nozīmē, ka tagad kopā ir pieci līmeņi ( xs, sm, md, lg, un xl).
  • Adaptīvās režģa modifikatoru klases pārdēvēja no .col-{breakpoint}-{modifier}-{size}uz .{modifier}-{breakpoint}-{size}vienkāršākām režģa klasēm.
  • Atmestas push un pull modifikatoru klases jaunajām ar flexbox darbināmajām orderklasēm. Piemēram, un vietā .col-8.push-4jūs .col-4.pull-8izmantotu .col-8.order-2un .col-4.order-1.
  • Pievienotas flexbox lietderības klases tīkla sistēmai un komponentiem.

Saraksta grupas

  • Pārrakstīja komponentu ar flexbox.
  • Aizstāts a.list-group-itemar nepārprotamu klasi , .list-group-item-actionlai veidotu saraksta grupas vienumu saišu un pogu versijas.
  • Pievienota .list-group-flushklase lietošanai ar kartēm.
  • Pārrakstīja komponentu ar flexbox.
  • Ņemot vērā pāreju uz flexbox, noraidīšanas ikonu izlīdzināšana galvenē, visticamāk, ir bojāta, jo mēs vairs neizmantojam pludiņus. Peldošais saturs ir pirmajā vietā, taču ar flexbox tas vairs nav aktuāls. Atjauniniet noraidīšanas ikonas, lai tās tiktu rādītas pēc modālajiem nosaukumiem, kas jālabo.
  • Tika noņemta remoteopcija (ko var izmantot, lai automātiski ielādētu un ievadītu ārēju saturu modālā) un atbilstošais loaded.bs.modalnotikums. Tā vietā mēs iesakām izmantot klienta puses veidni vai datu saistīšanas ietvaru vai pašam izsaukt jQuery.load .
  • Pārrakstīja komponentu ar flexbox.
  • Atmesti gandrīz visi >atlasītāji vienkāršākai veidošanai, izmantojot neligzdotas klases.
  • HTML specifisku atlasītāju, piemēram .nav > li > a, , vietā mēs izmantojam atsevišķas klases .navs, .nav-items un .nav-links. Tas padara jūsu HTML elastīgāku, vienlaikus nodrošinot lielāku paplašināmību.

Navigācijas josla ir pilnībā pārrakstīta elastīgajā lodziņā ar uzlabotu atbalstu līdzināšanai, reaģēšanai un pielāgošanai.

  • Adaptīvās navigācijas joslas darbības tagad tiek piemērotas .navbarklasei, izmantojot nepieciešamo, .navbar-expand-{breakpoint} kur izvēlaties, kur sakļaut navigācijas joslu. Iepriekš šī bija mazāk mainīga modifikācija, un bija nepieciešama atkārtota kompilēšana.
  • .navbar-defaultir tagad .navbar-light, lai gan .navbar-darkpaliek tas pats. Viens no tiem ir nepieciešams katrā navigācijas joslā. Tomēr šīs klases vairs nenosaka background-colors; tā vietā tie būtībā ietekmē tikai color.
  • Navigācijas joslām tagad ir nepieciešama sava veida fona deklarācija. Izvēlieties kādu no mūsu fona utilītprogrammām ( .bg-*) vai iestatiet savu, izmantojot iepriekš redzamās gaismas/apgrieztās klases , lai veiktu pielāgošanu .
  • Ņemot vērā flexbox stilus, navigācijas joslas tagad var izmantot flexbox utilītas, lai atvieglotu līdzināšanas opcijas.
  • .navbar-toggleir tagad .navbar-toggler, un tam ir dažādi stili un iekšējais marķējums (ne vairāk kā trīs <span>s).
  • Pilnībā pameta .navbar-formklasi. Tas vairs nav nepieciešams; tā vietā izmantojiet .form-inlineun pēc vajadzības izmantojiet rezerves utilītas.
  • Navigācijas joslas vairs nav iekļautas margin-bottomvai border-radiuspēc noklusējuma. Ja nepieciešams, izmantojiet utilītas.
  • Visi piemēri ar navigācijas joslām ir atjaunināti, lai iekļautu jaunus marķējumus.

Lapu šķirošana

  • Pārrakstīja komponentu ar flexbox.
  • Skaidras klases ( .page-item, .page-link) tagad ir nepieciešamas .paginations pēctečiem
  • Komponents tika pilnībā atmests, .pagerjo tas bija nedaudz vairāk par pielāgotām kontūru pogām.
  • Tagad s .breadcrumb-itempēctečiem ir nepieciešama skaidra klase.breadcrumb

Etiķetes un nozīmītes

  • Konsolidēts .labelun .badgeatdalīt no <label>elementa un vienkāršot saistītos komponentus.
  • Pievienots .badge-pillkā modifikators noapaļotam "tabletes" izskatam.
  • Emblēmas vairs netiek automātiski peldētas sarakstu grupās un citos komponentos. Tagad tam ir nepieciešamas komunālo pakalpojumu klases.
  • .badge-defaultir atmests un .badge-secondarypievienots, lai atbilstu citur izmantotajām komponentu modifikatoru klasēm.

Paneļi, sīktēli un akas

Pilnībā atmests jaunajam kartes komponentam.

Paneļi

  • .paneluz .card, tagad ir izveidots ar flexbox.
  • .panel-defaultnoņemts un nav aizstāts.
  • .panel-groupnoņemts un nav aizstāts. .card-groupnav aizstājējs, tas ir atšķirīgs.
  • .panel-headinguz.card-header
  • .panel-titleuz .card-title. Atkarībā no vēlamā izskata, iespējams, vēlēsities izmantot arī virsraksta elementus vai klases (piem <h3>., .h3) vai treknraksta elementus vai klases (piemēram <strong>, <b>, , .font-weight-bold). Ņemiet vērā, ka .card-title, lai gan nosaukums ir līdzīgs, tas rada atšķirīgu izskatu nekā .panel-title.
  • .panel-bodyuz.card-body
  • .panel-footeruz.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, un .panel-dangerir atmestas .bg-, .text-un .borderutilītas, kas ģenerētas no mūsu $theme-colorsSass kartes.

Progress

  • Kontekstuālās .progress-bar-*klases aizstātas ar .bg-*utilītprogrammām. Piemēram, class="progress-bar progress-bar-danger"kļūst par class="progress-bar bg-danger".
  • Animētas progresa joslas ir aizstātas .activear .progress-bar-animated.
  • Visa sastāvdaļa ir pārskatīta, lai vienkāršotu dizainu un stilu. Mums ir mazāk stilu, kurus varat ignorēt, jauni indikatori un jaunas ikonas.
  • Visi CSS ir atdalīti un pārdēvēti, nodrošinot, ka katrai klasei ir prefikss .carousel-.
    • Karuseļa vienumiem , .next, .prev, .leftun .righttagad ir .carousel-item-next, .carousel-item-prev, .carousel-item-left, un .carousel-item-right.
    • .itemir arī tagad .carousel-item.
    • Iepriekšējām/nākamajām vadīklām .carousel-control.rightun .carousel-control.lefttagad .carousel-control-nextun .carousel-control-prev, kas nozīmē, ka tām vairs nav nepieciešama noteikta bāzes klase.
  • Noņemts viss adaptīvais stils, pārejot uz utilītprogrammām (piemēram, parakstu rādīšanu noteiktos skata portos) un pielāgotos stilus, ja nepieciešams.
  • Karuseļa vienumos esošajiem attēliem ir noņemta attēla ignorēšana, atliekot tos uz utilītprogrammām.
  • Pielāgots karuseļa piemērs, lai iekļautu jauno marķējumu un stilus.

Tabulas

  • Noņemts atbalsts veidotām ligzdotām tabulām. Visi tabulu stili tagad ir mantoti versijā v4 vienkāršākiem atlasītājiem.
  • Pievienots apgrieztās tabulas variants.

Komunālie pakalpojumi

  • Displejs, paslēpts un daudz kas cits:
    • Padarīja displeja utilītas atsaucīgas (piem.,.d-none un d-{sm,md,lg,xl}-none).
    • Atteicās no lielākās daļas .hidden-*utilītu jaunām displeja utilītprogrammām . Piemēram, tā vietā .hidden-sm-upizmantojiet .d-sm-none. Pārdēvēja .hidden-printutilītas, lai izmantotu displeja utilītas nosaukšanas shēmu. Vairāk informācijas zem šīs lapas sadaļā Adaptīvās utilītas .
    • Pievienotas .float-{sm,md,lg,xl}-{left,right,none}klases adaptīvajiem peldlīdzekļiem un noņemtas .pull-leftun, .pull-rightjo tās ir liekas .float-leftun .float-right.
  • Veids:
    • Pievienotas adaptīvas variācijas mūsu teksta līdzināšanas klasēm .text-{sm,md,lg,xl}-{left,center,right}.
  • Izlīdzināšana un atstarpes:
  • Clearfix ir atjaunināts, lai pārtrauktu vecāku pārlūkprogrammas versiju atbalstu.

Pārdevēja prefiksu mixins

Bootstrap 3 pārdevēja prefiksu maisītāji, kas tika novecojuši versijā 3.2.0, ir noņemti no Bootstrap 4. Tā kā mēs izmantojam Autoprefixer , tie vairs nav nepieciešami.

Noņēma šādus miksus : 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,translatetranslate3duser-select

Dokumentācija

Arī mūsu dokumentācija tika pilnībā atjaunināta. Lūk, zemākais līmenis:

  • Mēs joprojām izmantojam Jekyll, taču mums ir pieejami spraudņi:
    • bugify.rbtiek izmantots, lai efektīvi uzskaitītu ierakstus mūsu pārlūkprogrammas kļūdu lapā.
    • example.rbir noklusējuma highlight.rbspraudņa pielāgota dakša, kas ļauj vieglāk apstrādāt piemēru kodu.
    • callout.rbir līdzīga pielāgota dakša, taču paredzēta mūsu īpašajām dokumentu norādēm.
    • jekyll-toc tiek izmantots, lai ģenerētu mūsu satura rādītāju.
  • Viss dokumentu saturs ir pārrakstīts Markdown (nevis HTML), lai atvieglotu rediģēšanu.
  • Lapas ir reorganizētas, lai nodrošinātu vienkāršāku saturu un pieejamāku hierarhiju.
  • Mēs pārgājām no parastā CSS uz SCSS, lai pilnībā izmantotu Bootstrap mainīgos, mixins un daudz ko citu.

Atsaucīgi komunālie pakalpojumi

Visi @screen-mainīgie ir noņemti versijā v4.0.0. Izmantojiet media-breakpoint-up(), media-breakpoint-down(), vai media-breakpoint-only()Sass mixins vai$grid-breakpoints Sass karti.

Mūsu adaptīvās utilītu klases lielākoties ir noņemtas par labu nepārprotamiem displayutilītiem.

  • Klases .hiddenun .showir noņemtas, jo tās bija pretrunā ar jQuery $(...).hide()un $(...).show()metodēm. Tā vietā mēģiniet pārslēgt [hidden]atribūtu vai izmantojiet iekļautos stilus, piemēram, style="display: none;"un style="display: block;".
  • Visas .hidden-klases ir noņemtas, izņemot drukas utilītas, kas ir pārdēvētas.
    • Noņemts no 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
    • Noņemts no alfa versijas 4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Drukas utilītas vairs nesākas ar .hidden-vai .visible-, bet gan ar .d-print-.
    • Vecie vārdi: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Jaunas nodarbības: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Tā vietā, lai izmantotu precīzas .visible-*klases, jūs padarāt elementu redzamu, vienkārši neslēpjot to šajā ekrāna izmērā. Varat apvienot vienu .d-*-noneklasi ar vienu .d-*-blockklasi, lai elementu rādītu tikai noteiktā ekrāna izmēru intervālā (piem .d-none.d-md-block.d-xl-none., elementu parāda tikai vidējās un lielās ierīcēs).

Ņemiet vērā, ka izmaiņas režģa pārtraukuma punktos 4. versijā nozīmē, ka jums būs jāpalielina par vienu pārtraukuma punktu, lai sasniegtu tādus pašus rezultātus. Jaunās adaptīvās lietderības klases nemēģina pielāgoties retāk sastopamiem gadījumiem, kad elementa redzamību nevar izteikt kā vienu blakus esošu skata loga izmēru diapazonu; tā vietā šādos gadījumos jums būs jāizmanto pielāgots CSS.