Migreer na v4

Bootstrap 4 is 'n groot herskrywing van die hele projek. Die mees noemenswaardige veranderinge word hieronder opgesom, gevolg deur meer spesifieke veranderinge aan relevante komponente.

Stabiele veranderinge

As ons van Beta 3 na ons stabiele v4.0-vrystelling beweeg, is daar geen breekveranderings nie, maar daar is 'n paar noemenswaardige veranderinge.

Drukwerk

• Vaste gebreekte drukhulpprogramme. Voorheen sou die gebruik van 'n .d-print-*klas onverwags enige ander .d-*klas oorheers. Nou pas hulle by ons ander vertoonhulpmiddels en is slegs van toepassing op daardie media ( @media print).

• Uitgebreide beskikbare afdrukvertoningshulpmiddels om by ander hulpmiddels te pas. Beta 3 en ouer het net block, inline-block, inline, en none. Stabiele v4 bygevoeg flex, inline-flex, table, table-rowen table-cell.

• Vaste drukvoorskou-weergawe oor blaaiers met nuwe drukstyle wat spesifiseer @page size.

Beta 3 veranderinge

Terwyl Beta 2 die grootste deel van ons breekveranderings tydens die beta-fase gesien het, maar ons het nog 'n paar wat in die Beta 3-vrystelling aangespreek moet word. Hierdie veranderinge is van toepassing as jy vanaf Beta 2 of enige ouer weergawe van Bootstrap na Beta 3 opdateer.

Diverse

• Het die ongebruikte $thumbnail-transitionveranderlike verwyder. Ons het niks oorgedra nie, so dit was net ekstra kode.
• Die npm-pakket bevat nie meer enige lêers anders as ons bron- en dist-lêers nie; as jy op hulle staatgemaak het en ons skrifte via die node_modulesgids laat loop het, moet jy jou werkvloei aanpas.

Vorms

• Herskryf beide persoonlike en verstek merkblokkies en radio's. Nou, albei het ooreenstemmende HTML-struktuur (buitenste <div>met broer en suster <input>en <label>) en dieselfde uitlegstyle (gestapelde verstek, inlyn met wysigerklas). Dit stel ons in staat om die etiket te styl op grond van die inset se toestand, wat ondersteuning vir die disabledkenmerk vereenvoudig (wat voorheen 'n ouerklas vereis het) en ons vormvalidering beter ondersteun.

  As deel hiervan het ons die CSS vir die bestuur van veelvuldige background-images op pasgemaakte vorm-merkblokkies en radio's verander. Voorheen het die .custom-control-indicatorelement wat nou verwyder is, die agtergrondkleur, gradiënt en SVG-ikoon gehad. Om die agtergrondgradiënt aan te pas, het beteken dat u almal moet vervang elke keer as u net een moes verander. Nou, ons het .custom-control-label::beforevir die vul en gradiënt en .custom-control-label::afterhanteer die ikoon.

  Om 'n pasgemaakte tjek inlyn te maak, voeg by .custom-control-inline.

• Opgedateerde kieser vir insetgebaseerde knoppiegroepe. In plaas van [data-toggle="buttons"] { }vir styl en gedrag, gebruik ons ​​die datakenmerk net vir JS-gedrag en maak staat op 'n nuwe .btn-group-toggleklas vir stilering.

• Verwyder .col-form-legendten gunste van 'n effens verbeterde .col-form-label. Op hierdie manier .col-form-label-smen .col-form-label-lgkan dit <legend>met gemak op elemente gebruik word.

• Gepasmaakte lêerinsette het 'n verandering aan hul $custom-file-textSass-veranderlike ontvang. Dit is nie meer 'n geneste Sass-kaart nie en dryf nou net een string aan - die Browseknoppie aangesien dit nou die enigste pseudo-element is wat uit ons Sass gegenereer word. Die Choose fileteks kom nou van die .custom-file-label.

