Source

Migrado al v4

Bootstrap 4 estas grava reverko de la tuta projekto. La plej rimarkindaj ŝanĝoj estas resumitaj malsupre, sekvataj de pli specifaj ŝanĝoj al koncernaj komponantoj.

Stabilaj ŝanĝoj

Moviĝante de Beta 3 al nia stabila v4.0 eldono, estas neniuj rompiĝaj ŝanĝoj, sed estas kelkaj rimarkindaj ŝanĝoj.

Presado

  • Riparis rompitajn presajn ilojn. Antaŭe, uzi .d-print-*klason neatendite superregus ajnan alian .d-*klason. Nun ili kongruas kun niaj aliaj montraj iloj kaj validas nur por tiu amaskomunikilaro ( @media print).

  • Pligrandigitaj disponeblaj presitaj ekranaj utilecoj por kongrui kun aliaj utilecoj. Beta 3 kaj pli malnova nur havis block, inline-block, inline, kaj none. Stabila v4 aldonis flex, inline-flex, table, table-row, kaj table-cell.

  • Riparita presaĵantaŭprezento tra retumiloj kun novaj presaj stiloj kiuj specifas @page size.

Beta 3 ŝanĝoj

Dum Beta 2 vidis la plej grandan parton de niaj rompiĝaj ŝanĝoj dum la beta-fazo, sed ni ankoraŭ havas kelkajn, kiuj devis esti traktitaj en la Beta 3-eldono. Ĉi tiuj ŝanĝoj validas se vi ĝisdatigas al Beta 3 de Beta 2 aŭ ajna pli malnova versio de Bootstrap.

Diversaj

  • Forigis la neuzatan $thumbnail-transitionvariablon. Ni ne estis transirantaj ion, do ĝi estis nur ekstra kodo.
  • La pako npm ne plu inkluzivas iujn ajn dosierojn krom niaj fontaj kaj dist dosieroj; se vi fidis ilin kaj rulis niajn skriptojn per la node_modulesdosierujo, vi devus adapti vian laborfluon.

Formoj

  • Reskribis kaj kutimajn kaj defaŭltajn markobutonojn kaj radiojn. Nun ambaŭ havas kongruan HTML-strukturon (eksteran <div>kun gefrato <input>kaj <label>) kaj la samajn aranĝajn stilojn (staplitajn defaŭlte, enlinie kun modifiklaso). Ĉi tio permesas al ni stiligi la etikedon surbaze de la stato de la enigo, simpligante subtenon por la disabledatributo (antaŭe postulante gepatran klason) kaj pli bone subtenante nian formularvalidigon.

    Kiel parto de ĉi tio, ni ŝanĝis la CSS por administri plurajn background-images sur kutimaj markobutonoj kaj radioj. Antaŭe, la nun forigita .custom-control-indicatorelemento havis la fonkoloron, gradienton kaj SVG-ikonon. Agordi la fonan gradienton signifis anstataŭigi ĉiujn tiujn ĉiufoje kiam vi bezonis ŝanĝi nur unu. Nun, ni havas .custom-control-label::beforepor la plenigo kaj gradiento kaj .custom-control-label::afterpritraktas la ikonon.

    Por fari kutiman kontrolon enlinia, aldonu .custom-control-inline.

  • Ĝisdatigita elektilo por enig-bazitaj butongrupoj. Anstataŭ [data-toggle="buttons"] { }por stilo kaj konduto, ni uzas la dataatributon nur por JS-kondutoj kaj dependas de nova .btn-group-toggleklaso por stilado.

  • Forigita .col-form-legendal favoro de iomete plibonigita .col-form-label. Tiel .col-form-label-smkaj .col-form-label-lgpovas esti uzata sur <legend>elementoj kun facileco.

  • Propraj dosieraj enigaĵoj ricevis ŝanĝon al sia $custom-file-textSass-variablo. Ĝi ne plu estas nestita Sass-mapo kaj nun nur funkciigas unu ŝnuron—la Browsebutono ĉar tio nun estas la nura pseŭdo-elemento generita de nia Sass. La Choose fileteksto nun devenas el la .custom-file-label.

