S'està migrant a la v4

Bootstrap 4 és una reescriptura important de tot el projecte. Els canvis més notables es resumeixen a continuació, seguits de canvis més específics als components rellevants.

Canvis estables

Passant de la Beta 3 a la nostra versió estable v4.0, no hi ha canvis de ruptura, però hi ha alguns canvis notables.

Impressió

• S'han corregit les utilitats d'impressió trencades. Anteriorment, l'ús d'una .d-print-*classe anul·laria inesperadament qualsevol altra .d-*classe. Ara, coincideixen amb les nostres altres utilitats de visualització i només s'apliquen a aquest mitjà ( @media print).

• Les utilitats de visualització d'impressió disponibles ampliades perquè coincideixin amb altres utilitats. La versió beta 3 i més antiga només tenia block, inline-block, inlinei none. Stable v4 afegit flex, inline-flex, table, table-rowi table-cell.

• S'ha corregit la visualització prèvia d'impressió als navegadors amb nous estils d'impressió que especifiquen @page size.

Canvis de la beta 3

Tot i que la Beta 2 va veure la major part dels nostres canvis de ruptura durant la fase beta, però encara en tenim alguns que calia resoldre a la versió Beta 3. Aquests canvis s'apliquen si actualitzeu a la Beta 3 des de la Beta 2 o qualsevol versió anterior de Bootstrap.

Divers

• S'ha eliminat la $thumbnail-transitionvariable no utilitzada. No estàvem fent la transició de res, així que només era un codi addicional.
• El paquet npm ja no inclou cap fitxer que no sigui els nostres fitxers font i dist; si confiàveu en ells i esteu executant els nostres scripts mitjançant la node_modulescarpeta, hauríeu d'adaptar el vostre flux de treball.

Formes

• Reescriu les caselles de selecció i les ràdios personalitzades i predeterminades. Ara, tots dos tenen una estructura HTML coincident (exterior <div>amb germà <input>i <label>) i els mateixos estils de disseny (apilat per defecte, en línia amb la classe modificadora). Això ens permet dissenyar l'etiqueta en funció de l'estat de l'entrada, simplificant el suport per a l' disabledatribut (abans requeria una classe pare) i donant millor suport a la nostra validació del formulari.

  Com a part d'això, hem canviat el CSS per gestionar diversos background-images en caselles de verificació i ràdios de formularis personalitzats. Anteriorment, l' .custom-control-indicatorelement ara eliminat tenia el color de fons, el degradat i la icona SVG. Personalitzar el degradat de fons significava substituir-los tots cada vegada que només calia canviar-ne un. Ara, tenim .custom-control-label::beforeper al farciment i el degradat i .custom-control-label::aftermaneja la icona.

  Per fer una comprovació personalitzada en línia, afegiu .custom-control-inline.

• Selector actualitzat per als grups de botons basats en l'entrada. En lloc de [data-toggle="buttons"] { }per a l'estil i el comportament, utilitzem l' dataatribut només per als comportaments JS i confiem en una nova .btn-group-toggleclasse per a l'estil.

• Eliminat .col-form-legenda favor d'un lleugerament millorat .col-form-label. D'aquesta manera .col-form-label-smi .col-form-label-lges pot utilitzar en <legend>elements amb facilitat.

• Les entrades de fitxers personalitzades van rebre un canvi a la seva $custom-file-textvariable Sass. Ja no és un mapa Sass imbricat i ara només alimenta una cadena: el Browsebotó, ja que ara és l'únic pseudoelement generat a partir del nostre Sass. El Choose filetext ara prové del .custom-file-label.

Grups d'entrada

• Els complements del grup d'entrada són ara específics per a la seva ubicació en relació a una entrada. Hem baixat .input-group-addoni .input-group-btnper dues classes noves, .input-group-prependi .input-group-append. Ara heu d'utilitzar explícitament un adjunt o un antecedent, simplificant gran part del nostre CSS. Dins d'un adjunt o antecedent, col·loqueu els vostres botons tal com existirien en qualsevol altre lloc, però embolcalleu el text amb .input-group-text.

• Ara s'admeten els estils de validació, així com diverses entrades (tot i que només podeu validar una entrada per grup).

• Les classes de mida han d'estar al pare .input-groupi no als elements del formulari individuals.