Invoergroepe

• Invoergroepbyvoegings is nou spesifiek vir hul plasing relatief tot 'n inset. Ons het gedaal .input-group-addonen .input-group-btnvir twee nuwe klasse, .input-group-prependen .input-group-append. Jy moet nou eksplisiet 'n byvoegsel of 'n aanhef gebruik, wat baie van ons CSS vereenvoudig. Plaas jou knoppies binne 'n byvoegsel of voorvoegsel soos hulle op enige ander plek sou bestaan, maar draai teks in .input-group-text.

• Bekragtigingstyle word nou ondersteun, asook verskeie insette (alhoewel jy net een inset per groep kan valideer).

• Grootteklasse moet op die ouer wees .input-groupen nie die individuele vormelemente nie.

Beta 2 veranderinge

Terwyl ons in beta is, beoog ons om geen breekveranderings te hê nie. Dinge verloop egter nie altyd soos beplan nie. Hieronder is die breekveranderings om in gedagte te hou wanneer jy van Beta 1 na Beta 2 beweeg.

Breek

• $badge-colorVeranderlike verwyder en die gebruik daarvan op .badge. Ons gebruik 'n kleurkontrasfunksie om 'n colorop grond van die te kies background-color, so die veranderlike is onnodig.
• Hernoem grayscale()funksie na gray()om konflik met die CSS-inheemse grayscalefilter te vermy.
• Hernoem .table-inverse, .thead-inverse, en .thead-defaultna .*-darken .*-light, wat ooreenstem met ons kleurskemas wat elders gebruik word.
• Responsiewe tabelle genereer nou klasse vir elke roosterbreekpunt. Dit breek van Beta 1 af deurdat die wat .table-responsivejy gebruik meer soos .table-responsive-md. Jy kan nou gebruik .table-responsiveof .table-responsive-{sm,md,lg,xl}soos nodig.
• Het Bower-ondersteuning laat vaar aangesien die pakketbestuurder afgekeur is vir alternatiewe (bv. Yarn of npm). Sien bower/bower#2298 vir besonderhede.
• Bootstrap benodig steeds jQuery 1.9.1 of hoër, maar jy word aangeraai om weergawe 3.x te gebruik aangesien v3.x se ondersteunde blaaiers dié is wat Bootstrap ondersteun, plus v3.x het 'n paar sekuriteitsoplossings.
• Het die ongebruikte .form-control-labelklas verwyder. As jy wel van hierdie klas gebruik gemaak het, was dit duplikaat van die .col-form-labelklas wat a vertikaal gesentreer het <label>met sy geassosieerde invoer in horisontale vormuitlegte.
• Verander die color-yiqvan 'n mixin wat die coloreiendom ingesluit het na 'n funksie wat 'n waarde terugstuur, sodat jy dit vir enige CSS-eienskap kan gebruik. Byvoorbeeld, in plaas van color-yiq(#000), sou jy skryf color: color-yiq(#000);.

Hoogtepunte

• Nuwe pointer-eventsgebruik op modale bekendgestel. Die buitenste .modal-dialoggaan deur gebeurtenisse met pointer-events: nonevir persoonlike kliekhantering (wat dit moontlik maak om net op die te luister .modal-backdropvir enige klikke), en werk dit dan teen vir die werklike .modal-contentmet pointer-events: auto.

Opsomming

Hier is die groot kaartjie-items waarvan jy bewus sal wil wees wanneer jy van v3 na v4 beweeg.

Blaaier ondersteuning

• Ondersteuning vir IE8, IE9 en iOS 6 laat val. v4 is nou net IE10+ en iOS 7+. Vir werwe wat een van hierdie benodig, gebruik v3.
• Bygevoeg amptelike ondersteuning vir Android v5.0 Lollipop se blaaier en WebView. Vroeër weergawes van die Android-blaaier en WebView bly slegs nie-amptelik ondersteun.

