Migrarea la v4

Bootstrap 4 este o rescrie majoră a întregului proiect. Cele mai notabile modificări sunt rezumate mai jos, urmate de modificări mai specifice ale componentelor relevante.

Schimbări stabile

Trecând de la Beta 3 la versiunea noastră stabilă v4.x, nu există modificări finale, dar există unele modificări notabile.

Imprimare

• S-au remediat utilitarele de imprimare stricate. Anterior, utilizarea unei .d-print-*clase ar anula în mod neașteptat orice altă .d-*clasă. Acum, ele se potrivesc cu celelalte utilitare de afișare ale noastre și se aplică numai acelui mediu ( @media print).

• Utilitare de afișare de imprimare extinse pentru a se potrivi cu alte utilitare. Beta 3 și mai vechi au avut doar block, inline-block, inlineși none. Stable v4 adăugat flex, inline-flex, table, table-rowși table-cell.

• S-a remediat redarea previzualizării de imprimare în browsere cu noi stiluri de imprimare care specifică @page size.

Modificări beta 3

În timp ce Beta 2 a văzut cea mai mare parte a schimbărilor noastre de ultimă oră în timpul fazei beta, dar mai avem câteva care trebuiau abordate în versiunea Beta 3. Aceste modificări se aplică dacă actualizați la Beta 3 din Beta 2 sau orice versiune mai veche a Bootstrap.

Diverse

• $thumbnail-transitionS-a eliminat variabila neutilizată . Nu facem tranziția nimic, așa că era doar cod suplimentar.
• Pachetul npm nu mai include alte fișiere decât fișierele noastre sursă și dist; dacă v-ați bazat pe ele și executați scripturile noastre prin intermediul node_modulesfolderului, ar trebui să vă adaptați fluxul de lucru.

Forme

• Rescrie atât casetele de selectare personalizate, cât și cele implicite și radiourile. Acum, ambele au o structură HTML care se potrivește (exterior <div>cu fratele <input>și <label>) și aceleași stiluri de aspect (stivuit implicit, în linie cu clasa modificatorului). Acest lucru ne permite să stilăm eticheta în funcție de starea intrării, simplificând suportul pentru disabledatribut (anterior necesită o clasă părinte) și susținând mai bine validarea formularului.

  Ca parte a acestui lucru, am schimbat CSS-ul pentru gestionarea mai multor background-images-uri pe casetele de selectare și radiouri de formulare personalizate. Anterior, elementul acum eliminat .custom-control-indicatoravea culoarea de fundal, gradientul și pictograma SVG. Personalizarea gradientului de fundal a însemnat înlocuirea tuturor acestora de fiecare dată când trebuia să schimbi doar unul. Acum, avem .custom-control-label::beforepentru umplere și gradient și .custom-control-label::afterse ocupă de pictogramă.

  Pentru a face o verificare personalizată în linie, adăugați .custom-control-inline.

• Selector actualizat pentru grupurile de butoane bazate pe introducere. În loc de [data-toggle="buttons"] { }stil și comportament, folosim dataatributul doar pentru comportamentele JS și ne bazăm pe o nouă .btn-group-toggleclasă pentru stil.

• Eliminat .col-form-legendîn favoarea unui ușor îmbunătățit .col-form-label. În acest fel .col-form-label-smși .col-form-label-lgpoate fi folosit pe <legend>elemente cu ușurință.

• Intrările de fișiere personalizate au primit o modificare a $custom-file-textvariabilei Sass. Nu mai este o hartă Sass imbricată și acum alimentează doar un șir - Browsebutonul deoarece acesta este acum singurul pseudo-element generat din Sass-ul nostru. Textul Choose fileprovine acum din .custom-file-label.

Grupuri de intrare

• Suplimentele grupului de intrare sunt acum specifice pentru plasarea lor în raport cu o intrare. Am renunțat .input-group-addonși .input-group-btnpentru două clase noi .input-group-prependși .input-group-append. Trebuie să utilizați în mod explicit un anexare sau un antecedente acum, simplificând o mare parte din CSS-ul nostru. Într-o adăugare sau un antecedente, plasați butoanele așa cum ar exista oriunde altundeva, dar împachetați textul în .input-group-text.

• Stilurile de validare sunt acum acceptate, la fel ca și intrările multiple (deși puteți valida doar o intrare per grup).