Eniggrupoj

  • Eniga grupaldonaĵoj nun estas specifaj por sia lokigo rilate al enigo. Ni falis .input-group-addonkaj .input-group-btnpor du novaj klasoj, .input-group-prependkaj .input-group-append. Vi devas eksplicite uzi aldonaĵon aŭ aldonaĵon nun, simpligante grandan parton de nia CSS. Ene de aldono aŭ antaŭmeto, metu viajn butonojn kiel ili ekzistus aliloke, sed envolvu tekston en .input-group-text.

  • Validaj stiloj nun estas subtenataj, same kiel pluraj enigaĵoj (kvankam vi povas validigi nur unu enigaĵon por grupo).

  • Dimensigaj klasoj devas esti sur la gepatro .input-groupkaj ne la individuaj formaelementoj.

Beta 2 ŝanĝoj

Dum en beta, ni celas havi neniujn rompiĝajn ŝanĝojn. Tamen, aferoj ne ĉiam iras kiel planite. Malsupre estas la rompiĝaj ŝanĝoj, kiujn oni devas konsideri kiam oni transiras de Beta 1 al Beta 2.

Rompante

  • Forigita $badge-colorvariablo kaj ĝia uzado sur .badge. Ni uzas kolorkontrastan funkcion por elekti colorsurbaze de la background-color, do la variablo estas nenecesa.
  • Renomita grayscale()funkcio por gray()eviti rompi konflikton kun la CSS-denaska grayscalefiltrilo.
  • Alinomite .table-inverse, .thead-inverse, kaj .thead-defaultal .*-darkkaj .*-light, kongruante kun niaj kolorskemoj uzataj aliloke.
  • Respondema tabeloj nun generas klasojn por ĉiu krada rompopunkto. Ĉi tio rompas de Beta 1 ĉar la .table-responsivevi uzis pli similas al .table-responsive-md. Vi nun povas uzi .table-responsiveaŭ .table-responsive-{sm,md,lg,xl}laŭbezone.
  • Forigita Bower-subteno ĉar la pakadministranto estis malrekomendita por alternativoj (ekz., Yarn aŭ npm). Vidu bower/bower#2298 por detaloj.
  • Bootstrap ankoraŭ postulas jQuery 1.9.1 aŭ pli altan, sed vi konsilas uzi version 3.x ĉar la subtenataj retumiloj de v3.x estas tiuj, kiujn Bootstrap subtenas plus v3.x havas iujn sekurecajn korektojn.
  • Forigis la neuzatan .form-control-labelklason. Se vi ja uzis ĉi tiun klason, ĝi estis duplikato de la .col-form-labelklaso, kiu vertikale centris a <label>kun ĝia rilata enigo en horizontalaj formaj aranĝoj.
  • Ŝanĝis la color-yiqde miksaĵo kiu inkludis la colorposedaĵon al funkcio kiu resendas valoron, permesante al vi uzi ĝin por iu ajn CSS-posedaĵo. Ekzemple, anstataŭ color-yiq(#000), vi skribus color: color-yiq(#000);.

Elstaraĵoj

  • Enkondukis novan pointer-eventsuzadon pri modaloj. La ekstera .modal-dialogtrapasas eventojn kun pointer-events: nonepor kutima klakotraktado (ebligante nur aŭskulti la .modal-backdroppor ajnaj klakoj), kaj tiam kontraŭbatalas ĝin por la reala .modal-contentper pointer-events: auto.

Resumo

Jen la grandaj biletaĵoj, pri kiuj vi volos konscii kiam vi moviĝos de v3 al v4.

Subteno de retumilo

  • Forigita subteno de IE8, IE9 kaj iOS 6. v4 nun estas nur IE10+ kaj iOS 7+. Por retejoj kiuj bezonas iun el tiuj, uzu v3.
  • Aldonita oficiala subteno por la Retumilo kaj WebView de Android v5.0 Lollipop. Pli fruaj versioj de la Android-Retumilo kaj WebView restas nur neoficiale subtenataj.

Tutmondaj ŝanĝoj

  • Flexbox estas ebligita defaŭlte. Ĝenerale ĉi tio signifas malproksimiĝon de flosiloj kaj pli trans niaj komponantoj.
  • Ŝanĝite de Less al Sass por niaj fontaj CSS-dosieroj.
  • Ŝanĝite de pxal remkiel nia ĉefa CSS-unuo, kvankam pikseloj daŭre estas uzataj por amaskomunikilaraj demandoj kaj kradkonduto ĉar aparataj vidfenestroj ne estas tuŝitaj de tipgrandeco.
  • Tutmonda tiparo-grandeco pliiĝis de 14pxal 16px.
  • Reorganizis kradnivelojn por aldoni kvinan opcion (traktante pli malgrandajn aparatojn ĉe 576pxkaj malsupre) kaj forigis la -xsinfikson de tiuj klasoj. Ekzemplo: .col-6.col-sm-4.col-md-3.
  • Anstataŭigis la apartan laŭvolan temon per agordeblaj opcioj per SCSS-variabloj (ekz, $enable-gradients: true).
  • Konstrua sistemo reviziita por uzi serion de npm-skriptoj anstataŭ Grunt. Vidu package.jsonpor ĉiuj skriptoj, aŭ nian projekton readme por lokaj evoluaj bezonoj.
  • Ne-respondema uzado de Bootstrap ne plu estas subtenata.
  • Forigis la interretan personigilon en favoro de pli ampleksa agorda dokumentaro kaj personecigitaj konstruoj.
  • Aldonitaj dekduoj da novaj utilaj klasoj por komunaj CSS-posedaĵ-valoraj paroj kaj marĝenaj/plenigantaj interspacaj ŝparvojoj.

Kradsistemo

  • Movita al flekskesto.
    • Aldonita subteno por flexbox en la kradaj miksaĵoj kaj antaŭdifinitaj klasoj.
    • Kiel parto de flexbox, inkludis subtenon por vertikalaj kaj horizontalaj vicigklasoj.
  • Ĝisdatigitaj kradaj klasnomoj kaj nova kradnivelo.
    • Aldonis novan smkradan nivelon sube 768pxpor pli granulara kontrolo. Ni nun havas xs, sm, md, lg, kaj xl. Ĉi tio ankaŭ signifas, ke ĉiu nivelo estis plialtigita je unu nivelo (do .col-md-6en v3 nun estas .col-lg-6en v4).
    • xskradklasoj estis modifitaj por ne postuli la infikson pli precize reprezenti ke ili komencas apliki stilojn je min-width: 0kaj ne fiksita piksela valoro. Anstataŭ .col-xs-6, ĝi estas nun .col-6. Ĉiuj aliaj kradniveloj postulas la infikson (ekz, sm).
  • Ĝisdatigitaj kradaj grandecoj, miksaĵoj kaj variabloj.
    • Kradkanaletoj nun havas Sass-mapon por ke vi povas specifi specifajn defluillarĝojn ĉe ĉiu rompopunkto.
    • Ĝisdatigita kradmiksins por utiligi make-col-readypreparan miksaĵon kaj make-colagordi la flexkaj max-widthpor individua kolumna grandeco.
    • Ŝanĝis kradsistemojn amaskomunikilajn pridemandpunktojn kaj ujlarĝojn por kalkuli novan kradnivelon kaj certigi ke kolumnoj estas egale disigeblaj 12je sia maksimuma larĝo.
    • Kradromppunktoj kaj ujlarĝoj nun estas pritraktitaj per Sass-mapoj ( $grid-breakpointskaj $container-max-widths) anstataŭe de manpleno da apartaj variabloj. Ĉi tiuj tute anstataŭigas la @screen-*variablojn kaj permesas al vi plene agordi la kradnivelojn.
    • Amaskomunikilaraj demandoj ankaŭ ŝanĝiĝis. Anstataŭ ripeti niajn amaskomunikilajn demandajn deklarojn kun la sama valoro ĉiufoje, ni nun havas @include media-breakpoint-up/down/only. Nun, anstataŭ skribi @media (min-width: @screen-sm-min) { ... }, vi povas skribi @include media-breakpoint-up(sm) { ... }.

Komponentoj

  • Faligitaj paneloj, bildetoj kaj putoj por nova tute ampleksa komponanto, kartoj .
  • Forigis la Glyphicons ikonotiparo. Se vi bezonas ikonojn, kelkaj opcioj estas:
  • Forigis la kromprogramon Affix jQuery.
    • Ni rekomendas uzi position: stickyanstataŭe. Vidu la HTML5 Bonvolu eniron por detaloj kaj specifaj polyfill-rekomendoj. Unu sugesto estas uzi @supportsregulon por efektivigi ĝin (ekz., @supports (position: sticky) { ... })/
    • Se vi uzus Afikson por apliki pliajn, ne- positionstilojn, la plurplenigaĵoj eble ne subtenas vian uzkazon. Unu opcio por tiaj uzoj estas la triaparta ScrollPos-Styler- biblioteko.
  • Faligis la paŝigan komponanton ĉar ĝi estis esence iomete personigitaj butonoj.
  • Refaktoris preskaŭ ĉiujn komponentojn por uzi pli nenestitajn klaselegilojn anstataŭe de trospecifaj infanelektiloj.

Laŭ komponanto

Ĉi tiu listo elstarigas ŝlosilajn ŝanĝojn laŭ komponantoj inter v3.xx kaj v4.0.0.

Rekomencu

Nova al Bootstrap 4 estas la Reboot , nova stilfolio kiu konstruas sur Normaligi kun niaj propraj iom opinie restarigi stiloj. Elektiloj aperantaj en ĉi tiu dosiero nur uzas elementojn—ĉi tie ne estas klasoj. Ĉi tio izolas niajn restarigitajn stilojn de niaj komponaj stiloj por pli modula aliro. Kelkaj el la plej gravaj rekomencigoj, kiujn ĉi tio inkluzivas estas la box-sizing: border-boxŝanĝo, moviĝado de emal remunuoj pri multaj elementoj, ligostiloj kaj multaj formaelementaj rekomencigoj.

Tipografio

  • Movis ĉiujn .text-ilojn al la _utilities.scssdosiero.
  • Forigita .page-headerĉar ĝiaj stiloj povas esti aplikataj per utilecoj.
  • .dl-horizontalestis faligita. Anstataŭe, uzu .rowon <dl>kaj uzu kradkolumnklasojn (aŭ miksinojn) sur ĝiaj <dt>kaj <dd>infanoj.
  • Restrukturitaj blokcitaĵoj, movante siajn stilojn de la <blockquote>elemento al ununura klaso, .blockquote. Forigis la .blockquote-reversemodifilon por tekstaj utilecoj.
  • .list-inlinenun postulas ke ĝiaj filaj listeroj havu la novan .list-inline-itemklason aplikitan al ili.

Bildoj

  • Renomite .img-responsiveal .img-fluid.
  • Renomite .img-roundedal.rounded
  • Renomite .img-circleal.rounded-circle

Tabeloj

  • Preskaŭ ĉiuj okazoj de la >elektilo estis forigitaj, tio signifas, ke nestitaj tabeloj nun aŭtomate heredos stilojn de siaj gepatroj. Ĉi tio multe simpligas niajn elektilojn kaj eblajn personigojn.
  • Alinomite .table-condensedal .table-smpor konsistenco.
  • Aldonis novan .table-inverseopcion.
  • Aldonitaj tabelkapaj modifiloj: .thead-defaultkaj .thead-inverse.
  • Renomitaj kuntekstaj klasoj por havi .table--prefikson. Tial .active, .success, .warning, .dangerkaj .infoal .table-active, .table-success, .table-warning, .table-dangerkaj .table-info.

Formoj

  • Movita elemento rekomenciĝas al la _reboot.scssdosiero.
  • Renomite .control-labelal .col-form-label.
  • Renomite .input-lgkaj .input-smal .form-control-lgkaj .form-control-sm, respektive.
  • Forigita .form-group-*klasoj pro simpleco. Uzu .form-control-*klasojn anstataŭe nun.
  • Faligis .help-blockkaj anstataŭigis ĝin per .form-textpor bloknivela helpteksto. Por enlinia helpteksto kaj aliaj flekseblaj opcioj, uzu utilajn klasojn kiel .text-muted.
  • Faligis .radio-inlinekaj .checkbox-inline.
  • Firmigitaj .checkboxkaj .radioen .form-checkkaj la diversajn .form-check-*klasojn.
  • Horizontalaj formoj reviziitaj:
    • Forigis la .form-horizontalklaspostulon.
    • .form-groupne plu aplikas stilojn de la .rowvia miksaĵo, do .rownun necesas por horizontalaj kradaj aranĝoj (ekz., <div class="form-group row">).
    • Aldonita nova .col-form-labelklaso al vertikale centri etikedojn kun .form-controls.
    • Aldonita nova .form-rowpor kompaktaj formaj aranĝoj kun la kradaj klasoj (interŝanĝu vian .rowpor a .form-rowkaj iru).
  • Aldonita kutimaj formoj-subteno (por markobutonoj, radioj, elektoj kaj dosieraj enigoj).
  • Anstataŭigitaj .has-error, .has-warning, kaj .has-successklasoj kun HTML5-formvalidigo per CSS :invalidkaj :validpseŭdo-klasoj.
  • Renomite .form-control-statical .form-control-plaintext.

Butonoj

  • Renomite .btn-defaultal .btn-secondary.
  • Faligis la .btn-xsklason tute kiel .btn-smestas proporcie multe pli malgranda ol v3.
  • La ŝtata butono trajto de la button.jsjQuery kromaĵo estas forigita. Ĉi tio inkluzivas la $().button(string)kaj $().button('reset')metodojn. Ni konsilas uzi iom da kutima JavaScript anstataŭe, kiu havos la avantaĝon konduti ĝuste kiel vi volas.
    • Notu, ke la aliaj funkcioj de la kromaĵo (butonaj markobutonoj, butonaj radioj, unu-ŝanĝaj butonoj) estis konservitaj en v4.
  • Ŝanĝu butonojn [disabled]al :disabledkiel IE9+ subtenas :disabled. Tamen fieldset[disabled]estas ankoraŭ necesa ĉar denaskaj malfunkciigitaj kamparo ankoraŭ estas fuŝa en IE11 .

Butongrupo

  • Reskribita komponanto per flexbox.
  • Forigita .btn-group-justified. Kiel anstataŭaĵon vi povas uzi <div class="btn-group d-flex" role="group"></div>kiel envolvaĵon ĉirkaŭ elementoj kun .w-100.
  • Forigis la .btn-group-xsklason tute donitan forigon de .btn-xs.
  • Forigita eksplicita interspaco inter butongrupoj en butonaj ilbretoj; uzu marĝenajn utilecojn nun.
  • Plibonigita dokumentaro por uzo kun aliaj komponantoj.
  • Ŝanĝite de gepatraj elektiloj al unuopaj klasoj por ĉiuj komponantoj, modifiloj ktp.
  • Simpligitaj falmenuoj por ne plu sendi kun supren aŭ malsupren altenantaj sagoj alkroĉitaj al la falmenuo.
  • Dropdowns povas esti konstruitaj kun <div>s aŭ <ul>s nun.
  • Rekonstruitaj falmenumaj stiloj kaj markado por provizi facilan, enkonstruitan subtenon por <a>kaj <button>bazitaj falmenuoj.
  • Renomite .divideral .dropdown-divider.
  • Dropdown-eroj nun postulas .dropdown-item.
  • Dropdown baskuloj ne plu postulas eksplicitan <span class="caret"></span>; ĉi tio nun estas provizita aŭtomate per CSS-oj ::aftersur .dropdown-toggle.

Kradsistemo

  • Aldonis novan 576pxkradan rompopunkton kiel sm, signifante ke nun estas kvin totalaj niveloj ( xs, sm, md, lg, kaj xl).
  • Renomis la respondemajn kradmodifajn klasojn de .col-{breakpoint}-{modifier}-{size}al .{modifier}-{breakpoint}-{size}por pli simplaj kradaj klasoj.
  • Forigitaj puŝaj kaj tiri modifklasoj por la novaj flekskesto-funkciigitaj orderklasoj. Ekzemple, anstataŭ .col-8.push-4kaj .col-4.pull-8, vi uzus .col-8.order-2kaj .col-4.order-1.
  • Aldonitaj flexbox-utilaj klasoj por kradsistemo kaj komponantoj.

Listo grupoj

  • Reskribita komponanto per flexbox.
  • Anstataŭigita a.list-group-itemper eksplicita klaso, .list-group-item-action, por stilaj ligiloj kaj butonversioj de listgrupoj.
  • Aldonita .list-group-flushklaso por uzo kun kartoj.
  • Reskribita komponanto per flexbox.
  • Donita movo al flekskesto, vicigo de malakceptaj ikonoj en la kaplinio verŝajne estas rompita ĉar ni ne plu uzas flosilon. Flosita enhavo venas unue, sed kun flexbox tio ne plu estas la kazo. Ĝisdatigu viajn maldungajn ikonojn por veni post modalaj titoloj por ripari.
  • La remoteopcio (kiu povus esti uzata por aŭtomate ŝargi kaj injekti eksteran enhavon en modalon) kaj la responda loaded.bs.modalevento estis forigitaj. Ni rekomendas anstataŭe uzi klientflankan ŝablonon aŭ datuman ligan kadron, aŭ voki jQuery.load mem.
  • Reskribita komponanto per flexbox.
  • Forigis preskaŭ ĉiujn >elektilojn por pli simpla stilado per nenestitaj klasoj.
  • Anstataŭ HTML-specifaj elektiloj kiel .nav > li > a, ni uzas apartajn klasojn por .navs, .nav-items kaj .nav-links. Ĉi tio igas vian HTML-on pli fleksebla dum alportas pliigitan etendeblecon.

La navigadbreto estis tute reverkita en flekskesto kun plibonigita subteno por vicigo, respondeco kaj personigo.

  • Respondema navbarkondutoj nun estas aplikataj al la .navbarklaso per la bezonata .navbar-expand-{breakpoint} kie vi elektas kie kolaps la navbaro. Antaŭe ĉi tio estis Malpli varia modifo kaj postulis rekompilon.
  • .navbar-defaultestas nun .navbar-light, kvankam .navbar-darkrestas la sama. Unu el ĉi tiuj estas bezonata sur ĉiu navigadbreto. Tamen, ĉi tiuj klasoj ne plu starigas background-colors; anstataŭe ili esence nur influas color.
  • Navbaroj nun postulas fonan deklaron de ia speco. Elektu el niaj fonaj utilecoj ( .bg-*) aŭ agordu vian propran per la malpezaj/inversaj klasoj supre por freneza personigo .
  • Konsiderante flexbox-stilojn, navbaroj nun povas uzi flexbox-servaĵojn por facilaj aligeblecoj.
  • .navbar-toggleestas nun .navbar-togglerkaj havas malsamajn stilojn kaj internan markadon (ne pli tri <span>s).
  • Tute forlasis la .navbar-formklason. Ne plu necesas; anstataŭe, simple uzu .form-inlinekaj apliku marĝenajn utilecojn kiel necese.
  • Navbaroj ne plu inkluzivas margin-bottomaŭ border-radiusdefaŭlte. Uzu utilecojn kiel necese.
  • Ĉiuj ekzemploj kun navbaroj estis ĝisdatigitaj por inkluzivi novan markadon.

Paĝigo

  • Reskribita komponanto per flexbox.
  • Eksplicitaj klasoj ( .page-item, .page-link) nun estas postulataj ĉe la posteuloj de .paginations
  • Faligis la .pagerkomponanton tute ĉar ĝi estis malmulte pli ol personecigitaj skizaj butonoj.
  • Eksplicita klaso, .breadcrumb-item, nun estas postulata sur la posteuloj de .breadcrumbs

Etikedoj kaj insignoj

  • Plifirmigita .labelkaj .badgemalambiguigi de la <label>elemento kaj simpligi rilatajn komponantojn.
  • Aldonita .badge-pillkiel modifilo por rondeta "pilolo" aspekto.
  • Insignoj ne plu flosiĝas aŭtomate en listgrupoj kaj aliaj komponantoj. Utilaj klasoj nun estas postulataj por tio.
  • .badge-defaultestis forigita kaj .badge-secondaryaldonita por kongrui kun komponentaj modifklasoj uzataj aliloke.

Paneloj, bildetoj kaj putoj

Faligita tute por la nova kartkomponento.

Paneloj

  • .panelal .card, nun konstruita kun flexbox.
  • .panel-defaultforigita kaj neniu anstataŭaĵo.
  • .panel-groupforigita kaj neniu anstataŭaĵo. .card-groupne estas anstataŭaĵo, ĝi estas malsama.
  • .panel-headingal.card-header
  • .panel-titleal .card-title. Depende de la dezirata aspekto, vi eble ankaŭ volas uzi titolojn aŭ klasojn (ekz <h3>. , .h3) aŭ grasajn elementojn aŭ klasojn (ekz <strong>. , <b>, .font-weight-bold). Notu ke .card-title, dum simile nomita, produktas malsaman aspekton ol .panel-title.
  • .panel-bodyal.card-body
  • .panel-footeral.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, kaj .panel-dangerestis forigitaj por .bg-, .text-, kaj .borderiloj generitaj de nia $theme-colorsSass-mapo.

Progreso

  • Anstataŭigis kuntekstajn .progress-bar-*klasojn per .bg-*utilecoj. Ekzemple, class="progress-bar progress-bar-danger"iĝas class="progress-bar bg-danger".
  • Anstataŭita .activepor viglaj progresbretoj per .progress-bar-animated.
  • Reviziis la tutan komponenton por simpligi dezajnon kaj stilon. Ni havas malpli da stiloj por vi anstataŭi, novajn indikilojn kaj novajn ikonojn.
  • Ĉiuj CSS estis nenestitaj kaj renomitaj, certigante ke ĉiu klaso estas prefiksita per .carousel-.
    • Por karuselaj eroj, .next, .prev, .left, kaj .rightestas nun .carousel-item-next, .carousel-item-prev, .carousel-item-left, kaj .carousel-item-right.
    • .itemestas ankaŭ nun .carousel-item.
    • Por antaŭaj/sekvaj kontroloj, .carousel-control.rightkaj .carousel-control.leftestas nun .carousel-control-nextkaj .carousel-control-prev, tio signifas, ke ili ne plu postulas specifan bazan klason.
  • Forigis ĉiujn respondemajn stilojn, prokrastante al utilecoj (ekz., montrante subtitolojn en certaj vidfenestroj) kaj kutimaj stiloj laŭbezone.
  • Forigitaj bildŝanĝoj por bildoj en karuselaj eroj, prokrastante al utilecoj.
  • Agordis la ekzemplon de Karuselo por inkluzivi la novajn markojn kaj stilojn.

Tabeloj

  • Forigita subteno por stilitaj nestitaj tabeloj. Ĉiuj tabelstiloj nun estas hereditaj en v4 por pli simplaj elektiloj.
  • Aldonita inversa tabelvariaĵo.

Utilaĵoj

  • Montriĝo, kaŝita kaj pli:
    • Faris ekranajn utilecojn respondemaj (ekz. .d-nonekaj d-{sm,md,lg,xl}-none).
    • Forigis la plejparton de .hidden-*utilecoj por novaj ekranaj utilecoj . Ekzemple, anstataŭ .hidden-sm-up, uzu .d-sm-none. Renomis la .hidden-printilojn por uzi la montran ilan nomskemon. Pliaj informoj sub la sekcio de Respondema utilecoj de ĉi tiu paĝo.
    • Aldonitaj .float-{sm,md,lg,xl}-{left,right,none}klasoj por respondemaj flosiloj kaj forigitaj .pull-leftkaj .pull-rightĉar ili estas redundaj al .float-leftkaj .float-right.
  • Tipo:
    • Aldonitaj respondemaj variaĵoj al niaj tekstaj vicigoklasoj .text-{sm,md,lg,xl}-{left,center,right}.
  • Paraleligo kaj interspaco:
  • Clearfix ĝisdatigita por forigi subtenon por pli malnovaj retumiloj.

Vendisto-prefikso miksaĵoj

La miksaĵoj de vendoprefikso de Bootstrap 3 , kiuj estis malrekomenditaj en v3.2.0, estis forigitaj en Bootstrap 4. Ĉar ni uzas Aŭtomatprefiksilon , ili ne plu necesas.

Forigis la sekvajn miksaĵojn : 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

Dokumentado

Nia dokumentaro ankaŭ ricevis ĝisdatigon ĝenerale. Jen la malsupro:

  • Ni ankoraŭ uzas Jekyll, sed ni havas kromaĵojn en la miksaĵo:
    • bugify.rbestas uzata por efike listigi la enskribojn en nia paĝo pri cimoj de retumilo .
    • example.rbestas kutima forko de la defaŭlta highlight.rbkromaĵo, ebligante pli facilan ekzempla-kodan uzadon.
    • callout.rbestas simila kutima forko de tio, sed desegnita por niaj specialaj dokumentoj.
    • jekyll-toc estas uzata por generi nian enhavtabelon.
  • La tuta enhavo de dokumentoj estis reverkita en Markdown (anstataŭ HTML) por pli facila redaktado.
  • Paĝoj estis reorganizitaj por pli simpla enhavo kaj pli alirebla hierarkio.
  • Ni moviĝis de regula CSS al SCSS por plene profiti la variablojn, miksaĵojn de Bootstrap kaj pli.

Respondema utilecoj

Ĉiuj @screen-variabloj estis forigitaj en v4.0.0. Uzu la media-breakpoint-up(), media-breakpoint-down(), aŭ media-breakpoint-only()Sass-miksaĵojn aŭ la $grid-breakpointsSass-mapon anstataŭe.

Niaj respondemaj utilaj klasoj plejparte estis forigitaj favore al eksplicitaj displayutilecoj.

  • La .hiddenkaj .showklasoj estis forigitaj ĉar ili konfliktis kun jQuery $(...).hide()kaj $(...).show()metodoj. Anstataŭe, provu ŝanĝi la [hidden]atributon aŭ uzu enliniajn stilojn kiel style="display: none;"kaj style="display: block;".
  • Ĉiuj .hidden-klasoj estis forigitaj, krom la presaj iloj kiuj estis renomitaj.
    • Forigita de 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
    • Forigite de v4 alfaj:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Presaj iloj ne plu komenciĝas per .hidden-aŭ .visible-, sed per .d-print-.
    • Malnovaj nomoj: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Novaj klasoj: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Prefere ol uzi eksplicitajn .visible-*klasojn, vi igas elementon videbla simple ne kaŝante ĝin ĉe tiu ekrangrandeco. Vi povas kombini unu .d-*-noneklason kun unu .d-*-blockklaso por montri elementon nur sur difinita intervalo de ekrangrandoj (ekz .d-none.d-md-block.d-xl-none. montras la elementon nur ĉe mezaj kaj grandaj aparatoj).

Notu, ke la ŝanĝoj al la kradaj rompopunktoj en v4 signifas, ke vi devos iri unu rompopunkton pli granda por atingi la samajn rezultojn. La novaj respondemaj utilklasoj ne provas alĝustigi malpli oftajn kazojn kie la videbleco de elemento ne povas esti esprimita kiel ununura apuda gamo de vidportgrandoj; vi anstataŭe devos uzi kutiman CSS en tiaj kazoj.