Wêreldwye veranderinge

• Flexbox is by verstek geaktiveer. Oor die algemeen beteken dit 'n skuif weg van vlotte en meer oor ons komponente.
• Van Less na Sass oorgeskakel vir ons bron CSS-lêers.
• Oorgeskakel van pxna remas ons primêre CSS-eenheid, hoewel pieksels steeds vir medianavrae en roostergedrag gebruik word, aangesien toestelkykpoorte nie deur tipe grootte beïnvloed word nie.
• Globale lettergrootte het van 14pxna 16px.
• Rastervlakke opgeknap om 'n vyfde opsie by te voeg (wat kleiner toestelle by 576pxen onder aanspreek) en die -xsinfix van daardie klasse verwyder. Voorbeeld: .col-6.col-sm-4.col-md-3.
• Vervang die aparte opsionele tema met konfigureerbare opsies via SCSS veranderlikes (bv. $enable-gradients: true).
• Boustelsel is hersien om 'n reeks npm-skrifte in plaas van Grunt te gebruik. Sien package.jsonvir alle skrifte, of ons projek lees my vir plaaslike ontwikkelingsbehoeftes.
• Nie-reagerende gebruik van Bootstrap word nie meer ondersteun nie.
• Het die aanlyn Customizer laat vaar ten gunste van meer uitgebreide opstellingsdokumentasie en pasgemaakte bouwerk.
• Bygevoeg dosyne nuwe nutsklasse vir algemene CSS-eiendom-waarde-pare en marge-/opvullingspasiëringkortpaaie.

Rooster stelsel

• Geskuif na flexbox.
  • Bygevoeg ondersteuning vir flexbox in die rooster mixins en vooraf gedefinieerde klasse.
  • As deel van flexbox, ingesluit ondersteuning vir vertikale en horisontale belyningsklasse.
• Bygewerkte roosterklasname en 'n nuwe roostervlak.
  • sm'n Nuwe roostervlak hieronder bygevoeg 768pxvir meer korrelbeheer. Ons het nou xs, sm, md, lg, en xl. Dit beteken ook dat elke vlak een vlak opgestoot is (so .col-md-6in v3 is nou .col-lg-6in v4).
  • xsroosterklasse is gewysig om nie te vereis dat die infix meer akkuraat voorstel dat hulle style begin toepas teen min-width: 0en nie 'n vasgestelde pixelwaarde nie. In plaas daarvan .col-xs-6is dit nou .col-6. Alle ander roostervlakke vereis die infix (bv. sm).
• Opgedateerde roostergroottes, mengsels en veranderlikes.
  • Roostergeute het nou 'n Sass-kaart sodat jy spesifieke geutwydtes by elke breekpunt kan spesifiseer.
  • Opgedateerde roostermengsels om 'n make-col-readyvoorbereidingsmengsel te gebruik en 'n make-colom die flexen max-widthvir individuele kolomgrootte te stel.
  • Veranderde roosterstelsel-media-navraag-breekpunte en houerwydtes om rekening te hou met nuwe roostervlak en te verseker dat kolomme eweredig deur 12hul maksimum breedte deelbaar is.
  • Roosterbreekpunte en houerwydtes word nou via Sass-kaarte ( $grid-breakpointsen $container-max-widths) hanteer in plaas van 'n handvol afsonderlike veranderlikes. Dit vervang die @screen-*veranderlikes heeltemal en laat jou toe om die roostervlakke volledig aan te pas.
  • Medianavrae het ook verander. In plaas daarvan om ons medianavraagverklarings elke keer met dieselfde waarde te herhaal, het ons nou @include media-breakpoint-up/down/only. Nou, in plaas van om te skryf @media (min-width: @screen-sm-min) { ... }, kan jy skryf @include media-breakpoint-up(sm) { ... }.

Komponente