• Clasele de dimensionare trebuie să fie pe elementul părinte .input-groupși nu pe elementele individuale ale formularului.

Modificări beta 2

În timpul beta, ne propunem să nu avem modificări de ultimă oră. Cu toate acestea, lucrurile nu merg întotdeauna așa cum a fost planificat. Mai jos sunt cele mai importante modificări de care trebuie să țineți cont atunci când treceți de la Beta 1 la Beta 2.

Spargere

• $badge-colorVariabila eliminată și utilizarea acesteia pe .badge. Folosim o funcție de contrast de culoare pentru a alege un colorpe baza background-color, deci variabila nu este necesară.
• grayscale()Funcție redenumită pentru gray()a evita întreruperea conflictului cu grayscalefiltrul nativ CSS.
• Redenumiți .table-inverse, .thead-inverse, și .thead-defaultla .*-darkși .*-light, potrivirea schemelor noastre de culori folosite în altă parte.
• Tabelele receptive generează acum clase pentru fiecare punct de întrerupere a grilei. Acest lucru se desparte de Beta 1 prin faptul că cel pe .table-responsivecare l-ați folosit seamănă mai mult cu .table-responsive-md. Acum puteți utiliza .table-responsivesau .table-responsive-{sm,md,lg,xl}după cum este necesar.
• S-a renunțat la suportul Bower, deoarece managerul de pachete a fost depreciat pentru alternative (de exemplu, Yarn sau npm). Consultați bower/bower#2298 pentru detalii.
• Bootstrap încă necesită jQuery 1.9.1 sau o versiune ulterioară, dar vi se recomandă să utilizați versiunea 3.x, deoarece browserele acceptate de v3.x sunt cele pe care Bootstrap le acceptă, iar v3.x are unele remedieri de securitate.
• S-a eliminat .form-control-labelclasa nefolosită. Dacă ați folosit această clasă, a fost duplicatul .col-form-labelclasei care a centrat vertical a <label>cu intrarea asociată în forme orizontale.
• S-a schimbat de color-yiqla un mixin care includea colorproprietatea la o funcție care returnează o valoare, permițându-vă să o utilizați pentru orice proprietate CSS. De exemplu, în loc de color-yiq(#000), ai scrie color: color-yiq(#000);.

Repere

• S-a introdus o nouă pointer-eventsutilizare a modalelor. Exteriorul .modal-dialogtrece prin evenimente cu pointer-events: nonepentru gestionarea personalizată a clicurilor (făcând posibil să ascultați doar .modal-backdroppentru orice clicuri), apoi îl contracarează pentru cel real .modal-contentcu pointer-events: auto.

rezumat

Iată principalele articole de bilet de care veți dori să fiți conștienți atunci când treceți de la v3 la v4.

Suport pentru browser

• S-a renunțat la suportul IE8, IE9 și iOS 6. v4 este acum doar IE10+ și iOS 7+. Pentru site-urile care au nevoie de oricare dintre acestea, utilizați v3.
• S-a adăugat suport oficial pentru browserul Android v5.0 Lollipop și WebView. Versiunile anterioare ale browserului Android și WebView rămân doar acceptate neoficial.

Schimbări globale

• Flexbox este activat în mod implicit. În general, aceasta înseamnă o îndepărtare de flotoare și mai mult între componentele noastre.
• Am trecut de la Less la Sass pentru fișierele noastre CSS sursă.
• Am trecut de la pxla remca unitate CSS principală, deși pixelii sunt încă utilizați pentru interogări media și comportamentul grilei, deoarece ferestrele de vizualizare ale dispozitivului nu sunt afectate de dimensiunea tipului.
• Dimensiunea globală a fontului a crescut de la 14pxla 16px.
• Nivelurile de grilă au fost modernizate pentru a adăuga o a cincea opțiune (care se adresează dispozitivelor mai mici de la 576pxși de mai jos) și a eliminat -xsinfixul din acele clase. Exemplu: .col-6.col-sm-4.col-md-3.
• S-a înlocuit tema opțională separată cu opțiuni configurabile prin variabile SCSS (de exemplu, $enable-gradients: true).
• Sistemul de construcție a fost revizuit pentru a utiliza o serie de scripturi npm în loc de Grunt. Consultați package.jsontoate scripturile sau citiți-mi proiectul nostru pentru nevoile de dezvoltare locală.
• Utilizarea care nu răspunde a Bootstrap nu mai este acceptată.
• S-a renunțat la personalizarea online în favoarea unei documentații de configurare mai extinse și a versiunilor personalizate.
• S-au adăugat zeci de noi clase de utilitate pentru perechile comune de proprietate-valoare CSS și comenzi rapide pentru spațierea marjelor/padding.

Sistem grilă

• Mutat în flexbox.
  • S-a adăugat suport pentru flexbox în mixurile de grilă și clasele predefinite.
  • Ca parte a flexbox, a inclus suport pentru clasele de aliniere verticală și orizontală.
• Numele claselor de grilă actualizate și un nou nivel de grilă.
  • A fost adăugat un nou smnivel de grilă mai jos 768pxpentru un control mai granular. Acum avem xs, sm, md, lgși xl. Acest lucru înseamnă, de asemenea, că fiecare nivel a fost crescut cu un nivel (deci .col-md-6în v3 este acum .col-lg-6în v4).
  • xsClasele de grilă au fost modificate pentru a nu necesita infixul pentru a reprezenta mai exact faptul că încep să aplice stiluri la min-width: 0și nu la o valoare setată a pixelului. În loc de .col-xs-6, este acum .col-6. Toate celelalte niveluri de grilă necesită infix (de exemplu, sm).
• Dimensiunile grilei, mixurile și variabilele actualizate.
  • Jgheaburile cu grilă au acum o hartă Sass, astfel încât să puteți specifica lățimi specifice de jgheab la fiecare punct de întrerupere.
  • Mixine de grilă actualizate pentru a utiliza un make-col-readymixin de pregătire și a make-colpentru a seta flexși max-widthpentru dimensionarea individuală a coloanei.
  • S-au modificat punctele de întrerupere a interogării media a sistemului de grilă și lățimile containerului pentru a ține cont de noul nivel de grilă și pentru a se asigura că coloanele sunt divizibile uniform 12la lățimea lor maximă.
  • Punctele de întrerupere a grilei și lățimile containerelor sunt acum gestionate prin hărți Sass ( $grid-breakpointsși $container-max-widths) în loc de câteva variabile separate. Acestea înlocuiesc în @screen-*întregime variabilele și vă permit să personalizați complet nivelurile grilei.
  • Interogările media s-au schimbat și ele. În loc să repetăm ​​declarațiile noastre de interogare media cu aceeași valoare de fiecare dată, acum avem @include media-breakpoint-up/down/only. Acum, în loc să scrieți @media (min-width: @screen-sm-min) { ... }, puteți scrie @include media-breakpoint-up(sm) { ... }.

Componente

• Panouri, miniaturi și godeuri abandonate pentru o nouă componentă atotcuprinzătoare, carduri .
• S-a eliminat fontul pictogramei Glyphicons. Dacă aveți nevoie de pictograme, câteva opțiuni sunt:
  • versiunea din amonte a lui Glyphicons
  • Octicoane
  • Font Awesome
  • Consultați pagina Extindere pentru o listă de alternative. Aveți sugestii suplimentare? Vă rugăm să deschideți o problemă sau PR.
• A renunțat la pluginul Affix jQuery.
  • Vă recomandăm să utilizați position: stickyîn schimb. Consultați intrarea HTML5 Vă rugăm să găsiți detalii și recomandări specifice de completare polivalentă. O sugestie este să folosiți o @supportsregulă pentru implementarea acesteia (de exemplu, @supports (position: sticky) { ... })
  • Dacă utilizați Affix pentru a aplica stiluri suplimentare, non- positionstiluri, este posibil ca polyfills-urile să nu suporte cazul dvs. de utilizare. O opțiune pentru astfel de utilizări este biblioteca ScrollPos-Styler terță parte .
• S -a renunțat la componenta pager, deoarece era în esență butoane ușor personalizate.
• Refactorizat aproape toate componentele pentru a utiliza mai multe selectoare de clasă neimbricate în loc de selectoare copii supraspecifice.

După componentă

Această listă evidențiază modificările cheie în funcție de componentă între v3.xx și v4.0.0.

Reporniți

Nou în Bootstrap 4 este Reboot , o nouă foaie de stil care se bazează pe Normalize cu propriile noastre stiluri de resetare oarecum obișnuite. Selectoarele care apar în acest fișier folosesc doar elemente — aici nu există clase. Acest lucru izolează stilurile noastre de resetare de stilurile noastre componente pentru o abordare mai modulară. Unele dintre cele mai importante resetări pe care aceasta le include sunt box-sizing: border-boxschimbarea, trecerea de la emla remunități pe multe elemente, stiluri de link și multe resetări ale elementelor de formular.

Tipografie

• Au mutat toate .text-utilitatile în _utilities.scssfișier.
• S-a abandonat .page-headerdeoarece stilurile sale pot fi aplicate prin utilități.
• .dl-horizontala fost abandonat. În schimb, utilizați și folosiți clase .rowde <dl>coloană grilă (sau mixine) pe ei <dt>și <dd>copii.
• Citate bloc reproiectate, mutându-și stilurile de la <blockquote>element la o singură clasă, .blockquote. S-a eliminat .blockquote-reversemodificatorul pentru utilitarele de text.
• .list-inlineacum necesită ca elementele sale din lista copiilor să aibă noua .list-inline-itemclasă aplicată.

Imagini

• Redenumită .img-responsiveîn .img-fluid.
• Redenumită .img-roundedîn.rounded
• Redenumită .img-circleîn.rounded-circle

Mese

• Aproape toate instanțele >selectorului au fost eliminate, ceea ce înseamnă că tabelele imbricate vor moșteni automat stiluri de la părinții lor. Acest lucru simplifică foarte mult selectorii și potențialele personalizări.
• Redenumită .table-condensedîn .table-smpentru consecvență.
• S-a adăugat o nouă .table-inverseopțiune.
• S- au adăugat modificatori pentru antetul tabelului: .thead-defaultși .thead-inverse.
• Clasele contextuale au fost redenumite pentru a avea un .table--prefix. Prin urmare .active, .success, .warning, .dangerși .infocătre .table-active, .table-success, .table-warning, .table-dangerși .table-info.

Forme

• Elementul mutat se resetează în _reboot.scssfișier.
• Redenumită .control-labelîn .col-form-label.
• Redenumită .input-lgși .input-smla .form-control-lgși .form-control-sm, respectiv.
• Am renunțat .form-group-*la cursuri de dragul simplității. Folosiți .form-control-*în schimb cursurile acum.
• A scăpat .help-blockși l-a înlocuit cu .form-texttext de ajutor la nivel de bloc. Pentru textul de ajutor inline și alte opțiuni flexibile, utilizați clase de utilitate precum .text-muted.
• Scăpat .radio-inlineși .checkbox-inline.
• Consolidat .checkboxși .radioîn .form-checkși diferitele .form-check-*clase.
• Forme orizontale revizuite:
  • S-a renunțat la .form-horizontalcerința de clasă.
  • .form-groupnu mai aplică stiluri din .rowmixin-ul via, așa că .roweste acum necesar pentru aspectul grilă orizontală (de exemplu, <div class="form-group row">).
  • S-a adăugat o nouă .col-form-labelclasă pentru a centra vertical etichetele cu .form-controls.
  • S-au adăugat noi .form-rowforme de formulare compacte cu clasele grilă (schimbați-vă .rowcu a .form-rowși mergeți).
• S-a adăugat suport pentru formulare personalizate (pentru casete de selectare, radiouri, selecții și intrări de fișiere).
• .has-errorClasele , .has-warning, și au fost înlocuite .has-successcu validarea formularelor HTML5 prin CSS :invalidși :validpseudo-clase.
• Redenumită .form-control-staticîn .form-control-plaintext.

Butoane

• Redenumită .btn-defaultîn .btn-secondary.
• S-a renunțat la .btn-xsclasa în întregime, deoarece .btn-smeste proporțional mult mai mică decât v3.
• Funcția de buton cu stare a button.jspluginului jQuery a fost abandonată. Aceasta include $().button(string)și $().button('reset')metodele. Vă sfătuim să utilizați un pic de JavaScript personalizat, care va avea avantajul de a se comporta exact așa cum doriți.
  • Rețineți că celelalte caracteristici ale pluginului (casete de selectare a butoanelor, butoane radio, butoane cu comutare unică) au fost păstrate în v4.
• Schimbați butoanele [disabled]pentru :disabledca IE9+ acceptă :disabled. Cu toate acestea fieldset[disabled], este încă necesar deoarece seturile de câmpuri native dezactivate sunt încă greșite în IE11 .

Grup de butoane

• Componenta rescrisă cu flexbox.
• Eliminat .btn-group-justified. Ca înlocuitor, puteți folosi <div class="btn-group d-flex" role="group"></div>ca înveliș în jurul elementelor cu .w-100.
• S-a renunțat la .btn-group-xsclasa în întregime având în vedere eliminarea .btn-xs.
• S-a eliminat spațierea explicită între grupurile de butoane din barele de instrumente pentru butoane; utilizați acum utilitățile de marjă.
• Documentație îmbunătățită pentru utilizarea cu alte componente.

Mențiuni derulante

• Trecerea de la selectorii părinte la clasele singulare pentru toate componentele, modificatorii etc.
• Stiluri de meniuri derulante simplificate pentru a nu mai fi livrate cu săgețile orientate în sus sau în jos atașate la meniul drop-down.
• Dropdown-urile pot fi create cu <div>s sau <ul>s acum.
• Stiluri și marcaje derulante reconstruite pentru a oferi suport ușor, încorporat <a>și <button>bazat pe elementele derulante.
• Redenumită .dividerîn .dropdown-divider.
• Elementele drop-down necesită acum .dropdown-item.
• Comutarile drop-down nu mai necesită un <span class="caret"></span>; acest lucru este acum furnizat automat prin CSS ::afterpe .dropdown-toggle.

Sistem grilă

• S-a adăugat un nou 576pxpunct de întrerupere a rețelei ca sm, ceea ce înseamnă că acum există cinci niveluri totale ( xs, sm, md, lgși xl).
• Au fost redenumite clasele modificatoare de grilă receptive de la .col-{breakpoint}-{modifier}-{size}la .{modifier}-{breakpoint}-{size}pentru clase de grilă mai simple.
• S-au renunțat la clasele modificatoare push și pull pentru noile clase bazate pe flexbox order. De exemplu, în loc de .col-8.push-4și .col-4.pull-8, ați folosi .col-8.order-2și .col-4.order-1.
• S-au adăugat clase de utilitate flexbox pentru sistemul de rețea și componente.

Listează grupuri

• Componenta rescrisă cu flexbox.
• Înlocuit a.list-group-itemcu o clasă explicită, .list-group-item-action, pentru stilul versiunilor de linkuri și butoane ale elementelor grupului de listă.
• Clasă adăugată .list-group-flushpentru utilizare cu carduri.

Modal

• Componenta rescrisă cu flexbox.
• Având în vedere trecerea la flexbox, alinierea pictogramelor de respingere din antet este probabil întreruptă, deoarece nu mai folosim elemente flotante. Conținutul flotant este pe primul loc, dar cu flexbox nu mai este cazul. Actualizați pictogramele de respingere pentru a veni după titlurile modale pentru a remedia.
• Opțiunea remote(care ar putea fi folosită pentru a încărca și injecta automat conținut extern într-un modal) și loaded.bs.modalevenimentul corespunzător au fost eliminate. Vă recomandăm, în schimb, să utilizați un șablon la nivel de client sau un cadru de legare a datelor sau să apelați singur jQuery.load .

Navs

• Componenta rescrisă cu flexbox.
• S- au eliminat aproape toate >selectoarele pentru o stilizare mai simplă prin clase neimbricate.
• În loc de selectoare specifice HTML, cum ar fi .nav > li > a, folosim clase separate pentru .navs, .nav-items și .nav-links. Acest lucru face ca HTML-ul dvs. să fie mai flexibil, aducând în același timp o extensibilitate crescută.

Bara de navigare

Bara de navigare a fost rescrisă în întregime în flexbox, cu suport îmbunătățit pentru aliniere, capacitate de răspuns și personalizare.

• Comportamentele navbar receptive sunt acum aplicate .navbarclasei prin intermediul necesarului .navbar-expand-{breakpoint} , unde alegeți unde să restrângeți bara de navigare. Anterior, aceasta a fost o modificare mai puțin variabilă și necesita recompilare.
• .navbar-defaulteste acum .navbar-light, deși .navbar-darkrămâne același. Unul dintre acestea este necesar pe fiecare bară de navigare. Cu toate acestea, aceste clase nu mai stabilesc background-colors; în schimb ele afectează în esenţă doar color.
• Barele de navigare necesită acum o declarație de fundal de vreun fel. Alegeți dintre utilitățile noastre de fundal ( .bg-*) sau setați-vă pe propria dvs. cu clasele light/inverse de mai sus pentru personalizare nebună .
• Având în vedere stilurile flexbox, barele de navigare pot folosi acum utilitare flexbox pentru opțiuni de aliniere ușoare.
• .navbar-toggleeste acum .navbar-togglerși are stiluri diferite și marcaj interior (nu mai mult de trei <span>s).
• A renunțat la .navbar-formclasa complet. Nu mai este necesar; în schimb, utilizați .form-inlineși aplicați utilitățile de marjă după cum este necesar.
• Barele de navigare nu mai includ margin-bottomsau nu mai includ border-radiusimplicit. Utilizați utilitățile după cum este necesar.
• Toate exemplele care prezintă bare de navigare au fost actualizate pentru a include un nou marcaj.

Paginare

• Componenta rescrisă cu flexbox.
• Clasele explicite ( .page-item, .page-link) sunt acum necesare pentru descendenții .paginations
• S -a renunțat .pagercomplet la componentă, deoarece era puțin mai mult decât butoane de contur personalizate.

Firimituri de pâine

• O clasă explicită, .breadcrumb-item, este acum necesară pentru descendenții lui .breadcrumbs

Etichete și insigne

• Consolidat .labelși .badgesă dezambiguizeze <label>elementul și să simplifice componentele aferente.
• Adăugat .badge-pillca modificator pentru aspectul „pastilă” rotunjit.
• Insignele nu mai sunt flotate automat în grupurile de liste și alte componente. Clasele de utilitate sunt acum necesare pentru asta.
• .badge-defaulta fost abandonat și .badge-secondaryadăugat pentru a potrivi clasele modificatoare de componente folosite în altă parte.

Panouri, miniaturi și puțuri

S-a abandonat în întregime pentru noua componentă a cardului.

Panouri

• .panella .card, acum construit cu flexbox.
• .panel-defaultîndepărtat și fără înlocuire.
• .panel-groupîndepărtat și fără înlocuire. .card-groupnu este un înlocuitor, este diferit.
• .panel-headingla.card-header
• .panel-titlela .card-title. În funcție de aspectul dorit, este posibil să doriți să utilizați și elemente de antet sau clase (de exemplu <h3>, .h3) sau elemente sau clase aldine (de exemplu <strong>, <b>, .font-weight-bold). Rețineți că .card-title, deși este numit similar, produce un aspect diferit de .panel-title.
• .panel-bodyla.card-body
• .panel-footerla.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, și .panel-dangerau fost abandonate pentru .bg-, .text-, și .borderutilitățile generate din $theme-colorsharta noastră Sass.

Progres

• .progress-bar-*S-au înlocuit clasele contextuale cu .bg-*utilitare. De exemplu, class="progress-bar progress-bar-danger"devine class="progress-bar bg-danger".
• Înlocuit .activepentru barele de progres animate cu .progress-bar-animated.

Carusel

• S-a revizuit întreaga componentă pentru a simplifica designul și stilul. Avem mai puține stiluri pe care să le înlocuiți, indicatori noi și pictograme noi.
• Toate CSS au fost neimbricate și redenumite, asigurându-se că fiecare clasă are prefixul .carousel-.
  • Pentru articolele carusel, .next, .prev, .left, și .rightsunt acum .carousel-item-next, .carousel-item-prev, .carousel-item-left, și .carousel-item-right.
  • .itemeste si acum .carousel-item.
  • Pentru controalele prev/next .carousel-control.rightși .carousel-control.leftsunt acum .carousel-control-nextși .carousel-control-prev, ceea ce înseamnă că nu mai necesită o anumită clasă de bază.
• S-au eliminat toate stilurile receptive, amânarea la utilitare (de exemplu, afișarea subtitrărilor în anumite ferestre de vizualizare) și a stilurilor personalizate după cum este necesar.
• S-au eliminat suprascrierile de imagine pentru imaginile din elementele carusel, amânând utilități.
• Am ajustat exemplul Carusel pentru a include noile marcaje și stiluri.

Mese

• S-a eliminat suportul pentru tabele imbricate cu stil. Toate stilurile de tabel sunt acum moștenite în v4 pentru selectoare mai simple.
• S-a adăugat varianta de tabel invers.

Utilități

• Afișare, ascuns și multe altele:
  • A făcut ca utilitățile de afișare să răspundă (de ex. .d-noneși d-{sm,md,lg,xl}-none).
  • S-a renunțat la cea mai mare parte a .hidden-*utilităților pentru noile utilități de afișare . De exemplu, în loc de .hidden-sm-up, utilizați .d-sm-none. Redenumirea .hidden-printutilitarelor pentru a utiliza schema de denumire a utilitarului de afișare. Mai multe informații în secțiunea Utilități responsive a acestei pagini.
  • Au fost adăugate .float-{sm,md,lg,xl}-{left,right,none}clase pentru floats responsive și eliminate .pull-leftși .pull-rightdeoarece sunt redundante la .float-leftși .float-right.
• Tip:
  • S-au adăugat variații receptive la clasele noastre de aliniere a textului .text-{sm,md,lg,xl}-{left,center,right}.
• Alinierea și spațierea:
  • S-au adăugat noi utilități de marjă de răspuns și umplutură pentru toate părțile, plus scurtături verticale și orizontale.
  • Adăugat încărcătură de utilități flexbox .
  • Renunțat .center-blockla noua .mx-autoclasă.
• Clearfix a fost actualizat pentru a elimina suportul pentru versiunile mai vechi de browser.

Mixine de prefix de furnizor

Mixinele de prefixe ale furnizorului Bootstrap 3 , care au fost depreciate în v3.2.0, au fost eliminate în Bootstrap 4. Deoarece folosim Autoprefixer , acestea nu mai sunt necesare.

Au fost eliminate următoarele mixuri : 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

Documentație

Documentația noastră a primit, de asemenea, un upgrade general. Iată partea de jos:

• Încă folosim Jekyll, dar avem pluginuri în combinație:
  • bugify.rbeste folosit pentru a lista eficient intrările de pe pagina noastră de erori ale browserului .
  • example.rbeste o furcă personalizată a highlight.rbpluginului implicit, permițând o gestionare mai ușoară a codului de exemplu.
  • callout.rbeste o furcă personalizată similară, dar concepută pentru înștiințările noastre speciale pentru documente.
  • jekyll-toc este folosit pentru a genera cuprinsul nostru.
• Tot conținutul documentelor a fost rescris în Markdown (în loc de HTML) pentru o editare mai ușoară.
• Paginile au fost reorganizate pentru un conținut mai simplu și o ierarhie mai accesibilă.
• Am trecut de la CSS obișnuit la SCSS pentru a profita din plin de variabilele, mixurile și multe altele din Bootstrap.

Utilități receptive

Toate @screen-variabilele au fost eliminate în v4.0.0. Folosiți în schimb mixurile media-breakpoint-up(), media-breakpoint-down(), sau media-breakpoint-only()Sass sau $grid-breakpointsharta Sass.

Clasele noastre de utilități receptive au fost în mare parte eliminate în favoarea displayutilităților explicite.

• Clasele .hiddenși .showau fost eliminate deoarece au intrat în conflict cu metodele $(...).hide()și jQuery. $(...).show()În schimb, încercați să comutați [hidden]atributul sau folosiți stiluri inline precum style="display: none;"și style="display: block;".
• Toate .hidden-clasele au fost eliminate, cu excepția utilitarelor de imprimare care au fost redenumite.
  • Eliminat din 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
  • Eliminat din versiunea alpha v4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Utilitarele de imprimare nu mai încep cu .hidden-sau .visible-, ci cu .d-print-.
  • Nume vechi: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Clase noi: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

În loc să utilizați clase explicite .visible-*, faceți un element vizibil pur și simplu nu îl ascundeți la acea dimensiune a ecranului. Puteți combina o .d-*-noneclasă cu o .d-*-blockclasă pentru a afișa un element numai pe un interval dat de dimensiuni de ecran (de exemplu .d-none.d-md-block.d-xl-none, arată elementul doar pe dispozitive medii și mari).

Rețineți că modificările la punctele de întrerupere ale grilei în v4 înseamnă că va trebui să măriți cu un punct de întrerupere pentru a obține aceleași rezultate. Noile clase de utilitate responsive nu încearcă să găzduiască cazuri mai puțin obișnuite în care vizibilitatea unui element nu poate fi exprimată ca o singură gamă contigua de dimensiuni ale ferestrei de vizualizare; în schimb, va trebui să utilizați CSS personalizat în astfel de cazuri.