Canvis de la beta 2

Durant la versió beta, pretenem que no hi hagi canvis de ruptura. Tanmateix, les coses no sempre surten com estava previst. A continuació es mostren els canvis més importants que cal tenir en compte quan passeu de la Beta 1 a la Beta 2.

Trencament

• S'ha eliminat $badge-colorla variable i el seu ús a .badge. Utilitzem una funció de contrast de color per triar un colorbasat en el background-color, de manera que la variable no és necessària.
• S'ha canviat el nom grayscale()de la funció a gray()per evitar trencar el conflicte amb el grayscalefiltre natiu CSS.
• S'ha canviat el nom .table-inversede .thead-inverse, i .thead-defaulta .*-darki .*-light, fent coincidir els nostres esquemes de colors utilitzats en altres llocs.
• Les taules responsives ara generen classes per a cada punt d'interrupció de la graella. Això trenca amb la beta 1 perquè el .table-responsiveque heu estat utilitzant és més semblant a .table-responsive-md. Ara podeu utilitzar .table-responsiveo .table-responsive-{sm,md,lg,xl}segons sigui necessari.
• S'ha eliminat el suport de Bower ja que el gestor de paquets ha quedat obsolet per a alternatives (per exemple, Yarn o npm). Vegeu bower/bower#2298 per a més detalls.
• Bootstrap encara requereix jQuery 1.9.1 o superior, però se us recomana que utilitzeu la versió 3.x ja que els navegadors compatibles amb v3.x són els que admet Bootstrap i v3.x té algunes solucions de seguretat.
• S'ha eliminat la .form-control-labelclasse no utilitzada. Si heu fet ús d'aquesta classe, era un duplicat de la .col-form-labelclasse que centrava verticalment a <label>amb la seva entrada associada en dissenys de formulari horitzontal.
• S'ha canviat color-yiqd'un mixin que incloïa la colorpropietat a una funció que retorna un valor, cosa que us permet utilitzar-lo per a qualsevol propietat CSS. Per exemple, en comptes de color-yiq(#000), escriuries color: color-yiq(#000);.

Destacats

• S'ha introduït un nou pointer-eventsús en modalitats. L'exterior .modal-dialogpassa per esdeveniments amb pointer-events: noneper al maneig de clics personalitzat (permet només escoltar-lo .modal-backdropper qualsevol clic) i després ho contraresta per al real .modal-contentamb pointer-events: auto.

Resum

Aquests són els articles de bitllet importants dels quals voldreu tenir en compte quan passeu de la v3 a la v4.

Suport del navegador

• S'ha eliminat el suport IE8, IE9 i iOS 6. v4 ara només és IE10+ i iOS 7+. Per als llocs que necessiten qualsevol d'aquests, utilitzeu la v3.
• S'ha afegit suport oficial per al navegador i WebView d'Android v5.0 Lollipop. Les versions anteriors del navegador d'Android i WebView només són compatibles de manera no oficial.

Canvis globals

• Flexbox està activat per defecte. En general, això significa un allunyament dels flotadors i més entre els nostres components.
• S'ha canviat de Less a Sass per als nostres fitxers CSS d'origen.
• S'ha canviat de pxa remla nostra unitat CSS principal, tot i que els píxels encara s'utilitzen per a consultes multimèdia i per al comportament de la quadrícula, ja que les finestres visuals dels dispositius no es veuen afectades per la mida del tipus.
• La mida global del tipus de lletra ha augmentat de 14pxa 16px.
• S'han renovat els nivells de quadrícula per afegir una cinquena opció (s'adreça a dispositius més petits a la part 576pxinferior i inferior) i s'ha eliminat l' -xsinfix d'aquestes classes. Exemple: .col-6.col-sm-4.col-md-3.
• S'ha substituït el tema opcional separat per opcions configurables mitjançant variables SCSS (per exemple, $enable-gradients: true).
• Sistema de compilació revisat per utilitzar una sèrie d'scripts npm en lloc de Grunt. Consulteu package.jsontots els scripts o el nostre projecte readme per a les necessitats de desenvolupament local.
• Ja no s'admet l'ús de Bootstrap que no respon.
• S'ha eliminat el personalitzador en línia a favor d'una documentació de configuració més extensa i de les compilacions personalitzades.
• S'han afegit desenes de noves classes d'utilitat per a parells de propietat-valor CSS comuns i dreceres d'espaiat entre marges i farcits.