• Panele, duimnaels en putte laat val vir 'n nuwe allesomvattende komponent, kaarte .
• Het die Glyphicons-ikoonlettertipe laat val. As jy ikone nodig het, is sommige opsies:
  • die stroomop weergawe van Glyphicons
  • Octicons
  • Font Awesome
  • Sien die Brei-bladsy uit vir 'n lys van alternatiewe. Het u bykomende voorstelle? Maak asseblief 'n kwessie of PR oop.
• Het die Affix jQuery-inprop laat val.
  • Ons beveel aan om position: stickyeerder gebruik te maak. Sien die HTML5 asseblief-inskrywing vir besonderhede en spesifieke polyfill-aanbevelings. Een voorstel is om 'n @supportsreël te gebruik om dit te implementeer (bv. @supports (position: sticky) { ... })/
  • As jy Affix gebruik het om bykomende, nie position-style toe te pas, sal die polyfills dalk nie jou gebruiksgeval ondersteun nie. Een opsie vir sulke gebruike is die derdeparty ScrollPos-Styler- biblioteek.
• Het die pager-komponent laat val aangesien dit in wese effens aangepaste knoppies was.
• Het byna alle komponente herfaktoriseer om meer ongeneste klaskeurders in plaas van oorspesifieke kinderkeurders te gebruik.

Per komponent

Hierdie lys beklemtoon sleutelveranderinge volgens komponent tussen v3.xx en v4.0.0.

Herlaai

Nuut by Bootstrap 4 is die Reboot , 'n nuwe stylblad wat voortbou op Normalize met ons eie ietwat eiesinnige terugstelstyle. Kiesers wat in hierdie lêer verskyn, gebruik net elemente—daar is geen klasse hier nie. Dit isoleer ons terugstelstyle van ons komponentstyle vir 'n meer modulêre benadering. Sommige van die belangrikste terugstellings wat dit insluit, is die box-sizing: border-boxverandering, skuif van emna remeenhede op baie elemente, skakelstyle en baie vormelementterugstellings.

Tipografie

• Het alle .text-nutsprogramme na die _utilities.scsslêer geskuif.
• Geval .page-headeraangesien die style daarvan via nutsprogramme toegepas kan word.
• .dl-horizontalis laat vaar. Gebruik eerder .rowop <dl>en gebruik roosterkolomklasse (of mixins) op sy <dt>en <dd>kinders.
• Herontwerpte blokaanhalings, wat hul style van die <blockquote>element na 'n enkele klas verskuif, .blockquote. Het die .blockquote-reversewysiger vir tekshulpprogramme laat val.
• .list-inlinevereis nou dat die kinders se lysitems die nuwe .list-inline-itemklas op hulle toegepas het.

Beelde

• Hernoem .img-responsivena .img-fluid.
• Hernoem .img-roundedna.rounded
• Hernoem .img-circlena.rounded-circle

Tabelle

• Byna alle gevalle van die >kieser is verwyder, wat beteken dat geneste tabelle nou outomaties style van hul ouers sal erf. Dit vergemaklik ons ​​keurders en potensiële aanpassings aansienlik.
• Hernoem .table-condensedna .table-smvir konsekwentheid.
• Het 'n nuwe .table-inverseopsie bygevoeg.
• Bygevoeg tabelkop wysigers: .thead-defaulten .thead-inverse.
• Hernoem kontekstuele klasse om 'n .table--voorvoegsel te hê. Vandaar .active, .success, .warning, .dangeren .infona .table-active, .table-success, .table-warning, .table-dangeren .table-info.

Vorms

