Source

Migráció a v4-re

A Bootstrap 4 az egész projekt jelentős átírása. A legfigyelemreméltóbb változásokat az alábbiakban foglaljuk össze, majd a releváns összetevőkre vonatkozó konkrétabb változtatásokat.

Stabil változások

A béta 3-ról a stabil v4.0-s kiadásunkra való áttérés során nincsenek törést okozó változások, de vannak jelentős változások.

Nyomtatás

  • Meghibásodott nyomtatási segédprogramok javítása. Korábban egy .d-print-*osztály használata váratlanul felülírt minden más .d-*osztályt. Mostantól megegyeznek a többi megjelenítési segédprogramunkkal, és csak arra az adathordozóra vonatkoznak ( @media print).

  • Kibővítette a rendelkezésre álló nyomtatási megjelenítési segédprogramokat, hogy megfeleljen a többi segédprogramnak. A béta 3 és régebbi verziókban csak block, inline-block, inline, és none. Stabil v4 hozzáadva flex: , inline-flex, table, table-row, és table-cell.

  • Javítva a nyomtatási előnézet megjelenítése a böngészők között új nyomtatási stílusokkal, amelyek meghatározzák a @page size.

A béta 3 változásai

Míg a Beta 2 a béta fázis alatt tapasztalta a törést okozó változtatásaink nagy részét, de még mindig van néhány, amit a Beta 3 kiadásban kezelnünk kell. Ezek a változtatások akkor érvényesek, ha a Béta 2-ről vagy a Bootstrap bármely régebbi verziójáról Béta 3-ra frissít.

Vegyes

  • Eltávolította a nem használt $thumbnail-transitionváltozót. Nem állítottunk át semmit, szóval ez csak extra kód volt.
  • Az npm csomag már nem tartalmaz más fájlokat a forrás- és dist fájljainkon kívül; Ha támaszkodott rájuk, és a szkriptjeinket a node_modulesmappán keresztül futtatta, módosítania kell a munkafolyamatot.

Űrlapok

  • Újraírta az egyéni és az alapértelmezett jelölőnégyzeteket és rádiókat. Most már mindkettőnek egyező HTML-struktúrája van (külső <div>a testvérrel <input>és <label>a ) és ugyanazok az elrendezési stílusok (halmozott alapértelmezés, inline a módosító osztályba). Ez lehetővé teszi számunkra, hogy a bemenet állapota alapján stílusozzuk a címkét, egyszerűsítve az disabledattribútum támogatását (korábban szülőosztályra volt szükség), és jobban támogatja az űrlap érvényesítését.

    Ennek részeként megváltoztattuk a CSS -t background-imageaz egyéni űrlapok jelölőnégyzeteinek és rádióinak több s kezeléséhez. Korábban a most eltávolított .custom-control-indicatorelemhez tartozott a háttérszín, a színátmenet és az SVG ikon. A háttérszínátmenet testreszabása azt jelentette, hogy minden alkalommal le kellett cserélni ezeket, amikor csak egyet kellett módosítani. Most megvan .custom-control-label::beforea kitöltés és a színátmenet, valamint .custom-control-label::afteraz ikon kezelése.

    Egyéni, soron belüli ellenőrzéshez adja hozzá a következőt .custom-control-inline:

  • Frissített választó a beviteli alapú gombcsoportokhoz. [data-toggle="buttons"] { }A stílus és viselkedés helyett csak a JS-viselkedésekre használjuk az attribútumot, és egy új osztályra datahagyatkozunk a stílushoz..btn-group-toggle

  • Eltávolított .col-form-legendjavára egy kissé javított .col-form-label. Így .col-form-label-smés .col-form-label-lgkönnyedén használható <legend>elemeken.

  • Az egyéni $custom-file-textfájlbemenetek Sass-változója módosult. Ez már nem egy beágyazott Sass térkép, és már csak egy karakterláncot működtet – a Browsegomb, mivel ez az egyetlen pszeudoelem, amelyet a Sassunk generál. A Choose fileszöveg most a .custom-file-label.