Sistema de graella

• S'ha mogut a flexbox.
  • S'ha afegit suport per a flexbox en els mixins de graella i classes predefinides.
  • Com a part de flexbox, inclou suport per a classes d'alineació vertical i horitzontal.
• S'han actualitzat els noms de les classes de quadrícula i un nou nivell de quadrícula.
  • S'ha afegit un nou smnivell de quadrícula a continuació 768pxper obtenir un control més granular. Ara tenim xs, sm, md, lgi xl. Això també significa que cada nivell s'ha augmentat un nivell (per tant, .col-md-6a la v3 ara és .col-lg-6a la v4).
  • xsLes classes de quadrícula s'han modificat per no requerir que l'infix representi amb més precisió que comencen a aplicar estils min-width: 0i no un valor de píxel establert. En lloc de .col-xs-6, és ara .col-6. Tots els altres nivells de quadrícula requereixen l'infix (per exemple, sm).
• Mides de quadrícula, mixins i variables actualitzades.
  • Els canals de quadrícula ara tenen un mapa Sass perquè pugueu especificar amplades específiques de canalons a cada punt d'interrupció.
  • Mixins de graella actualitzats per utilitzar un make-col-readymixin de preparació i un make-colper configurar flexi max-widthper a la mida de la columna individual.
  • S'han canviat els punts d'interrupció de la consulta de mitjans del sistema de quadrícula i l'amplada dels contenidors per tenir en compte el nou nivell de quadrícula i garantir que les columnes siguin divisibles uniformement per 12l'amplada màxima.
  • Els punts d'interrupció de la quadrícula i les amplades dels contenidors ara es gestionen mitjançant mapes Sass ( $grid-breakpointsi $container-max-widths) en lloc d'un grapat de variables separades. Aquestes substitueixen les @screen-*variables completament i us permeten personalitzar completament els nivells de la graella.
  • Les consultes dels mitjans també han canviat. En lloc de repetir les nostres declaracions de consulta de mitjans amb el mateix valor cada vegada, ara tenim @include media-breakpoint-up/down/only. Ara, en lloc d'escriure @media (min-width: @screen-sm-min) { ... }, pots escriure @include media-breakpoint-up(sm) { ... }.

Components

• S'han deixat caure panells, miniatures i pous per a un nou component global, les targetes .
• S'ha deixat caure el tipus de lletra de la icona Glyphicons. Si necessiteu icones, algunes opcions són:
  • la versió amunt de Glyphicons
  • Octicons
  • Font Genial
  • Consulteu la pàgina Ampliar per obtenir una llista d'alternatives. Teniu suggeriments addicionals? Obriu un problema o PR.
• S'ha deixat caure el connector Affix jQuery.
  • Recomanem utilitzar -lo en el position: stickyseu lloc. Consulteu l'entrada HTML5 per obtenir més informació i recomanacions específiques d'emplenament polivalent. Un suggeriment és utilitzar una @supportsregla per implementar-la (per exemple, @supports (position: sticky) { ... })/
  • Si utilitzeu Affix per aplicar estils addicionals positionque no siguin estils, és possible que els polyfills no admetin el vostre cas d'ús. Una opció per a aquests usos és la biblioteca ScrollPos-Styler de tercers .
• S'ha deixat caure el component del cercapersones, ja que es tractava bàsicament de botons lleugerament personalitzats.
• S'han refactoritzat gairebé tots els components per utilitzar més selectors de classe no imbricats en lloc de selectors secundaris massa específics.

Per component

Aquesta llista destaca els canvis clau per component entre v3.xx i v4.0.0.

Reinicieu

El nou a Bootstrap 4 és Reboot , un nou full d'estil que es basa en Normalize amb els nostres propis estils de restabliment una mica opiniosos. Els selectors que apareixen en aquest fitxer només utilitzen elements; aquí no hi ha classes. Això aïlla els nostres estils de restabliment dels nostres estils de components per a un enfocament més modular. Alguns dels restabliments més importants que inclou són el box-sizing: border-boxcanvi, passar de emunitats rema molts elements, estils d'enllaç i molts restabliments d'elements de formulari.