• Geskuifde element word teruggestel na die _reboot.scsslêer.
• Hernoem .control-labelna .col-form-label.
• Hernoem .input-lgen onderskeidelik .input-smna .form-control-lgen .form-control-sm.
• Klasse .form-group-*laat vaar vir eenvoud. Gebruik .form-control-*eerder klasse nou.
• Laat val .help-blocken vervang dit met .form-textvir blokvlak-hulpteks. Vir inlyn-hulpteks en ander buigsame opsies, gebruik nutsklasse soos .text-muted.
• Geval .radio-inlineen .checkbox-inline.
• Gekonsolideer .checkboxen .radioin .form-checken die verskillende .form-check-*klasse.
• Horisontale vorms hersien:
  • Het die klasvereiste laat vaar .form-horizontal.
  • .form-grouppas nie meer style van die .rowvia-mixin toe nie, dus .rowword dit nou vereis vir horisontale roosteruitlegte (bv. <div class="form-group row">).
  • Nuwe klas bygevoeg .col-form-labelom etikette met .form-controls vertikaal te sentreer.
  • Nuut bygevoeg .form-rowvir kompakte vormuitlegte met die roosterklasse (ruil jou .rowvir 'n .form-rowen gaan).
• Bygevoeg persoonlike vorms ondersteuning (vir merkblokkies, radio's, kies en lêer invoere).
• Vervang .has-error, .has-warning, en .has-successklasse met HTML5-vormvalidering via CSS'e :invaliden :validpseudo-klasse.
• Hernoem .form-control-staticna .form-control-plaintext.

Knoppies

• Hernoem .btn-defaultna .btn-secondary.
• Het die .btn-xsklas heeltemal laat val aangesien .btn-smdit proporsioneel baie kleiner is as v3's.
• Die statige knoppie -kenmerk van die button.jsjQuery-inprop is laat vaar. Dit sluit die $().button(string)en $().button('reset')metodes in. Ons beveel aan om eerder 'n klein bietjie persoonlike JavaScript te gebruik, wat die voordeel sal hê om presies op te tree soos jy dit wil hê.
  • Let daarop dat die ander kenmerke van die inprop (knoppie-merkblokkies, knoppieradio's, enkelwissel-knoppies) in v4 behou is.
• Verander knoppies [disabled]na :disabledsoos IE9+ ondersteun :disabled. Dit fieldset[disabled]is egter steeds nodig omdat inheemse gedeaktiveerde veldstelle steeds foutief is in IE11 .

Knoppie groep

• Herskryf komponent met flexbox.
• Verwyder .btn-group-justified. As 'n plaasvervanger kan jy <div class="btn-group d-flex" role="group"></div>as 'n omhulsel om elemente gebruik met .w-100.
• Het die .btn-group-xsklas heeltemal laat vaar toe verwydering van .btn-xs.
• Verwyder eksplisiete spasiëring tussen knoppie groepe in knoppie nutsbalke; gebruik nou marge-hulpprogramme.
• Verbeterde dokumentasie vir gebruik met ander komponente.

Aftrekkies

• Oorgeskakel van ouerkiesers na enkelvoudige klasse vir alle komponente, wysigers, ens.
• Vereenvoudigde aftrekstyle om nie meer te stuur met opwaartse of afwaartse pyltjies wat aan die aftreklys geheg is nie.
• Dropdowns kan nou met <div>s of <ul>s gebou word.
• Herboude dropdown-style en opmaak om maklike, ingeboude ondersteuning vir <a>en <button>gebaseerde dropdown-items te bied.
• Hernoem .dividerna .dropdown-divider.
• Aftrek items vereis nou .dropdown-item.
• Dropdown-skakelaars vereis nie meer 'n eksplisiete <span class="caret"></span>; dit word nou outomaties verskaf via CSS'e ::afterop .dropdown-toggle.

Rooster stelsel

• Het 'n nuwe 576pxroosterbreekpunt bygevoeg as sm, wat beteken dat daar nou vyf totale vlakke is ( xs, sm, md, lg, en xl).
• Hernoem die responsiewe roosterwysigerklasse van .col-{breakpoint}-{modifier}-{size}na .{modifier}-{breakpoint}-{size}vir eenvoudiger roosterklasse.
• Druk- en trekwysigerklasse vir die nuwe flexbox-aangedrewe orderklasse laat val. Byvoorbeeld, in plaas van .col-8.push-4en .col-4.pull-8, sal jy .col-8.order-2en gebruik .col-4.order-1.
• Bygevoeg flexbox nutsklasse vir roosterstelsel en komponente.

Lys groepe

• Herskryf komponent met flexbox.
• Vervang a.list-group-itemmet 'n eksplisiete klas, .list-group-item-action, vir stilering skakel en knoppie weergawes van lys groep items.
• Klas bygevoeg .list-group-flushvir gebruik met kaarte.

Modaal

• Herskryf komponent met flexbox.
• Gegewe die skuif na flexbox, is die belyning van verwerp-ikone in die kopskrif waarskynlik gebreek aangesien ons nie meer vlotte gebruik nie. Geswaaide inhoud kom eerste, maar met flexbox is dit nie meer die geval nie. Dateer jou afwysikone op om na modale titels te kom om reg te maak.
• Die remoteopsie (wat gebruik kan word om outomaties eksterne inhoud in 'n modaal te laai en in te spuit) en die ooreenstemmende loaded.bs.modalgebeurtenis is verwyder. Ons beveel aan om eerder kliënt-kant-sjablone of 'n data-bindingsraamwerk te gebruik, of om self jQuery.load te bel .

Navs

• Herskryf komponent met flexbox.
• Het byna alle >keurders laat val vir eenvoudiger stilering via ongeneste klasse.
• In plaas van HTML-spesifieke kiesers soos .nav > li > a, gebruik ons ​​aparte klasse vir .navs, .nav-items en .nav-links. Dit maak jou HTML meer buigsaam terwyl dit verhoogde uitbreidbaarheid meebring.

Navbar

Die navigasiebalk is heeltemal herskryf in flexbox met verbeterde ondersteuning vir belyning, responsiwiteit en aanpassing.

• Responsiewe navigasiebalkgedrag word nou op die .navbarklas toegepas via die vereiste .navbar-expand-{breakpoint} waar jy kies waar om die navigasiebalk in te vou. Voorheen was dit 'n Minder veranderlike wysiging en het hersamestelling vereis.
• .navbar-defaultis nou .navbar-light, maar .navbar-darkbly dieselfde. Een hiervan word op elke navigasiebalk vereis. Hierdie klasse stel egter nie meer background-colors nie; in plaas daarvan beïnvloed hulle in wese net color.
• Navbars vereis nou 'n agtergrondverklaring van een of ander aard. Kies uit ons agtergrondhulpmiddels ( .bg-*) of stel jou eie met die ligte/omgekeerde klasse hierbo vir mal aanpassing .
• Gegewe flexbox-style, kan navbars nou flexbox-nutsprogramme gebruik vir maklike belyningsopsies.
• .navbar-toggleis nou .navbar-toggleren het verskillende style en innerlike opmaak (nie meer drie <span>s nie).
• Het die .navbar-formklas heeltemal laat val. Dis nie meer nodig nie; in plaas daarvan, gebruik .form-inlineen pas marge-hulpmiddels toe soos nodig.
• Navbars sluit nie meer in margin-bottomof border-radiusby verstek nie. Gebruik hulpprogramme soos nodig.
• Alle voorbeelde met navigasiebalke is opgedateer om nuwe opmaak in te sluit.

Paginering

• Herskryf komponent met flexbox.
• Eksplisiete klasse ( .page-item, .page-link) word nou vereis op die afstammelinge van .paginationa
• Het die .pagerkomponent heeltemal laat val, want dit was min meer as pasgemaakte buitelynknoppies.

Broodkrummels

• 'n Eksplisiete klas, .breadcrumb-item, word nou vereis oor die afstammelinge van .breadcrumbart

Etikette en kentekens

• Gekonsolideer .labelen .badgeom van die <label>element te ondubbelsinnig en verwante komponente te vereenvoudig.
• Bygevoeg .badge-pillas wysiger vir afgeronde "pil"-voorkoms.
• Kentekens word nie meer outomaties in lysgroepe en ander komponente gedryf nie. Nutsklasse word nou daarvoor benodig.
• .badge-defaultis weggelaat en .badge-secondarybygevoeg om by komponent wysiger klasse wat elders gebruik word, te pas.

Panele, duimnaels en putte

Heeltemal gedaal vir die nuwe kaartkomponent.

Panele

• .panelaan .card, nou gebou met flexbox.
• .panel-defaultverwyder en geen vervanging nie.
• .panel-groupverwyder en geen vervanging nie. .card-groupis nie 'n plaasvervanger nie, dit is anders.
• .panel-headingaan.card-header
• .panel-titleaan .card-title. Afhangende van die verlangde voorkoms, wil jy dalk ook opskrifelemente of klasse (bv <h3>. , .h3) of vetgedrukte elemente of klasse (bv <strong>. , <b>, .font-weight-bold) gebruik. Let daarop dat .card-title, terwyl dit soortgelyk genoem word, 'n ander voorkoms as .panel-title.
• .panel-bodyaan.card-body
• .panel-footeraan.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, en .panel-dangeris laat vaar vir .bg-, .text-, en .bordernutsprogramme wat vanaf ons $theme-colorsSass-kaart gegenereer is.

Vordering

• Vervang kontekstuele .progress-bar-*klasse met .bg-*nutsprogramme. class="progress-bar progress-bar-danger"Word byvoorbeeld class="progress-bar bg-danger".
• Vervang .activevir geanimeerde vorderingstawe met .progress-bar-animated.

Karrousel

• Het die hele komponent hersien om ontwerp en stilering te vereenvoudig. Ons het minder style wat u kan ignoreer, nuwe aanwysers en nuwe ikone.
• Alle CSS is ont-neste en hernoem, om te verseker dat elke klas met voorvoegsel .carousel-.
  • Vir karrouselitems, .next, .prev, .left, en .rightis nou .carousel-item-next, .carousel-item-prev, .carousel-item-left, en .carousel-item-right.
  • .itemis ook nou .carousel-item.
  • Vir vorige/volgende kontroles, .carousel-control.righten .carousel-control.leftis nou .carousel-control-nexten .carousel-control-prev, wat beteken dat hulle nie meer 'n spesifieke basisklas benodig nie.
• Verwyder alle responsiewe stilering, uitstel na nutsprogramme (bv. wys onderskrifte op sekere uitkykvensters) en pasgemaakte style soos nodig.
• Verwyder prentverwydering vir prente in karrouselitems, uitgestel na nutsprogramme.
• Het die Carousel-voorbeeld aangepas om die nuwe opmaak en style in te sluit.

Tabelle

• Verwyder ondersteuning vir gestileerde geneste tabelle. Alle tabelstyle word nou in v4 geërf vir eenvoudiger kiesers.
• Bygevoeg inverse tabel variant.

Nutsprogramme

• Vertoon, versteek en meer:
  • Het vertoonhulpprogramme reageer (bv. .d-noneen d-{sm,md,lg,xl}-none).
  • Het die grootste deel van .hidden-*nutsprogramme vir nuwe vertoonhulpmiddels laat val . Gebruik byvoorbeeld in plaas .hidden-sm-upvan .d-sm-none. .hidden-printHet die nutsprogramme hernoem om die naamskema vir vertoonhulpmiddels te gebruik. Meer inligting onder die Responsiewe hulpprogramme-afdeling van hierdie bladsy.
  • .float-{sm,md,lg,xl}-{left,right,none}Klasse vir responsiewe dryf bygevoeg en verwyder .pull-leften .pull-rightaangesien hulle oortollig is vir .float-leften .float-right.
• Tipe:
  • Het responsiewe variasies by ons teksbelyningsklasse gevoeg .text-{sm,md,lg,xl}-{left,center,right}.
• Belyning en spasiëring:
  • Bygevoeg nuwe responsiewe marge en opvulling nutsmiddels vir alle kante, plus vertikale en horisontale snelskrif.
  • Bygevoeg bootvrag van flexbox nutsprogramme .
  • Geval .center-blockvir die nuwe .mx-autoklas.
• Clearfix is ​​opgedateer om ondersteuning vir ouer blaaierweergawes te laat vaar.

Verkoopsvoorvoegselmengsels

Bootstrap 3 se verskaffer-voorvoegselmengsels , wat in v3.2.0 opgeskort is, is in Bootstrap 4 verwyder. Aangesien ons Autoprefixer gebruik , is dit nie meer nodig nie.

Het die volgende mengsels verwyder : 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-functiontransition-transformtranslatetranslate3duser-select

Dokumentasie

Ons dokumentasie het ook 'n opgradering oor die hele linie gekry. Hier is die laagtepunt:

• Ons gebruik steeds Jekyll, maar ons het plugins in die mengsel:
  • bugify.rbword gebruik om die inskrywings doeltreffend op ons blaaier foute- bladsy te lys.
  • example.rbis 'n pasgemaakte vurk van die verstek highlight.rb-inprop, wat die hantering van voorbeeldkode makliker maak.
  • callout.rbis 'n soortgelyke pasgemaakte vurk daarvan, maar ontwerp vir ons spesiale dokumente-uitroepe.
  • jekyll-toc word gebruik om ons inhoudsopgawe te genereer.
• Alle dokumente-inhoud is herskryf in Markdown (in plaas van HTML) vir makliker redigering.
• Bladsye is herorganiseer vir eenvoudiger inhoud en 'n meer toeganklike hiërargie.
• Ons het van gewone CSS na SCSS geskuif om ten volle voordeel te trek uit Bootstrap se veranderlikes, mixins en meer.

Responsiewe nutsprogramme

Alle @screen-veranderlikes is verwyder in v4.0.0. Gebruik eerder die media-breakpoint-up(), media-breakpoint-down(), of media-breakpoint-only()Sass-mengsels of die $grid-breakpointsSass-kaart.

Ons responsiewe nutsklasse is grootliks verwyder ten gunste van eksplisiete displaynutsprogramme.

• Die .hiddenen .showklasse is verwyder omdat hulle in stryd was met jQuery's $(...).hide()en $(...).show()metodes. Probeer eerder om die [hidden]kenmerk te wissel of gebruik inlynstyle soos style="display: none;"en style="display: block;".
• Alle .hidden-klasse is verwyder, behalwe vir die drukhulpprogramme wat hernoem is.
  • Verwyder van 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
  • Verwyder van v4 alfas:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Drukhulpprogramme begin nie meer met .hidden-of nie .visible-, maar met .d-print-.
  • Ou name: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Nuwe klasse: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Eerder as om eksplisiete .visible-*klasse te gebruik, maak jy 'n element sigbaar deur dit eenvoudig nie op daardie skermgrootte te versteek nie. Jy kan een .d-*-noneklas met een .d-*-blockklas kombineer om 'n element slegs op 'n gegewe interval van skermgroottes te wys (bv .d-none.d-md-block.d-xl-none. wys die element slegs op medium en groot toestelle).

Let daarop dat die veranderinge aan die roosterbreekpunte in v4 beteken dat jy een breekpunt groter sal moet gaan om dieselfde resultate te behaal. Die nuwe responsiewe nutsklasse poog nie om minder algemene gevalle te akkommodeer waar 'n element se sigbaarheid nie uitgedruk kan word as 'n enkele aaneenlopende reeks viewport-groottes nie; jy sal eerder persoonlike CSS in sulke gevalle moet gebruik.