Áttérés 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ők pontosabb módosításait.

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, amivel foglalkoznunk kell a Beta 3 kiadásban. 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, hogy a címkét a bemenet állapota alapján alakítsuk ki, leegyszerű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 lenniük, .input-groupnem 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 továbbra is megköveteli a jQuery 1.9.1-es vagy újabb verzióját, de javasolt a 3.x verzió használata, 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+. Azokhoz a webhelyekhez, 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 egyenletesen oszthatók 12legyenek maximális szélességüknél.
  • 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ő:
  • a Glyphicons upstream verziója
  • Oktikonok
  • Font Awesome
  • Az alternatívák listáját a Kiterjesztés oldalon találja . További javaslatai vannak? Kérjük, nyisson egy kérdést vagy PR-t.
• 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 lapozó komponenst , mivel lényegében kissé testreszabott gombok voltak.
• Szinte az összes összetevőt átépítettük , 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 módosítása, egységről egységre való box-sizing: border-boxáttérés , hivatkozásstílusok és sok űrlapelem visszaállítása.emrem

Tipográfia

• .text-Minden segédprogram áthelyezve a _utilities.scssfájlba.
• Eldobva .page-header, mivel a stílusok segédprogramokon keresztül alkalmazhatók.
• .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.
• Újratervezett idézőjelek, stílusuk áthelyezése az <blockquote>elemből egyetlen osztályba, .blockquote. Eldobta a .blockquote-reverseszöveges segédprogramok módosítóját.
• .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.
• Átnevezve .table-condensederre .table-sma következetesség érdekében.
• Ú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 bővítmény 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 még mindig 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>burkolóként az elemeket a -val .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.

Legördülő menük

• 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ő stílusok, hogy a továbbiakban 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 és helyett a és .col-8.push-4a lehetőséget .col-4.pull-8használja ..col-8.order-2.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.

Modal

• 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 lebegő 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 hívja meg maga a jQuery.load fájlt .

Navs

• 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.

Navbar

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
• Az alkatrészt teljesen eldobta .pager, mivel ez alig volt több, mint testreszabott körvonalgombok.

Zsemlemorzsa

• Az s .breadcrumb-itemleszármazottainál most egy explicit osztályra van szükség,.breadcrumb

Címkék és jelvények

• Konszolidált .labelés .badgeaz <label>elemből való megkülönböztetés és a kapcsolódó összetevők egyszerűsítése.
• Módosítóként hozzáadva .badge-pilla lekerekített „pilla” megjelenéshez.
• 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 csere, 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.

Körhinta

• 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.
  • Osztályok hozzáadva .float-{sm,md,lg,xl}-{left,right,none}az adaptív lebegteté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:
  • Új reszponzív margó és padding segédprogramok minden oldalra, valamint függőleges és vízszintes gyorsírások.
  • Csónaknyi flexbox segédprogram hozzáadva .
  • Lekerült .center-blockaz új .mx-autoosztályra.
• 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.
  • 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.