Tipografia

• S'han mogut totes les .text-utilitats al _utilities.scssfitxer.
• Abandonat .page-headerja que, a part de la vora, tots els seus estils es poden aplicar mitjançant utilitats.
• .dl-horizontals'ha deixat caure. .rowEn comptes d' això, utilitzeu <dl>i feu servir classes de columnes de graella (o mixins) a les seves classes <dt>i <dd>als fills.
• L'estil personalitzat <blockquote>s'ha mogut a les classes .blockquotei al .blockquote-reversemodificador.
• .list-inlineara requereix que els elements de la llista secundaria tinguin .list-inline-itemaplicada la nova classe.

Imatges

• S'ha canviat de nom .img-responsivea .img-fluid.
• S'ha canviat de nom .img-roundeda.rounded
• S'ha canviat de nom .img-circlea.rounded-circle

Taules

• Gairebé totes les instàncies del >selector s'han eliminat, és a dir, les taules imbricades ara heretaran automàticament els estils dels seus pares. Això simplifica molt els nostres selectors i les personalitzacions potencials.
• Les taules responsives ja no requereixen un element d'embolcall. En lloc d'això, només cal que col·loqueu la .table-responsivedreta a <table>.
• S'ha canviat el nom .table-condenseda .table-smper coherència.
• S'ha afegit una nova .table-inverseopció.
• S'han afegit modificadors de capçalera de taula: .thead-defaulti .thead-inverse.
• S'han canviat el nom de les classes contextuals perquè tinguin un .table--prefix. Per tant .active, .success, .warning, .dangeri .infoa .table-active, .table-success, .table-warning, .table-dangeri .table-info.

Formes

• L'element mogut es restableix al _reboot.scssfitxer.
• S'ha canviat de nom .control-labela .col-form-label.
• S'ha canviat de nom .input-lgi .input-sma .form-control-lgi .form-control-sm, respectivament.
• Classes abandonades .form-group-*per simplicitat. Feu servir .form-control-*les classes ara.
• El va deixar caure .help-blocki el va substituir .form-textper text d'ajuda a nivell de bloc. Per al text d'ajuda en línia i altres opcions flexibles, utilitzeu classes d'utilitat com .text-muted.
• Caigut .radio-inlinei .checkbox-inline.
• Consolidat .checkboxi .radioen .form-checkles diferents .form-check-*classes.
• Formes horitzontals revisades:
  • S'ha eliminat el .form-horizontalrequisit de classe.
  • .form-groupja no s'aplica estils del .rowvia mixin, per la qual .rowcosa ara és necessari per a dissenys de quadrícula horitzontal (p. ex., <div class="form-group row">).
  • S'ha afegit una nova .col-form-labelclasse per centrar verticalment les etiquetes amb .form-controls.
  • S'ha afegit una novetat .form-rowper a dissenys de formularis compactes amb les classes de quadrícula (canvia el teu .rowper a .form-rowi segueix).
• S'ha afegit suport de formularis personalitzats (per a caselles de selecció, ràdios, seleccions i entrades de fitxers).
• S'han substituït les classes .has-error, .has-warning, i .has-successamb la validació de formularis HTML5 mitjançant CSS :invalidi :validpseudoclasses.
• S'ha canviat de nom .form-control-statica .form-control-plaintext.

Botons

