v4'e geçiş

Bootstrap 4, tüm projenin büyük bir yeniden yazılmasıdır. En dikkate değer değişiklikler aşağıda özetlenmiştir ve ardından ilgili bileşenlerde daha spesifik değişiklikler yapılmıştır.

Kararlı değişiklikler

Beta 3'ten kararlı v4.0 sürümümüze geçerken, herhangi bir kırılma değişikliği yok, ancak bazı önemli değişiklikler var.

Baskı

• Sabit bozuk yazdırma yardımcı programları. Önceden, bir sınıf kullanmak .d-print-*beklenmedik bir şekilde diğer herhangi bir sınıfı geçersiz kılardı .d-*. Şimdi, diğer görüntüleme yardımcı programlarımızla eşleşiyorlar ve yalnızca o ortam için geçerli ( @media print).

• Diğer yardımcı programlarla eşleşecek şekilde genişletilmiş kullanılabilir yazdırma görüntüleme yardımcı programları. Beta 3 ve daha eski sürümlerde yalnızca block, inline-block, inline, ve none. Kararlı v4 eklendi flex, inline-flex, table, table-rowve table-cell.

• belirten yeni baskı stilleriyle tarayıcılar arasında baskı önizleme oluşturma düzeltildi @page size.

Beta 3 değişiklikleri

Beta 2, beta aşamasında önemli değişikliklerimizin çoğunu görmüş olsa da, Beta 3 sürümünde ele alınması gereken birkaç değişiklik daha var. Bu değişiklikler, Beta 2'den veya Bootstrap'ın herhangi bir eski sürümünden Beta 3'e güncelleme yapıyorsanız geçerlidir.

Çeşitli

• $thumbnail-transitionKullanılmayan değişken kaldırıldı . Hiçbir şeyin geçişini yapmıyorduk, bu yüzden sadece ekstra koddu.
• npm paketi artık kaynak ve dist dosyalarımızdan başka dosya içermiyor; bunlara güveniyorsanız ve komut dosyalarımızı node_modulesklasör aracılığıyla çalıştırıyorsanız, iş akışınızı uyarlamanız gerekir.

Formlar

• Hem özel hem de varsayılan onay kutularını ve radyoları yeniden yazdı. Artık her ikisi de eşleşen HTML yapısına (dış <div>kardeş <input>ve <label>) ve aynı düzen stillerine (yığın varsayılan, değiştirici sınıfla satır içi) sahiptir. disabledBu, öznitelik desteğini basitleştirerek (önceden bir üst sınıf gerektiriyordu) ve form doğrulamamızı daha iyi destekleyerek , girdinin durumuna göre etiketi stillendirmemize olanak tanır .

  Bunun bir parçası olarak, background-imageözel form onay kutularında ve radyolarda birden çok s'yi yönetmek için CSS'yi değiştirdik. Önceden, şimdi kaldırılan .custom-control-indicatoröğenin arka plan rengi, degradesi ve SVG simgesi vardı. Arka plan gradyanını özelleştirmek, yalnızca birini değiştirmeniz gerektiğinde hepsini değiştirmek anlamına geliyordu. .custom-control-label::beforeŞimdi, dolgu ve gradyan için elimizde ve .custom-control-label::aftersimgeyi ele alıyoruz.

  Özel bir satır içi kontrol yapmak için ekleyin .custom-control-inline.

• Giriş tabanlı düğme grupları için güncellenmiş seçici. [data-toggle="buttons"] { }Stil ve davranış yerine dataözniteliği yalnızca JS davranışları için kullanırız ve .btn-group-togglestil için yeni bir sınıfa güveniriz.

• .col-form-legendBiraz iyileştirilmiş lehine kaldırıldı .col-form-label. Bu şekilde .col-form-label-smve elemanlar üzerinde kolaylıkla .col-form-label-lgkullanılabilir .<legend>

• $custom-file-textÖzel dosya girişleri, Sass değişkenlerinde bir değişiklik aldı . Artık iç içe geçmiş bir Sass haritası değil ve artık yalnızca bir dizeye güç veriyor - bu Browsedüğme artık Sass'ımızdan üretilen tek sözde öğe. Metin Choose fileşimdi gelen .custom-file-label.

Giriş grupları