Beviteli csoportok

  • A beviteli csoport-kiegészítők mostantól a bemenethez viszonyított elhelyezésükre vonatkoznak. Abbahagytuk .input-group-addonés .input-group-btnkét új osztályra, .input-group-prependés .input-group-append. Kifejezetten hozzáfűzést vagy előtagot kell most használnia, ezzel leegyszerűsítve a CSS-ünk nagy részét. A hozzáfűzésben vagy az előtagban helyezze el a gombokat úgy, ahogyan bárhol máshol léteznének, de a szöveget csomagolja be .input-group-text.

  • Az érvényesítési stílusok már támogatottak, csakúgy, mint a több bemenet (bár csoportonként csak egy bemenetet érvényesíthet).

  • A méretosztályoknak a szülőn kell szerepelniük .input-group, nem pedig az egyes űrlapelemeken.

Változások a béta 2-ben

A bétaverzió során arra törekszünk, hogy ne legyenek átütő változások. A dolgok azonban nem mindig a tervek szerint alakulnak. Az alábbiakban felsoroljuk azokat a változásokat, amelyeket szem előtt kell tartani, amikor Béta 1-ről béta 2-re váltunk.

Törés

  • Eltávolított $badge-colorváltozó és használata a következőn .badge: Színkontraszt függvényt használunk, hogy a coloralapján válasszunk egyet background-color, így a változó szükségtelen.
  • grayscale()A függvény átnevezve a következőre, hogy elkerülje a CSS natív szűrővel gray()való ütközést .grayscale
  • Átnevezve .table-inverse, .thead-inverse, és .thead-default-ra .*-darkés -re, .*-lighta máshol használt színsémáinknak megfelelően.
  • A reszponzív táblák mostantól osztályokat generálnak minden rács töréspontjához. Ez annyiban különbözik a Béta 1-től, hogy az .table-responsiveÖn által használt változat inkább a .table-responsive-md. Most .table-responsivevagy .table-responsive-{sm,md,lg,xl}szükség szerint használhatja.
  • A Bower támogatása megszűnt, mivel a csomagkezelőt az alternatívák (pl. Yarn vagy npm) miatt elavulttá vált. A részletekért lásd: bower/bower#2298 .
  • A Bootstrap használatához továbbra is a jQuery 1.9.1 vagy újabb verziója szükséges, de javasoljuk a 3.x verzió használatát, mivel a v3.x által támogatott böngészők azok, amelyeket a Bootstrap támogat, valamint a v3.x tartalmaz néhány biztonsági javítást.
  • Eltávolította a nem használt .form-control-labelosztályt. Ha használta ezt az osztályt, akkor ez annak az .col-form-labelosztálynak a másolata volt, amely függőlegesen középre helyezte az <label>a-t a hozzá tartozó bemenettel vízszintes űrlapelrendezésekben.
  • color-yiqA tulajdonságot tartalmazó mixinről olyan függvényre változott color, amely értéket ad vissza, így bármely CSS-tulajdonhoz használhatja. Például a helyett a következőt color-yiq(#000)írnád : color: color-yiq(#000);.

Kiemelések

  • Új pointer-eventsfelhasználási módot vezetett be a modálokon. A külső az egyéni kattintáskezeléshez (lehetővé téve, hogy csak figyeljen minden kattintásra) .modal-dialogaz eseményeken halad keresztül , majd ellensúlyozza az aktuális eseményeket a -val .pointer-events: none.modal-backdrop.modal-contentpointer-events: auto

Összegzés

Itt vannak azok a nagy jegyek, amelyekre érdemes figyelni, amikor v3-ról v4-re vált.

Böngésző támogatás

  • Megszűnt az IE8, IE9 és iOS 6 támogatása. A v4 már csak IE10+ és iOS 7+. Azoknál a webhelyeknél, amelyeknek ezek valamelyikére van szükségük, használja a v3-at.
  • Hivatalos támogatás hozzáadva az Android v5.0 Lollipop böngészőhöz és a WebView-hoz. Az Android Browser és WebView korábbi verziói csak nem hivatalosan támogatottak.

Globális változások

  • A Flexbox alapértelmezés szerint engedélyezve van. Általánosságban ez azt jelenti, hogy el kell távolodni az úszóktól és még többet alkatrészeink között.
  • A Less -ről a Sass -ra váltottunk a forrás CSS-fájljainknál.
  • Átváltott pxaz remelsődleges CSS-egységünkre, bár a képpontokat továbbra is a médialekérdezésekhez és a rács viselkedéséhez használják, mivel az eszközök nézetablakát nem befolyásolja a típus mérete.
  • A globális betűméret növelve 14px-ról -ra 16px.
  • Megújították a rácsszinteket, hogy hozzáadjanak egy ötödik opciót (a kisebb eszközök megszólítása a 576pxvagy az alatta), és eltávolították a -xsbeillesztést ezekből az osztályokból. Példa: .col-6.col-sm-4.col-md-3.
  • A külön választható témát SCSS-változókon keresztül konfigurálható opciókra cserélte (pl. $enable-gradients: true).
  • Az építési rendszert felülvizsgálták, hogy a Grunt helyett npm-szkripteket használjon. Tekintse package.jsonmeg az összes szkriptet, vagy a projektünk readme-jét a helyi fejlesztési igényekhez.
  • A Bootstrap nem reagáló használata már nem támogatott.
  • Elhagyta az online testreszabást a kiterjedtebb telepítési dokumentáció és testreszabott összeállítások javára.
  • Több tucat új segédprogram-osztály került hozzáadásra a gyakori CSS-tulajdonság-érték párokhoz és a margó/kitöltés billentyűparancsokhoz.

Rács rendszer

  • Átkerült a flexboxba.
    • Hozzáadott támogatás a flexboxhoz a grid mixinekben és az előre meghatározott osztályokban.
    • A flexbox részeként tartalmazza a függőleges és vízszintes igazítási osztályok támogatását.
  • Frissített rácsosztálynevek és új rácsszint.
    • Alább egy új smrácsszint került hozzáadásra 768pxa részletesebb vezérlés érdekében. Jelenleg xs, sm, md, lgés xl. Ez azt is jelenti, hogy minden szint egy szinttel feljebb került (tehát .col-md-6a v3-ban már .col-lg-6a v4-ben).
    • xsA grid osztályokat úgy módosították, hogy ne legyen szükség az infixre annak pontosabb megjelenítéséhez, hogy stílusokat kezdenek alkalmazni, min-width: 0nem pedig egy beállított pixelértéknél. Ahelyett .col-xs-6, hogy most .col-6. Az összes többi rácsszinthez szükség van az infixre (pl. sm).
  • Frissített rácsméretek, keverések és változók.
    • A rácsos ereszcsatornák mostantól rendelkeznek Sass térképpel, így minden törésponton megadhat konkrét ereszcsatorna-szélességeket.
    • Frissített grid mixins egy make-col-readyelőkészítő mixin használatához és a make-cola flexés max-widthaz egyedi oszlopméret beállításához.
    • Megváltoztatták a rácsrendszer médialekérdezési töréspontjait és a tárolószélességeket, hogy figyelembe vegyék az új rácsszintet, és biztosítsák, hogy az oszlopok 12maximális szélességüknél egyenletesen oszthatók legyenek.
    • A rács töréspontjait és a konténerszélességeket mostantól Sass térképek ( $grid-breakpointsés $container-max-widths) kezelik néhány különálló változó helyett. Ezek teljesen lecserélik a @screen-*változókat, és lehetővé teszik a rácsszintek teljes testreszabását.
    • A médialekérdezések is megváltoztak. Ahelyett, hogy minden alkalommal megismételnénk a médialekérdezés deklarációit ugyanazzal az értékkel, most a következővel rendelkezünk @include media-breakpoint-up/down/only. Írás helyett most @media (min-width: @screen-sm-min) { ... }írhatsz @include media-breakpoint-up(sm) { ... }.

Alkatrészek

  • Ledobott panelek, bélyegképek és mélyedések egy új, mindent átfogó komponenshez, a kártyákhoz .
  • Eldobta a Glyphicons ikon betűtípusát. Ha ikonokra van szüksége, néhány lehetőség a következő:
  • Eldobta az Affix jQuery beépülő modult.
    • Javasoljuk, hogy használja position: stickyhelyette. Tekintse meg a HTML5 Kérjük, lépjen be a részletekért és a konkrét többkitöltési javaslatokért. Az egyik javaslat egy @supportsszabály alkalmazása a megvalósításhoz (pl. @supports (position: sticky) { ... })/
    • Ha az Affix-et használta további, nem positionstílusok alkalmazására, előfordulhat, hogy a polifill-ek nem támogatják az Ön használati esetét. Az ilyen felhasználások egyik lehetősége a harmadik féltől származó ScrollPos-Styler könyvtár.
  • Eldobta a pager komponenst , mivel lényegében kissé testreszabott gombok voltak.
  • Szinte az összes összetevőt átdolgoztuk , hogy több beágyazott osztályválasztót használjanak a túlzottan meghatározott gyermekválasztók helyett.

Összetevő szerint

Ez a lista összetevőnként kiemeli a v3.xx és a 4.0.0 közötti legfontosabb változtatásokat.

Indítsa újra

A Bootstrap 4 újdonsága a Reboot , egy új stíluslap, amely a Normalize-re épít saját, némileg véleménynyilvánított visszaállítási stílusunkkal. Az ebben a fájlban megjelenő kijelölők csak elemeket használnak – itt nincsenek osztályok. Ez elkülöníti a visszaállítási stílusainkat az összetevőstílusainktól a modulárisabb megközelítés érdekében. A legfontosabb alaphelyzetbe állítások közé tartozik a sok elem box-sizing: border-boxmegváltoztatása, egységről egységre váltás , emhivatkozásstílusok remés sok űrlapelem visszaállítása.

Tipográfia

  • .text-Az összes segédprogram áthelyezve a _utilities.scssfájlba.
  • Elvetve .page-header, mivel a szegélyen kívül minden stílusa használható segédprogramokon keresztül.
  • .dl-horizontalle lett ejtve. Ehelyett használjon .rowés <dl>használjon rácsoszlop osztályokat (vagy mixineket) a saját <dt>és a <dd>gyermekek számára.
  • Az egyéni <blockquote>stílus átkerült az osztályokba – .blockquoteés a .blockquote-reversemódosítóba.
  • .list-inlinemost megköveteli, hogy az utódlista elemeinél az új .list-inline-itemosztályt alkalmazzák.

Képek

  • Átnevezve .img-responsiveerre: .img-fluid.
  • Átnevezve .img-roundederre.rounded
  • Átnevezve .img-circleerre.rounded-circle

Táblázatok

  • A választó szinte minden példányát >eltávolítottuk, ami azt jelenti, hogy a beágyazott táblák mostantól automatikusan öröklik a stílusokat a szüleiktől. Ez nagymértékben leegyszerűsíti a kiválasztókat és a lehetséges testreszabásokat.
  • A reszponzív táblázatokhoz már nincs szükség burkolóelemre. Ehelyett csak helyezze a .table-responsivejobb oldalt a <table>.
  • A következetesség érdekében átnevezve .table-condensederre :.table-sm
  • Új lehetőség hozzáadva .table-inverse.
  • Táblafejléc módosítók hozzáadva: .thead-defaultés .thead-inverse.
  • A kontextuális osztályokat átnevezte .table--előtaggal. Ezért .active, .success, .warning, .dangerés .info, .table-active, .table-success, és . .table-warning_.table-danger.table-info

Űrlapok

  • Az áthelyezett elem visszaáll a _reboot.scssfájlba.
  • Átnevezve .control-labelerre: .col-form-label.
  • Átnevezte , .input-lgilletve .input-sm-ra .form-control-lgés -re .form-control-sm.
  • .form-group-*Az egyszerűség kedvéért elhagytuk az osztályokat. Használja .form-control-*most helyette az osztályokat.
  • Eldobta .help-block, és a következőre cserélte .form-texta blokkszintű súgószöveghez. A szövegközi súgószöveghez és más rugalmas lehetőségekhez használjon segédprogramosztályokat, például .text-muted.
  • Leesett .radio-inlineés .checkbox-inline.
  • Konszolidált .checkboxés .radioa .form-checkkülönböző .form-check-*osztályokba.
  • Felújított vízszintes formák:
    • Elvetette az .form-horizontalosztálykövetelményt.
    • .form-groupmár nem alkalmaz stílusokat a .rowvia mixinből, ezért .rowa vízszintes rácselrendezésekhez szükséges (pl. <div class="form-group row">).
    • Új osztály hozzáadva az s .col-form-label-vel függőlegesen középre helyezett címkékhez .form-control.
    • Újdonság hozzáadva .form-rowa kompakt formátumú elrendezésekhez a rácsosztályokkal (cserélje fel .rowa-ra, .form-rowés menjen).
  • Egyéni űrlapok támogatása hozzáadva (jelölőnégyzetekhez, rádiókhoz, kijelölésekhez és fájlbevitelekhez).
  • .has-errorA , .has-warning, és .has-successosztályok helyére HTML5-űrlapellenőrzés CSS-en :invalidés :validpszeudoosztályokon keresztül.
  • Átnevezve .form-control-staticerre: .form-control-plaintext.

Gombok

  • Átnevezve .btn-defaulterre: .btn-secondary.
  • Teljesen kihagyta az .btn-xsosztályt, mivel .btn-smarányaiban sokkal kisebb, mint a v3.
  • A jQuery beépülő modul állapotjelző gomb funkciója megszűnt. button.jsEz magában foglalja a $().button(string)és $().button('reset')módszereket. Javasoljuk, hogy ehelyett használjon egy kis egyéni JavaScriptet, ami azzal az előnnyel jár, hogy pontosan úgy viselkedik, ahogyan szeretné.
    • Vegye figyelembe, hogy a beépülő modul többi funkciója (gomb-jelölőnégyzetek, gombrádiók, egyszeri kapcsológombok) megmaradt a 4-es verzióban.
  • Módosítsa a gombokat [disabled]az :disabledIE9+ által támogatott értékre :disabled. Ez azonban fieldset[disabled]továbbra is szükséges, mert a natív letiltott mezőkészletek továbbra is hibásak az IE11-ben .

Gombcsoport

  • A komponens újraírása flexbox segítségével.
  • Eltávolítva .btn-group-justified. Csereként használhatja <div class="btn-group d-flex" role="group"></div>az elemek körüli burkolóanyagként .w-100.
  • Az osztály teljes egészében kimaradt a (z .btn-group-xs) eltávolítása miatt .btn-xs.
  • Eltávolítottuk az explicit térközt a gombcsoportok között a gomb eszköztáraiban; használja most a margin segédprogramokat.
  • Továbbfejlesztett dokumentáció más alkatrészekkel való használatra.
  • Szülőválasztókról szinguláris osztályokra váltott az összes összetevő, módosító stb.
  • Egyszerűsített legördülő menüstílusok, hogy többé ne kerüljön szállításra a felfelé vagy lefelé mutató nyilak a legördülő menühöz.
  • A legördülő menük most <div>s vagy <ul>s segítségével is létrehozhatók.
  • Újraépített legördülő stílusok és jelölések, hogy egyszerű, beépített támogatást nyújtsanak a <a>legördülő <button>elemekhez.
  • Átnevezve .dividererre: .dropdown-divider.
  • A legördülő elemekhez most a következőre van szükség .dropdown-item.
  • A legördülő kapcsolókhoz már nincs szükség explicit <span class="caret"></span>; ez most automatikusan elérhető CSS-en keresztül a ::afterkövetkező napon: .dropdown-toggle.

Rács rendszer

  • 576pxÚj rács töréspont hozzáadva a néven sm, ami azt jelenti, hogy összesen öt szint van ( xs, sm, md, lg, és xl).
  • Átnevezte a reszponzív rácsmódosító osztályokat .col-{breakpoint}-{modifier}-{size}-ról .{modifier}-{breakpoint}-{size}-ra az egyszerűbb rácsosztályok érdekében.
  • Elhagyták a push és pull módosító osztályokat az új flexbox-alapú orderosztályokhoz. Például a .col-8.push-4és helyett .col-4.pull-8használja a .col-8.order-2és .col-4.order-1.
  • Hozzáadott flexbox segédprogram osztályok a rácsrendszerhez és az alkatrészekhez.

Csoportok listázása

  • A komponens újraírása flexbox segítségével.
  • Lecserélve a.list-group-itemegy explicit osztályra, .list-group-item-actiona listacsoport elemeinek hivatkozás- és gombváltozatainak stílusozásához.
  • Hozzáadott .list-group-flushosztály a kártyákkal való használatra.
  • A komponens újraírása flexbox segítségével.
  • A flexboxra való áttérés miatt a fejlécben lévő elvetési ikonok igazítása valószínűleg megszakad, mivel már nem használunk úszót. A lebegtetett tartalom az első, de a flexbox esetében ez már nem így van. Frissítse az elvetési ikonokat, hogy a javítandó modális címek után következzenek.
  • Az remoteopció (amely külső tartalom automatikus betöltésére és modálba történő beillesztésére használható) és a megfelelő loaded.bs.modalesemény eltávolításra került. Javasoljuk, hogy ehelyett használjon ügyféloldali sablont vagy adat-összerendelési keretrendszert, vagy maga hívja meg a jQuery.load fájlt .
  • A komponens újraírása flexbox segítségével.
  • Szinte az összes >választót elvetettük az egyszerűbb stílus érdekében a nem beágyazott osztályokon keresztül.
  • A HTML-specifikus szelektorok, például a .nav > li > a, helyett külön osztályokat használunk az .navs, .nav-items és .nav-links számára. Ez rugalmasabbá teszi a HTML-kódot, miközben növeli a bővíthetőséget.

A navigációs sávot teljesen átírták a flexboxban, javítva az igazítást, a reakciókészséget és a testreszabást.

  • Az adaptív navigációs sáv viselkedését a rendszer mostantól alkalmazza az .navbarosztályra a kötelezően .navbar-expand-{breakpoint} keresztül, ahol kiválaszthatja, hogy hol szeretné összecsukni a navigációs sávot. Korábban ez egy kevésbé változó módosítás volt, és újrafordítást igényelt.
  • .navbar-defaultmost van .navbar-light, bár .navbar-darkugyanaz marad. Ezek közül egy minden navigációs sávon kötelező. Ezek az osztályok azonban már nem állítanak be background-colors-t; ehelyett lényegében csak hatnak color.
  • A navigációs sávokhoz most valamilyen háttérdeklaráció szükséges. Válasszon háttér-segédprogramjaink közül ( .bg-*), vagy állítsa be a sajátját a fenti light/inverz osztályokkal az őrült testreszabáshoz .
  • A flexbox stílusok miatt a navigációs sávok mostantól flexbox segédprogramokat is használhatnak az egyszerű igazítási lehetőségekhez.
  • .navbar-togglemost .navbar-togglervan, és különböző stílusokkal és belső jelölésekkel rendelkezik (nem több három <span>s).
  • Teljesen elhagyta az .navbar-formosztályt. Már nincs rá szükség; ehelyett csak .form-inlineszükség szerint használja és alkalmazza a margin segédprogramokat.
  • A navigációs sávok már nem tartalmazzák margin-bottomvagy border-radiusalapértelmezés szerint. Szükség szerint használja a segédprogramokat.
  • Az összes navigációs sávot tartalmazó példát frissítettük, hogy új jelöléseket tartalmazzon.

Lapszámozás

  • A komponens újraírása flexbox segítségével.
  • Az explicit osztályok ( .page-item, .page-link) kötelezőek az .paginations leszármazottainál
  • Teljesen eldobta az .pagerösszetevőt, mivel alig volt több, mint testreszabott körvonalgombok.
  • Az s .breadcrumb-itemleszármazottainál most egy explicit osztályra van szükség,.breadcrumb

Címkék és jelvények

  • Átnevezve .labela következőre, .badgehogy egyértelművé tegye az <label>elemet.
  • Eldobta az .badgealkatrészt, mivel majdnem teljesen megegyezett a címkékkel. A lekerekített megjelenés érdekében használja a .badge-pillmódosítót a címkekomponenssel együtt.
  • A jelvények már nem kerülnek automatikusan lebegtetésre a listacsoportokban és egyéb összetevőkben. Ehhez most közüzemi osztályokra van szükség.
  • .badge-defaultki lett dobva, és .badge-secondaryhozzá lett adva, hogy megfeleljen a máshol használt komponensmódosító osztályoknak.

Panelek, miniatűrök és kutak

Teljesen leesett az új kártyakomponens miatt.

Panelek

  • .panel-hoz .card, immár flexbox-szal építve.
  • .panel-defaulteltávolították és nincs csere.
  • .panel-groupeltávolították és nincs csere. .card-groupnem helyettesítés, hanem más.
  • .panel-headingnak nek.card-header
  • .panel-titlehogy .card-title. A kívánt megjelenéstől függően érdemes lehet címsorelemeket vagy osztályokat (pl <h3>. , .h3) vagy félkövér elemeket vagy osztályokat (pl . <strong>, <b>, .font-weight-bold) is használni. Vegye figyelembe, hogy .card-titlebár a név hasonló, más megjelenést hoz létre, mint a .panel-title.
  • .panel-bodynak nek.card-body
  • .panel-footernak nek.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, és .panel-dangerkimaradtak a .bg-, .text-, és a Sass térképünkből .bordergenerált segédprogramokhoz .$theme-colors

Előrehalad

  • A környezetfüggő .progress-bar-*osztályokat .bg-*segédprogramokra cserélte. Például class="progress-bar progress-bar-danger"lesz class="progress-bar bg-danger".
  • .activeAz animált folyamatjelző sávok helyére .progress-bar-animated.
  • A tervezés és a stílus egyszerűsítése érdekében az egész alkatrészt átdolgoztuk. Kevesebb felülírható stílust, új indikátorokat és új ikonokat kínálunk.
  • Minden CSS beágyazott és át lett nevezve, biztosítva, hogy minden osztály előtagja legyen .carousel-.
    • A körhinta elemeknél a , .next, .prev, .leftés .rightjelenleg .carousel-item-next, .carousel-item-prev, .carousel-item-left, és .carousel-item-right.
    • .itemmost is van .carousel-item.
    • Az előző/következő vezérlőknél a .carousel-control.rightés .carousel-control.lefta most .carousel-control-nextés a .carousel-control-prev, ami azt jelenti, hogy már nem igényelnek meghatározott alaposztályt.
  • Eltávolított minden reszponzív stílust, a segédprogramokra (pl. feliratok megjelenítése bizonyos nézetablakban) és szükség szerint egyéni stílusokra.
  • Eltávolították a képfelülírásokat a körhinta elemekben lévő képekről, átadva a segédprogramoknak.
  • A Carousel példát módosítottuk, hogy tartalmazza az új jelölést és stílusokat.

Táblázatok

  • Eltávolítottuk a stílusos beágyazott táblázatok támogatását. A 4-es verzióban mostantól minden táblázatstílus öröklődik az egyszerűbb kijelölők érdekében.
  • Inverz táblázatváltozat hozzáadva.

segédprogramok

  • Kijelző, rejtett és egyebek:
    • A megjelenítő segédprogramokat érzékenyvé tette (pl. .d-noneés d-{sm,md,lg,xl}-none).
    • Eldobta a .hidden-*segédprogramok nagy részét az új megjelenítési segédprogramokhoz . Például a helyett .hidden-sm-uphasználja a .d-sm-none. Átnevezte a .hidden-printsegédprogramokat a megjelenítési segédprogram elnevezési séma használatára. További információ az oldal Reszponzív segédprogramok szakaszában található.
    • Osztályok hozzáadva .float-{sm,md,lg,xl}-{left,right,none}az adaptív lebegésekhez, és eltávolítva .pull-left, és .pull-rightmivel redundánsak a .float-leftés .float-right.
  • Típus:
    • Reszponzív variációkat adtunk a szövegigazítási osztályainkhoz .text-{sm,md,lg,xl}-{left,center,right}.
  • Igazítás és térköz:
  • A Clearfix frissítve, hogy megszűnjön a régebbi böngészőverziók támogatása.

Szállítói előtag mixins

A Bootstrap 3 gyártói előtag - keverői, amelyek a 3.2.0-s verzióban elavultak, a Bootstrap 4-ben megszűntek. Mivel az Autoprefixert használjuk , már nincs rájuk szükség.

Eltávolította a következő keverékeket : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform,translatetranslate3duser-select

Dokumentáció

A dokumentációnk is átfogó frissítést kapott. Íme a mélypont:

  • Még mindig a Jekyll-t használjuk, de vannak beépülő moduljaink a keverékben:
    • bugify.rbA böngészőhibák oldalunkon található bejegyzések hatékony felsorolására szolgál .
    • example.rbaz alapértelmezett highlight.rbbeépülő modul egyéni elágazása, amely megkönnyíti a példakódok kezelését.
    • callout.rbennek egy hasonló egyedi formája, de speciális dokumentumfeliratainkhoz készült.
    • markdown-block.rbMarkdown kódrészletek megjelenítésére szolgál HTML-elemekben, például táblázatokban.
    • A jekyll-toc a tartalomjegyzékünk létrehozására szolgál.
  • Az összes dokumentumtartalom átírásra került Markdown-ban (HTML helyett) a könnyebb szerkesztés érdekében.
  • Az oldalakat átszervezték az egyszerűbb tartalom és a könnyebben elérhető hierarchia érdekében.
  • Áttértünk a normál CSS-ről az SCSS-re, hogy teljes mértékben kiaknázzuk a Bootstrap változóit, mixeit és egyebeket.

Érzékeny segédprogramok

Az összes @screen-változót eltávolítottuk a 4.0.0-s verzióban. Használja helyette a media-breakpoint-up(), media-breakpoint-down(), vagy media-breakpoint-only()a Sass mixint vagy a $grid-breakpointsSass térképet.

Reszponzív segédprogram-osztályainkat nagyrészt eltávolítottuk az explicit displaysegédprogramok javára.

  • A .hiddenés .showosztályokat eltávolítottuk, mert ütköztek a jQuery $(...).hide()és $(...).show()metódusokkal. Ehelyett próbálja meg váltani az [hidden]attribútumot, vagy használjon soron belüli stílusokat, például style="display: none;"és style="display: block;".
  • Minden .hidden-osztályt eltávolítottunk, kivéve az átnevezett nyomtatási segédprogramokat.
    • Eltávolítva a v3-ból:.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
    • Eltávolítva a v4 alfa verzióból:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • A nyomtatási segédprogramok már nem .hidden-vagy -vel kezdődnek .visible-, hanem -vel .d-print-.
    • Régi nevek: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Új osztályok: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Explicit osztályok használata helyett .visible-*úgy tesz láthatóvá egy elemet, hogy egyszerűen nem rejti el az adott képernyőméretnél. Kombinálhat egy .d-*-noneosztályt egy .d-*-blockosztállyal, hogy egy elemet csak adott képernyőméret-intervallumban jelenítsen meg (pl .d-none.d-md-block.d-xl-none. csak közepes és nagy eszközökön jelenítse meg az elemet).

Vegye figyelembe, hogy a rács töréspontjainak módosítása a 4-es verzióban azt jelenti, hogy egy törésponttal nagyobbra kell lépnie, hogy ugyanazokat az eredményeket érje el. Az új reszponzív segédprogram-osztályok nem tesznek kísérletet olyan ritkábban előforduló esetekre, amikor egy elem láthatósága nem fejezhető ki a nézetablak méreteinek egyetlen összefüggő tartományaként; ilyen esetekben ehelyett egyéni CSS-t kell használnia.