• S'ha canviat de nom .btn-defaulta .btn-secondary.
• Va deixar la .btn-xsclasse completament, ja que .btn-smés proporcionalment molt més petita que la v3.
• S'ha eliminat la funció de botóbutton.js amb estat del connector jQuery. Això inclou els mètodes $().button(string)i . $().button('reset')Aconsellem utilitzar una mica de JavaScript personalitzat, que tindrà l'avantatge de comportar-se exactament com voleu.
  • Tingueu en compte que les altres funcions del connector (caselles de selecció de botons, ràdios de botons, botons d'activació única) s'han conservat a la v4.
• Canvia els botons [disabled]a :disabledcom IE9+ admet :disabled. Tanmateix fieldset[disabled], encara és necessari perquè els conjunts de camps desactivats natius encara tenen errors a IE11 .

Grup de botons

• Reescriure el component amb flexbox.
• Eliminat .btn-group-justified. Com a reemplaçament, podeu utilitzar <div class="btn-group d-flex" role="group"></div>com a embolcall al voltant d'elements amb .w-100.
• S'ha abandonat la .btn-group-xsclasse completament donada l'eliminació de .btn-xs.
• S'ha eliminat l'espaiat explícit entre els grups de botons a les barres d'eines de botons; Utilitzeu ara les utilitats de marge.
• Documentació millorada per utilitzar-la amb altres components.

Desplegables

• S'han canviat de selectors pares a classes singulars per a tots els components, modificadors, etc.
• Estils desplegables simplificats perquè ja no s'enviïn amb fletxes cap amunt o cap avall adjuntes al menú desplegable.
• Els desplegables es poden crear amb <div>s o <ul>s ara.
• S'han reconstruït els estils desplegables i el marcatge per oferir un suport fàcil i integrat per als <a>elements <button>desplegables basats.
• S'ha canviat de nom .dividera .dropdown-divider.
• Els elements desplegables ara requereixen .dropdown-item.
• Els canvis desplegables ja no requereixen un <span class="caret"></span>; això ara es proporciona automàticament mitjançant CSS ::aftera .dropdown-toggle.

Sistema de graella

• S'ha afegit un 576pxpunt d'interrupció de la graella nou com a sm, el que significa que ara hi ha cinc nivells totals ( xs, sm, md, lgi xl).
• S'han canviat el nom de les classes modificadores de quadrícula sensibles de .col-{breakpoint}-{modifier}-{size}a .{modifier}-{breakpoint}-{size}per a classes de quadrícula més senzilles.
• S'han eliminat les classes modificadores push i pull per a les noves classes alimentades amb flexbox order. Per exemple, en comptes de .col-8.push-4i .col-4.pull-8, utilitzaríeu .col-8.order-2i .col-4.order-1.
• S'han afegit classes d'utilitat flexbox per al sistema de xarxa i components.

Llista de grups

• Reescriure el component amb flexbox.
• Substituït a.list-group-itemper una classe explícita, .list-group-item-action, per a les versions d'enllaços i botons d'estil dels elements del grup de llista.
• S'ha afegit .list-group-flushuna classe per utilitzar-la amb targetes.

Modal

• Reescriure el component amb flexbox.
• Si es passa a flexbox, és probable que l'alineació de les icones d'oscar a la capçalera estigui trencada, ja que ja no utilitzem flotants. El contingut flotat és el primer, però amb flexbox això ja no és així. Actualitzeu les vostres icones d'omissió per corregir-les després dels títols modals.
• L' remoteopció (que es podria utilitzar per carregar i injectar automàticament contingut extern en un modal) i l' loaded.bs.modalesdeveniment corresponent es van eliminar. En lloc d'això, recomanem que utilitzeu una plantilla del costat del client o un marc d'enllaç de dades, o que truqueu vosaltres mateixos a jQuery.load .

Navs

• Reescriure el component amb flexbox.
• S'han eliminat gairebé tots els >selectors per a un estil més senzill mitjançant classes no imbricades.
• En lloc de selectors específics d'HTML com .nav > li > a, fem servir classes separades per a .navs, .nav-items i .nav-links. Això fa que el vostre HTML sigui més flexible alhora que augmenta l'extensibilitat.

Barra de navegació

La barra de navegació s'ha reescrit completament a flexbox amb un suport millorat per a l'alineació, la capacitat de resposta i la personalització.

• Els comportaments de la barra de navegació responsives ara s'apliquen a la .navbarclasse mitjançant el requisit .navbar-expand-{breakpoint} , on trieu on col·lapsar la barra de navegació. Anteriorment es tractava d'una modificació menys variable i requeria una recompilació.
• .navbar-defaultés ara .navbar-light, encara que .navbar-darksegueix sent el mateix. Un d'aquests és necessari a cada barra de navegació. Tanmateix, aquestes classes ja no estableixen background-colors; en canvi, essencialment només afecten color.
• Ara les barres de navegació requereixen una declaració de fons d'algun tipus. Trieu entre les nostres utilitats de fons ( .bg-*) o configureu la vostra amb les classes lleugeres/inverses anteriors per a una personalització boja .
• Donats els estils de flexbox, les barres de navegació ara poden utilitzar les utilitats flexbox per a opcions d'alineació fàcils.
• .navbar-toggleés ara .navbar-toggleri té diferents estils i marcatge intern (no més tres <span>s).
• Va deixar la .navbar-formclasse completament. Ja no cal; en comptes d'això, només cal que utilitzeu .form-inlinei apliqueu les utilitats de marge segons sigui necessari.
• Les barres de navegació ja no inclouen margin-bottomo border-radiusde manera predeterminada. Utilitzeu les utilitats segons sigui necessari.
• Tots els exemples que inclouen barres de navegació s'han actualitzat per incloure un marcatge nou.

Paginació

• Reescriure el component amb flexbox.
• Ara es requereixen classes explícites ( .page-item, .page-link) als descendents de .paginations
• Es va deixar caure el .pagercomponent completament, ja que era poc més que botons de contorn personalitzats.

Pa ratllat

• Ara es requereix una classe explícita, .breadcrumb-item, als descendents del .breadcrumbs

Etiquetes i distintius

• S'ha canviat el nom .labela .badgeper desambiguar l' <label>element.
• Va deixar caure el .badgecomponent perquè era gairebé idèntic a les etiquetes. Utilitzeu el .badge-pillmodificador juntament amb el component de l'etiqueta per a aquest aspecte arrodonit.
• Les insígnies ja no surten automàticament als grups de llistes i altres components. Ara es requereixen classes d'utilitat per a això.
• .badge-defaults'ha eliminat i .badge-secondaryafegit per fer coincidir les classes de modificadors de components utilitzades en altres llocs.

Panells, miniatures i pous

S'ha eliminat completament per al nou component de la targeta.

Panells

• .panela .card, ara construït amb flexbox.
• .panel-defaultretirat i sense substitució.
• .panel-groupretirat i sense substitució. .card-groupno és un substitut, és diferent.
• .panel-headinga.card-header
• .panel-titlea .card-title. Depenent de l'aspecte desitjat, també podeu utilitzar elements o classes d'encapçalament (p. ex <h3>. , .h3) o elements o classes en negreta (p. ex <strong>. , <b>, .font-weight-bold). Tingueu en compte que .card-title, tot i que té un nom semblant, produeix un aspecte diferent de .panel-title.
• .panel-bodya.card-body
• .panel-footera.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, i .panel-dangers'han eliminat per a .bg-, .text-, i .borderles utilitats generades a partir del nostre $theme-colorsmapa Sass.

Progrés, progressar

• .progress-bar-*S'han substituït les classes contextuals per .bg-*utilitats. Per exemple, class="progress-bar progress-bar-danger"es converteix en class="progress-bar bg-danger".
• Substituït .activeper barres de progrés animades amb .progress-bar-animated.

Carrusel

• S'ha revisat tot el component per simplificar el disseny i l'estil. Tenim menys estils per substituir, nous indicadors i noves icones.
• Tot el CSS s'ha anul·lat i s'ha canviat de nom, assegurant-se que cada classe té el prefix .carousel-.
  • Per als elements del carrusel, .next, .prev, .left, i .rightsón ara .carousel-item-next, .carousel-item-prev, .carousel-item-left, i .carousel-item-right.
  • .itemtambé és ara .carousel-item.
  • Per als controls anteriors/següents, .carousel-control.righti .carousel-control.leftsón ara .carousel-control-nexti .carousel-control-prev, és a dir, ja no requereixen una classe base específica.
• S'han eliminat tots els estils responsius, s'afereixen a les utilitats (p. ex., mostrant subtítols en determinades finestres) i estils personalitzats segons sigui necessari.
• S'han eliminat les substitucions d'imatges per a les imatges dels elements del carrusel, deferint-se als serveis públics.
• S'ha ajustat l'exemple del carrusel per incloure el nou marcatge i estils.

Taules

• S'ha eliminat el suport per a taules imbricades amb estil. Tots els estils de taula s'hereten ara a v4 per a selectors més senzills.
• S'ha afegit una variant de taula inversa.

Utilitats

• Mostra, amagat i més:
  • S'han fet que les utilitats de visualització responguin (per exemple, .d-nonei d-{sm,md,lg,xl}-none).
  • S'han eliminat la major part de les .hidden-*utilitats per a les noves utilitats de visualització . Per exemple, en comptes de .hidden-sm-up, utilitzeu .d-sm-none. S'han canviat el nom de les .hidden-printutilitats per utilitzar l'esquema de noms de les utilitats de visualització. Més informació a la secció Utilitats responsives d'aquesta pàgina.
  • S'han afegit .float-{sm,md,lg,xl}-{left,right,none}classes per a flotadors responsius i s'han eliminat .pull-lefti .pull-rightja que són redundants a .float-lefti .float-right.
• Tipus:
  • S'han afegit variacions sensibles a les nostres classes d'alineació de text .text-{sm,md,lg,xl}-{left,center,right}.
• Alineació i espaiat:
  • S'han afegit noves utilitats de marge de resposta i farciment per a tots els costats, a més de taquigrafs verticals i horitzontals.
  • S'ha afegit una càrrega de vaixells d' utilitats flexbox .
  • Abandonat .center-blockper la nova .mx-autoclasse.
• Clearfix s'ha actualitzat per eliminar la compatibilitat amb versions anteriors del navegador.

Prefix de venedor mixins

Els mixins de prefix de proveïdor de Bootstrap 3 , que estaven obsolets a la v3.2.0, s'han eliminat a Bootstrap 4. Com que utilitzem Autoprefixer , ja no són necessaris.

S'han eliminat els mixins següents : 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

Documentació

La nostra documentació també va rebre una actualització general. Aquí teniu el baix:

• Encara estem utilitzant Jekyll, però tenim connectors a la barreja:
  • bugify.rbs'utilitza per llistar de manera eficient les entrades a la nostra pàgina d'errors del navegador .
  • example.rbés una bifurcació personalitzada del highlight.rbconnector predeterminat, que permet un maneig de codi d'exemple més fàcil.
  • callout.rbés una bifurcació personalitzada similar, però dissenyada per als nostres textos especials de documents.
  • markdown-block.rbs'utilitza per representar fragments de Markdown dins d'elements HTML com ara taules.
  • jekyll-toc s'utilitza per generar la nostra taula de continguts.
• Tot el contingut de documents s'ha reescrit a Markdown (en lloc d'HTML) per facilitar l'edició.
• Les pàgines s'han reorganitzat per a un contingut més senzill i una jerarquia més accessible.
• Hem passat de CSS normal a SCSS per aprofitar al màxim les variables, mixins i molt més de Bootstrap.