• Giriş grubu eklentileri artık bir girişe göre yerleşimlerine özeldir. Bıraktık .input-group-addonve .input-group-btniki yeni sınıf için .input-group-prependve .input-group-append. Şimdi, CSS'mizin çoğunu basitleştiren bir ekleme veya başa ekleme kullanmalısınız. Bir ekleme veya başa ekleme içinde, düğmelerinizi başka herhangi bir yerde olacakları gibi yerleştirin, ancak metni içine sarın .input-group-text.

• Doğrulama stilleri, çoklu girişler gibi artık desteklenmektedir (ancak grup başına yalnızca bir girişi doğrulayabilirsiniz).

• .input-groupBoyutlandırma sınıfları , bireysel form öğelerinde değil, üst öğede olmalıdır .

Beta 2 değişiklikleri

Betadayken, herhangi bir kalıcı değişiklik yapmamayı hedefliyoruz. Ancak işler her zaman planlandığı gibi gitmez. Beta 1'den Beta 2'ye geçerken akılda tutulması gereken önemli değişiklikler aşağıdadır.

Son Dakika

• Kaldırılan $badge-colordeğişken ve kullanımı .badge. color'ye dayalı olarak bir renk kontrastı işlevi kullanırız background-color, bu nedenle değişken gereksizdir.
• CSS yerel filtresiyle çakışmayı önlemek için grayscale()işlev yeniden adlandırıldı .gray()grayscale
• Başka yerlerde kullanılan renk şemalarımızla eşleşen .table-inverse, .thead-inverse, ve .thead-defaultto .*-darkve , yeniden adlandırıldı ..*-light
• Duyarlı tablolar artık her ızgara kesme noktası için sınıflar oluşturur. Bu, .table-responsivekullandığınızın daha çok .table-responsive-md. Artık .table-responsiveveya .table-responsive-{sm,md,lg,xl}gerektiği gibi kullanabilirsiniz.
• Paket yöneticisi alternatifler (örneğin Yarn veya npm) için kullanımdan kaldırıldığı için Bower desteği düşürüldü. Ayrıntılar için çardak/ çardak#2298'e bakın.
• Bootstrap hala jQuery 1.9.1 veya üstünü gerektirir, ancak v3.x'in desteklenen tarayıcıları Bootstrap'in desteklediği tarayıcılar olduğundan ve v3.x'te bazı güvenlik düzeltmeleri bulunduğundan 3.x sürümünü kullanmanız önerilir.
• .form-control-labelKullanılmayan sınıf kaldırıldı . Bu sınıfı kullandıysanız, yatay form düzenlerinde ilişkili girdisiyle .col-form-labeldikey olarak ortalayan sınıfın kopyasıydı.<label>
• color-yiqÖzelliği içeren bir karışımdan, colorherhangi bir CSS özelliği için kullanmanıza izin veren bir değer döndüren bir işleve değiştirildi . Örneğin, yerine color-yiq(#000)yazarsınız color: color-yiq(#000);.

Öne Çıkanlar

• Modallarda yeni pointer-eventskullanım tanıtıldı. Dış kısım, özel tıklama işleme için .modal-dialogolan olaylardan geçer pointer-events: none(sadece herhangi bir tıklamayı dinlemeyi mümkün kılar .modal-backdrop) ve ardından gerçek .modal-contentiçin pointer-events: auto.

Özet

İşte v3'ten v4'e geçerken farkında olmak isteyeceğiniz büyük bilet öğeleri.

tarayıcı desteği

• IE8, IE9 ve iOS 6 desteği kaldırıldı. v4 artık yalnızca IE10+ ve iOS 7+. Bunlardan herhangi birine ihtiyaç duyan siteler için v3 kullanın.
• Android v5.0 Lollipop'un Tarayıcısı ve Web Görünümü için resmi destek eklendi. Android Tarayıcı ve WebView'ün önceki sürümleri yalnızca gayri resmi olarak desteklenmektedir.

Küresel değişiklikler

• Flexbox varsayılan olarak etkindir. Genel olarak bu, bileşenlerimiz arasında yüzer durumdan ve daha fazlasından uzaklaşmak anlamına gelir.
• Kaynak CSS dosyalarımız için Less'ten Sass'a geçildi .
• Birincil CSS birimimiz olarak pxdeğiştirildi rem, ancak cihaz görünümleri tür boyutundan etkilenmediğinden pikseller medya sorguları ve ızgara davranışı için hala kullanılıyor.
• Genel yazı tipi boyutu olarak 14pxartırıldı 16px.
• Beşinci bir seçenek eklemek için yenilenmiş ızgara katmanları (ve altındaki daha küçük cihazlara hitap ediyor ) ve bu sınıflardan ek 576pxkaldırıldı . -xsÖrnek: .col-6.col-sm-4.col-md-3.
• Ayrı isteğe bağlı temayı, SCSS değişkenleri (örn., $enable-gradients: true) aracılığıyla yapılandırılabilir seçeneklerle değiştirdi.
• Derleme sistemi, Grunt yerine bir dizi npm betiği kullanacak şekilde elden geçirildi. Tüm komut dosyaları için bakın package.jsonveya yerel geliştirme ihtiyaçları için proje benioku.
• Bootstrap'in yanıt vermeyen kullanımı artık desteklenmiyor.
• Çevrimiçi Özelleştiriciyi, daha kapsamlı kurulum belgeleri ve özelleştirilmiş yapılar lehine bıraktı.
• Ortak CSS özellik-değer çiftleri ve kenar boşluğu/dolgu aralığı kısayolları için düzinelerce yeni yardımcı program sınıfı eklendi.

ızgara sistemi

• Flexbox'a taşındı.
  • Izgara karışımlarında ve önceden tanımlanmış sınıflarda flexbox desteği eklendi.
  • Flexbox'ın bir parçası olarak, dikey ve yatay hizalama sınıfları için destek dahildir.
• Güncellenmiş ızgara sınıfı adları ve yeni bir ızgara katmanı.
  • Daha ayrıntılı kontrol için aşağıya yeni bir smızgara katmanı eklendi. 768pxArtık elimizde xs, sm, md, lgve var xl. Bu aynı zamanda her seviyenin bir seviye yükseltildiği anlamına gelir (yani .col-md-6v3'te şimdi .col-lg-6v4'te).
  • xsmin-width: 0ızgara sınıfları, stillerin belirli bir piksel değerinde değil de, stilleri uygulamaya başladıklarını daha doğru bir şekilde temsil etmesini gerektirmeyecek şekilde değiştirildi . Yerine .col-xs-6şimdi oldu .col-6. Diğer tüm ızgara katmanları, infix (örneğin, sm) gerektirir.
• Güncellenmiş ızgara boyutları, karışımlar ve değişkenler.
  • Izgara olukları artık bir Sass haritasına sahiptir, böylece her kesme noktasında belirli oluk genişlikleri belirtebilirsiniz.
  • make-col-readyBir hazırlık karışımı kullanmak için güncellenmiş ızgara karışımları ve ayrı sütun boyutlandırma için ve make-colayarlamak için a.flexmax-width
  • Yeni ızgara katmanını hesaba katmak ve sütunların 12maksimum genişliklerinde eşit olarak bölünebilmesini sağlamak için ızgara sistemi medya sorgusu kesme noktaları ve kapsayıcı genişlikleri değiştirildi.
  • Izgara kesme noktaları ve kapsayıcı genişlikleri artık bir avuç ayrı değişken yerine Sass haritaları ( $grid-breakpointsve ) aracılığıyla işleniyor. $container-max-widthsBunlar, @screen-*değişkenleri tamamen değiştirir ve ızgara katmanlarını tamamen özelleştirmenize olanak tanır.
  • Medya sorguları da değişti. Medya sorgu bildirimlerimizi her seferinde aynı değerde tekrarlamak yerine artık @include media-breakpoint-up/down/only. Artık yazmak yerine @media (min-width: @screen-sm-min) { ... }yazabilirsiniz @include media-breakpoint-up(sm) { ... }.

Bileşenler

• Her şeyi kapsayan yeni bir bileşen olan kartlar için bırakılan paneller, küçük resimler ve kuyular .
• Glyphicons simgesi yazı tipini düşürdü. Simgelere ihtiyacınız varsa, bazı seçenekler şunlardır:
  • Glyphicons'un yukarı akış versiyonu
  • Octicons
  • Yazı Tipi Harika
  • Alternatiflerin bir listesi için Genişlet sayfasına bakın . Ek önerileriniz var mı? Lütfen bir konu veya PR açın.
• Affix jQuery eklentisini düşürdü.
  • position: stickyBunun yerine kullanmanızı öneririz . Ayrıntılar ve belirli çoklu dolgu önerileri için HTML5 Lütfen giriş yapın. Bir öneri, @supportsonu uygulamak için bir kural kullanmaktır (örneğin, @supports (position: sticky) { ... })/
  • Ek, positionstil olmayanlar uygulamak için Affix kullanıyorsanız, çoklu dolgular kullanım durumunuzu desteklemeyebilir. Bu tür kullanımlar için bir seçenek, üçüncü taraf ScrollPos-Styler kitaplığıdır.
• Çağrı cihazı bileşeni , temelde biraz özelleştirilmiş düğmeler olduğu için düşürüldü.
• Aşırı spesifik alt seçiciler yerine daha fazla iç içe olmayan sınıf seçicileri kullanmak için neredeyse tüm bileşenler yeniden düzenlendi.

Bileşene göre

Bu liste, v3.xx ve v4.0.0 arasındaki bileşene göre önemli değişiklikleri vurgular.

yeniden başlat

Bootstrap 4'te yeni olan Reboot , Normalize'yi kendi biraz düşünülmüş sıfırlama stillerimizle oluşturan yeni bir stil sayfasıdır. Bu dosyada görünen seçiciler yalnızca öğeleri kullanır; burada sınıf yoktur. Bu, daha modüler bir yaklaşım için sıfırlama stillerimizi bileşen stillerimizden ayırır. Bunun içerdiği en önemli sıfırlamalardan bazıları, birçok öğedeki birimlerden birimlere box-sizing: border-boxgeçiş , embağlantı remstilleri ve birçok form öğesi sıfırlamasıdır.

tipografi

• Tüm .text-yardımcı programları _utilities.scssdosyaya taşıdı.
• Kenarlık .page-headerdışında, tüm stilleri yardımcı programlar aracılığıyla uygulanabileceğinden bırakıldı.
• .dl-horizontaldüşürüldü. Bunun yerine, .rowon <dl>ve alt öğelerinde ızgara sütun sınıflarını (veya karışımlarını) kullanın ve <dt>kullanın <dd>.
• Özel stil, sınıflara ve değiştiriciye <blockquote>taşındı ..blockquote.blockquote-reverse
• .list-inlineşimdi, alt liste öğelerinin kendilerine .list-inline-itemuygulanan yeni sınıfa sahip olmasını gerektiriyor.

Görüntüler

• olarak yeniden adlandırıldı .img-responsive..img-fluid
• .img-roundedyeniden adlandırıldı.rounded
• .img-circleyeniden adlandırıldı.rounded-circle

Tablolar

• Seçicinin neredeyse tüm örnekleri >kaldırılmıştır, yani iç içe geçmiş tablolar artık stilleri üstlerinden otomatik olarak devralacaktır. Bu, seçicilerimizi ve potansiyel özelleştirmelerimizi büyük ölçüde basitleştirir.
• Duyarlı tablolar artık bir sarma öğesi gerektirmez. Bunun yerine, sadece .table-responsivesağı <table>.
• Tutarlılık için .table-condensedyeniden adlandırıldı ..table-sm
• Yeni bir .table-inverseseçenek eklendi.
• Tablo başlığı değiştiricileri eklendi: .thead-defaultve .thead-inverse.
• Bağlamsal sınıflar .table--ön ekine sahip olacak şekilde yeniden adlandırıldı. Dolayısıyla .active, .success, ve için , , , ve . .warning_.danger.info.table-active.table-success.table-warning.table-danger.table-info

Formlar

• _reboot.scssTaşınan öğe dosyaya sıfırlanır .
• olarak yeniden adlandırıldı .control-label..col-form-label
• Yeniden adlandırıldı .input-lgve .input-smsırasıyla .form-control-lgve ve .form-control-sm.
• Sadelik .form-group-*uğruna dersler kaldırıldı. .form-control-*Bunun yerine şimdi sınıfları kullanın .
• Blok düzeyinde yardım metni için düşürüldü .help-blockve değiştirildi . .form-textSatır içi yardım metni ve diğer esnek seçenekler için, gibi yardımcı program sınıflarını kullanın .text-muted.
• Düştü .radio-inlineve .checkbox-inline.
• Konsolide .checkboxve .radioiçine .form-checkve çeşitli .form-check-*sınıflar.
• Yatay formlar elden geçirildi:
  • .form-horizontalSınıf gereksinimini düşürdü .
  • .form-groupartık .rowvia mixin'den stiller uygulamamaktadır, bu nedenle .rowartık yatay ızgara düzenleri için gereklidir (örneğin, <div class="form-group row">).
  • Etiketleri s ile dikey olarak ortalamak için yeni .col-form-labelsınıf eklendi .form-control.
  • .form-rowIzgara sınıfları ile kompakt form düzenleri için yeni eklendi ( .rowbir ile değiştirin .form-rowve gidin).
• Özel form desteği eklendi (onay kutuları, radyolar, seçimler ve dosya girişleri için).
• Değiştirilen .has-error, .has-warningve sınıfları, CSS'ler ve sözde sınıflar .has-successaracılığıyla HTML5 form doğrulaması ile .:invalid:valid
• olarak yeniden adlandırıldı .form-control-static..form-control-plaintext

Düğmeler

• olarak yeniden adlandırıldı .btn-default..btn-secondary
• .btn-xsSınıfı, orantısal olarak v3'lerden çok daha küçük olduğu için tamamen düşürdü .btn-sm.
• jQuery eklentisinin durum bilgisi olan düğme özelliği button.jskaldırıldı. Bu $().button(string)ve $().button('reset')yöntemlerini içerir. Bunun yerine, tam olarak istediğiniz gibi davranma avantajına sahip olacak küçük bir özel JavaScript parçası kullanmanızı öneririz.
  • Eklentinin diğer özelliklerinin (düğme onay kutuları, düğme radyoları, tek geçiş düğmeleri) v4'te korunduğunu unutmayın.
• Düğmeleri IE9+'ın desteklediği [disabled]şekilde değiştirin . Ancak , yerel devre dışı bırakılmış alan kümeleri IE11'de hala sorunlu olduğundan, yine de gereklidir .:disabled:disabledfieldset[disabled]

Düğme grubu

• Bileşeni flexbox ile yeniden yazdı.
• Kaldırıldı .btn-group-justified. <div class="btn-group d-flex" role="group"></div>Bir yedek olarak, öğelerin etrafına sarıcı olarak kullanabilirsiniz .w-100.
• .btn-group-xsTamamen kaldırılması verilen sınıfı düşürdü .btn-xs.
• Düğme araç çubuklarındaki düğme grupları arasındaki açık boşluk kaldırıldı; şimdi kenar boşluğu yardımcı programlarını kullanın.
• Diğer bileşenlerle kullanım için geliştirilmiş belgeler.

açılır menüler

• Tüm bileşenler, değiştiriciler vb. için ana seçicilerden tekil sınıflara geçildi.
• Açılır menüye iliştirilmiş yukarı veya aşağı bakan oklarla artık gönderilmeyecek basitleştirilmiş açılır liste stilleri.
• Açılır listeler artık <div>s veya <ul>s ile oluşturulabilir.
• Açılan öğeler için kolay <a>, yerleşik destek sağlamak için yeniden oluşturulmuş açılır stiller ve işaretleme .<button>
• olarak yeniden adlandırıldı .divider..dropdown-divider
• Açılır öğeler artık .dropdown-item.
• Açılan geçişler artık açık bir <span class="caret"></span>; bu artık CSS'ler aracılığıyla otomatik olarak ::aftersağlanmaktadır .dropdown-toggle.

ızgara sistemi

• Yeni bir 576pxızgara kesme noktası eklendi sm, yani artık toplam beş katman ( xs, sm, md, lg, ve xl) var.
• Daha basit ızgara sınıfları için .col-{breakpoint}-{modifier}-{size}duyarlı ızgara değiştirici sınıfları ile arasında yeniden adlandırıldı ..{modifier}-{breakpoint}-{size}
• Yeni flexbox destekli sınıflar için bırakılan itme ve çekme değiştirici ordersınıfları. Örneğin, and yerine .col-8.push-4ve .col-4.pull-8kullanırsınız ..col-8.order-2.col-4.order-1
• Izgara sistemi ve bileşenleri için flexbox yardımcı sınıfları eklendi.

Liste grupları

• Bileşeni flexbox ile yeniden yazdı.
• Liste grubu öğelerinin bağlantı ve düğme sürümlerini biçimlendirmek a.list-group-itemiçin açık bir sınıfla değiştirildi ..list-group-item-action
• .list-group-flushKartlarla kullanım için sınıf eklendi .

kalıcı

• Bileşeni flexbox ile yeniden yazdı.
• Flexbox'a geçiş yapıldığında, artık kayan nokta kullanmadığımız için başlıktaki kapatma simgelerinin hizalanması muhtemelen bozuldu. Kayan içerik önce gelir, ancak flexbox ile artık durum böyle değil. Düzeltmek için kalıcı başlıklardan sonra gelecek şekilde kapatma simgelerinizi güncelleyin.
• Seçenek ( remoteharici içeriği bir modalın içine otomatik olarak yüklemek ve enjekte etmek için kullanılabilir) ve ilgili loaded.bs.modalolay kaldırıldı. Bunun yerine, istemci tarafı şablon oluşturmayı veya bir veri bağlama çerçevesi kullanmanızı veya jQuery.load'ı kendiniz çağırmanızı öneririz.

Gezinmeler

• Bileşeni flexbox ile yeniden yazdı.
• >Yuvalanmamış sınıflar aracılığıyla daha basit stil için neredeyse tüm seçiciler kaldırıldı.
• gibi HTML'ye özgü seçiciler yerine s, s ve s .nav > li > aiçin ayrı sınıflar kullanıyoruz . Bu, artan genişletilebilirliği beraberinde getirirken HTML'nizi daha esnek hale getirir..nav.nav-item.nav-link

gezinme çubuğu

Gezinme çubuğu, hizalama, yanıt verme ve özelleştirme için geliştirilmiş destekle flexbox'ta tamamen yeniden yazılmıştır.

• Duyarlı gezinme çubuğu davranışları artık , gezinme çubuğunu nereye daraltacağınızı seçtiğiniz gerekli.navbar yer aracılığıyla sınıfa uygulanıyor. Önceden bu, Daha Az değişkenli bir değişiklikti ve yeniden derleme gerektiriyordu. .navbar-expand-{breakpoint}
• .navbar-defaultşimdi .navbar-lightolsa .navbar-darkda aynı kalır. Her gezinme çubuğunda bunlardan biri gereklidir. Ancak, bu sınıflar artık background-colors'yi ayarlamaz; bunun yerine esasen sadece etkilerler color.
• Gezinme çubukları artık bir tür arka plan bildirimi gerektiriyor. Arka plan yardımcı programlarımızdan birini seçin ( ) veya çılgın özelleştirme için.bg-* yukarıdaki ışık/ters sınıflarla kendinizinkini ayarlayın .
• Esnek kutu stilleri verildiğinde, gezinme çubukları artık kolay hizalama seçenekleri için esnek kutu yardımcı programlarını kullanabilir.
• .navbar-toggleşimdi .navbar-togglerve farklı stilleri ve iç işaretlemesi var (üç <span>s'den fazla değil).
• .navbar-formSınıfı tamamen bıraktı . Artık gerekli değil; bunun yerine, gerektiği gibi kenar boşluğu yardımcı programlarını kullanın .form-inlineve uygulayın.
• Gezinme çubukları artık varsayılan olarak margin-bottomveya içermemektedir. border-radiusYardımcı programları gerektiği gibi kullanın.
• Gezinme çubuklarını içeren tüm örnekler, yeni işaretlemeyi içerecek şekilde güncellendi.

sayfalandırma

• Bileşeni flexbox ile yeniden yazdı.
• Açık sınıflar ( .page-item, ) artık s .page-linköğesinin soyundan gelenler için zorunludur.pagination
• .pagerBileşeni, özelleştirilmiş anahat düğmelerinden biraz daha fazlası olduğu için tamamen bıraktı .

Galeta unu

• s öğesinin soyundan gelenler için artık açık bir sınıf, .breadcrumb-item, gereklidir.breadcrumb

Etiketler ve rozetler

• Öğeden belirsizliği gidermek için .labelyeniden adlandırıldı ..badge<label>
• Bileşen .badge, etiketlerle neredeyse aynı olduğu için düşürüldü. .badge-pillBu yuvarlak görünüm için değiştiriciyi etiket bileşeniyle birlikte kullanın .
• Rozetler artık liste gruplarında ve diğer bileşenlerde otomatik olarak yüzdürülmez. Artık bunun için faydalı sınıflar gereklidir.
• .badge-defaultkaldırıldı ve .badge-secondarybaşka bir yerde kullanılan bileşen değiştirici sınıflarıyla eşleşmesi için eklendi.

Paneller, küçük resimler ve kuyular

Yeni kart bileşeni için tamamen düştü.

Paneller

• .paneliçin .card, şimdi flexbox ile inşa edilmiştir.
• .panel-defaultkaldırıldı ve değiştirilmedi.
• .panel-groupkaldırıldı ve değiştirilmedi. .card-groupikame değildir, farklıdır.
• .panel-headingile.card-header
• .panel-titleiçin .card-title. İstenen görünüme bağlı olarak, başlık öğelerini veya sınıflarını (örneğin <h3>, .h3) veya kalın öğeler veya sınıfları (örneğin <strong>, <b>, ) kullanmak da isteyebilirsiniz .font-weight-bold. .card-titleBenzer şekilde adlandırılmış olsa da, 'den farklı bir görünüm ürettiğine dikkat edin .panel-title.
• .panel-bodyile.card-body
• .panel-footerile.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warningve Sass haritamızdan oluşturulan , , ve yardımcı programları .panel-dangeriçin bırakıldı ..bg-.text-.border$theme-colors

İlerlemek

• Bağlamsal .progress-bar-*sınıflar .bg-*yardımcı programlarla değiştirildi. Örneğin, class="progress-bar progress-bar-danger"olur class="progress-bar bg-danger".
• .activeile animasyonlu ilerleme çubukları için değiştirildi .progress-bar-animated.

atlıkarınca

• Tasarım ve stili basitleştirmek için tüm bileşen elden geçirildi. Geçersiz kılmanız için daha az stilimiz, yeni göstergelerimiz ve yeni simgelerimiz var.
• Tüm CSS'ler iç içe geçmiş ve yeniden adlandırılmış, her sınıfın önüne .carousel-.
  • Dönen öğeler için , .next, .prev, .leftve .rightşimdi .carousel-item-next, .carousel-item-prev, .carousel-item-left, ve .carousel-item-right.
  • .itemaynı zamanda şimdi .carousel-item.
  • Önceki/sonraki denetimler için .carousel-control.rightve .carousel-control.leftşimdi .carousel-control-nextve .carousel-control-prev, yani artık belirli bir temel sınıf gerektirmezler.
• Tüm duyarlı stiller kaldırıldı, yardımcı programlara ertelendi (örneğin, belirli görünüm pencerelerinde altyazı gösterme) ve gerektiğinde özel stiller.
• Dönen öğelerdeki görüntüler için kaldırılan görüntü geçersiz kılmaları, yardımcı programlara ertelendi.
• Yeni işaretlemeyi ve stilleri dahil etmek için Carousel örneğinde ince ayar yapıldı.

Tablolar

• Tarzlı iç içe tablolar için destek kaldırıldı. Tüm tablo stilleri artık daha basit seçiciler için v4'te devralınır.
• Ters tablo varyantı eklendi.

Araçlar

• Görüntüleme, gizli ve daha fazlası:
  • Ekran yardımcı programlarını duyarlı hale getirdi (örn . .d-noneve d-{sm,md,lg,xl}-none).
  • .hidden-*Yeni görüntüleme yardımcı programları için yardımcı programların çoğu kaldırıldı . Örneğin, yerine .hidden-sm-upkullanın .d-sm-none. .hidden-printYardımcı programlar, görüntü yardımcı programı adlandırma şemasını kullanacak şekilde yeniden adlandırıldı. Bu sayfanın Duyarlı yardımcı programlar bölümü altında daha fazla bilgi.
  • .float-{sm,md,lg,xl}-{left,right,none}Duyarlı kayan noktalar için sınıflar eklendi ve kaldırıldı .pull-leftve ve için .pull-rightgereksiz olduklarından ..float-left.float-right
• Tip:
  • Metin hizalama sınıflarımıza duyarlı varyasyonlar eklendi .text-{sm,md,lg,xl}-{left,center,right}.
• Hizalama ve boşluk:
  • Tüm taraflar için yeni duyarlı kenar boşluğu ve dolgu yardımcı programlarının yanı sıra dikey ve yatay stenolar eklendi.
  • Tekne yükü flexbox yardımcı programları eklendi .
  • .center-blockYeni .mx-autosınıf için düştü .
• Clearfix, eski tarayıcı sürümleri için desteği bırakacak şekilde güncellendi.

Satıcı önek karışımları

Bootstrap 3'ün v3.2.0'da kullanımdan kaldırılan satıcı önek karışımları, Bootstrap 4'te kaldırılmıştır. Autoprefixer kullandığımız için artık gerekli değiller.

Aşağıdaki karışımlar kaldırıldı : 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-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

belgeler

Belgelerimiz de yönetim kurulu genelinde bir yükseltme aldı. İşte düşük:

• Hala Jekyll kullanıyoruz, ancak karışımda eklentilerimiz var:
  • bugify.rbtarayıcı hataları sayfamızdaki girişleri verimli bir şekilde listelemek için kullanılır .
  • example.rbvarsayılan highlight.rbeklentinin özel bir çatalıdır ve örnek kod işlemeyi kolaylaştırır.
  • callout.rbbuna benzer bir özel çataldır, ancak özel belge açıklamalarımız için tasarlanmıştır.
  • markdown-block.rbtablolar gibi HTML öğeleri içinde Markdown snippet'lerini oluşturmak için kullanılır.
  • jekyll-toc , içindekiler tablomuzu oluşturmak için kullanılır.
• Tüm doküman içeriği, daha kolay düzenleme için Markdown'da (HTML yerine) yeniden yazılmıştır.
• Sayfalar, daha basit içerik ve daha ulaşılabilir bir hiyerarşi için yeniden düzenlendi.
• Bootstrap'in değişkenlerinden, karışımlarından ve daha fazlasından tam olarak yararlanmak için normal CSS'den SCSS'ye geçtik.

Duyarlı yardımcı programlar

Tüm @screen-değişkenler v4.0.0'da kaldırıldı. media-breakpoint-up()Bunun yerine , media-breakpoint-down()veya media-breakpoint-only()Sass karışımlarını veya $grid-breakpointsSass haritasını kullanın .

Duyarlı yardımcı program sınıflarımız, açık yardımcı programlar lehine büyük ölçüde kaldırılmıştır display.

• ve sınıfları .hidden, jQuery ve yöntemleriyle .showçeliştikleri için kaldırıldı . Bunun yerine, niteliği değiştirmeyi deneyin veya ve gibi satır içi stilleri kullanın .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• Yeniden adlandırılan yazdırma yardımcı programları hariç tüm .hidden-sınıflar kaldırıldı.
  • v3'ten kaldırıldı:.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
  • v4 alfalardan kaldırıldı:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Yazdırma yardımcı programları artık .hidden-veya ile başlamaz .visible-, ancak ile başlar .d-print-.
  • Eski isimler: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Yeni sınıflar: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Açık sınıflar kullanmak yerine .visible-*, bir öğeyi o ekran boyutunda gizlemeyerek görünür hale getirirsiniz. Bir öğeyi yalnızca belirli bir ekran boyutu aralığında göstermek için bir sınıfı bir .d-*-nonesınıfla birleştirebilirsiniz (örn . öğeyi yalnızca orta ve büyük aygıtlarda gösterir)..d-*-block.d-none.d-md-block.d-xl-none

v4'teki ızgara kesme noktalarında yapılan değişikliklerin, aynı sonuçları elde etmek için bir kesme noktası daha büyük gitmeniz gerekeceği anlamına geldiğini unutmayın. Yeni duyarlı yardımcı program sınıfları, bir öğenin görünürlüğünün tek bir bitişik görünüm alanı boyutu olarak ifade edilemediği daha az yaygın durumları barındırmaya çalışmaz; bunun yerine bu gibi durumlarda özel CSS kullanmanız gerekecektir.