Utilitats sensibles

Totes les @screen-variables s'han eliminat a la v4.0.0. Feu servir els mixins media-breakpoint-up(), media-breakpoint-down(), o Sass o el mapa Sass.media-breakpoint-only()$grid-breakpoints

Les nostres classes d'utilitat responsives s'han eliminat en gran part a favor de les displayutilitats explícites.

• Les classes .hiddeni .shows'han eliminat perquè entraven en conflicte amb els mètodes $(...).hide()i jQuery. $(...).show()En lloc d'això, proveu de canviar l' [hidden]atribut o utilitzeu estils en línia com style="display: none;"i style="display: block;".
• .hidden-S'han eliminat totes les classes, tret de les utilitats d'impressió que s'han canviat de nom.
  • S'ha eliminat de la 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
  • S'ha eliminat de 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
• Les utilitats d'impressió ja no comencen amb .hidden-o .visible-, sinó amb .d-print-.
  • Noms antics: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Noves classes: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

En lloc d'utilitzar classes explícites .visible-*, feu visible un element simplement no amagant-lo en aquesta mida de pantalla. Podeu combinar una .d-*-noneclasse amb una .d-*-blockclasse per mostrar un element només en un interval determinat de mides de pantalla (per exemple .d-none.d-md-block.d-xl-none, mostra l'element només en dispositius mitjans i grans).

Tingueu en compte que els canvis als punts d'interrupció de la graella a la v4 significa que haureu d'augmentar un punt d'interrupció per aconseguir els mateixos resultats. Les noves classes d'utilitat responsives no intenten adaptar-se a casos menys habituals en què la visibilitat d'un element no es pot expressar com un sol rang contigu de mides de la finestra gràfica; En canvi, haureu d'utilitzar CSS personalitzat en aquests casos.