v5'e geçiş

v4'ten v5'e geçiş yapmanıza yardımcı olmak için Bootstrap kaynak dosyalarında, belgelerde ve bileşenlerde yapılan değişiklikleri izleyin ve inceleyin.

Bu sayfada

v5.2.0

Yenilenmiş tasarım

Bootstrap v5.2.0, proje genelindeki bir avuç bileşen ve özellik için, özellikle düğmelerdeki ve form kontrollerindeki iyileştirilmiş değerler aracılığıylaborder-radius , incelikli bir tasarım güncellemesine sahiptir . Belgelerimiz ayrıca yeni bir ana sayfa, kenar çubuğunun bölümlerini artık daraltmayan daha basit belge düzeni ve Önyükleme Simgelerinin daha belirgin örnekleriyle güncellendi .

Daha fazla CSS değişkeni

Tüm bileşenlerimizi CSS değişkenlerini kullanacak şekilde güncelledik. Sass hala her şeyin temelini oluşturuyor olsa da, her bir bileşen, bileşen temel sınıflarında (örneğin, .btn) CSS değişkenlerini içerecek şekilde güncellendi ve Bootstrap'in daha gerçek zamanlı özelleştirilmesine izin verdi. Sonraki sürümlerde, CSS değişkenleri kullanımımızı düzenimize, formlarımıza, yardımcılarımıza ve yardımcı programlarımıza genişletmeye devam edeceğiz. Her bir bileşendeki CSS değişkenleri hakkında ilgili dokümantasyon sayfalarında daha fazlasını okuyun.

Bootstrap 6'ya kadar CSS değişken kullanımımız biraz eksik olacaktır. Bunları her yerde tam olarak uygulamak istesek de, kırılma değişikliklerine neden olma riskini taşırlar. Örneğin, kaynak kodumuzda ayar yapmak , herhangi bir nedenle $alert-border-width: var(--bs-border-width)yapıyorsanız, kendi kodunuzdaki potansiyel Sass'ı bozar .$alert-border-width * 2

Bu nedenle, mümkün olan her yerde daha fazla CSS değişkenine doğru zorlamaya devam edeceğiz, ancak lütfen uygulamamızın v5'te biraz sınırlı olabileceğini unutmayın.

Yeni`_maps.scss`

Bootstrap v5.2.0, _maps.scss. _variables.scssOrijinal haritaya yapılan güncellemelerin, onları genişleten ikincil haritalara uygulanmaması sorununu gidermek için birkaç Sass haritası çıkarır . Örneğin, temel özelleştirme iş akışlarını bozan güncellemelere $theme-colorsdayanan diğer tema haritalarına uygulanmıyordu . $theme-colorsKısacası, Sass'ın bir varsayılan değişken veya harita kullanıldığında bir kez güncellenemeyeceği bir sınırlaması vardır. Diğer CSS değişkenlerini oluşturmak için kullanıldıklarında CSS değişkenlerinde de benzer bir eksiklik vardır.

Bu nedenle Bootstrap'teki değişken özelleştirmeler 'den sonra gelmelidir @import "functions", ancak @import "variables"içe aktarma yığınımızın geri kalanından önce ve geri kalanından önce. Aynısı Sass haritaları için de geçerlidir; varsayılanları kullanılmadan önce geçersiz kılmalısınız. Aşağıdaki haritalar yenisine taşındı _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Özel Bootstrap CSS derlemeleriniz, ayrı bir harita içe aktarmasıyla artık buna benzer görünmelidir.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Yeni yardımcı programlar

Yarı kalın yazı tipleri için dahil edilecek genişletilmiş font-weightyardımcı programlar ..fw-semibold
Genişletilmiş border-radiusyardımcı programlar , iki yeni boyutu içerecek şekilde .rounded-4ve .rounded-5daha fazla seçenek için .

Ek değişiklikler

$enable-container-classesYeni seçenek tanıtıldı . — Şimdi, deneysel CSS Izgara düzenini seçtiğinizde .container-*, bu seçenek olarak ayarlanmadıkça sınıflar derlenmeye devam edecek false. Konteynerler de artık oluk değerlerini koruyor.
Offcanvas bileşeni artık duyarlı varyasyonlara sahip . Orijinal .offcanvassınıf değişmeden kalır; içeriği tüm görünüm alanlarında gizler. Duyarlı hale getirmek için o .offcanvassınıfı herhangi bir .offcanvas-{sm|md|lg|xl|xxl}sınıfla değiştirin.
Artık daha kalın masa bölücüler etkinleştirildi. — Tablo grupları arasındaki daha kalın ve geçersiz kılınması daha zor olan sınırı kaldırdık ve uygulayabileceğiniz isteğe bağlı bir sınıfa taşıdık, .table-group-divider. Örnek için tablo belgelerine bakın.
Scrollspy, Intersection Observer API'sini kullanmak için yeniden yazılmıştır; bu, artık göreli üst sarmalayıcılara, kullanımdan kaldırılanoffsetyapılandırmalara ve daha fazlasına ihtiyacınız olmadığı anlamına gelir. Gezinme vurgulamalarında daha doğru ve tutarlı olmak için Scrollspy uygulamalarınızı arayın.
Popover'lar ve araç ipuçları artık CSS değişkenlerini kullanıyor. Bazı CSS değişkenleri, değişken sayısını azaltmak için Sass benzerlerinden güncellendi. Sonuç olarak, bu sürümde üç değişken kullanımdan kaldırıldı: $popover-arrow-color, $popover-arrow-outer-color, ve $tooltip-arrow-color.
Yeni .text-bg-{color}yardımcılar eklendi. Bireysel .text-*ve .bg-*yardımcı programları ayarlamak yerine, artık kontrast oluşturan bir ön plan ayarlamak için .text-bg-*yardımcıları kullanabilirsiniz .background-colorcolor
.form-check-reverseEtiketlerin ve ilgili onay kutularının/radyoların sırasını çevirmek için değiştirici eklendi .
Yeni sınıf aracılığıyla tablolara çizgili sütun desteği eklendi ..table-striped-columns

Değişikliklerin tam listesi için GitHub'daki v5.2.0 projesine bakın .

v5.1.0

CSS Izgara düzeni için deneysel destek eklendi . — Bu devam eden bir çalışmadır ve henüz üretimde kullanıma hazır değildir, ancak yeni özelliği Sass aracılığıyla seçebilirsiniz. Etkinleştirmek için, ayarlayarak varsayılan ızgarayı devre dışı bırakın $enable-grid-classes: falseve ayarlayarak CSS Izgarasını etkinleştirin $enable-cssgrid: true.
Offcanvas'ı desteklemek için güncellenmiş gezinme çubukları. - Duyarlı sınıflar ve bazı tuval dışı işaretlemelerle herhangi bir gezinme çubuğuna tuval dışı çekmeceler ekleyin ..navbar-expand-*
Yeni yer tutucu bileşen eklendi . — En yeni bileşenimiz, sitenizde veya uygulamanızda hala bir şeylerin yüklenmekte olduğunu belirtmek için gerçek içerik yerine geçici engellemeler sağlamanın bir yolu.
Daralt eklentisi artık yatay daraltmayı destekliyor . - yerine daraltmak .collapse-horizontaliçin ekleyin . veya ayarlayarak tarayıcıyı yeniden boyamaktan kaçının ..collapsewidthheightmin-heightheight
Yeni yığın ve dikey kural yardımcıları eklendi. — Yığınlarla hızlı bir şekilde özel düzenler oluşturmak için birden çok flexbox özelliğini hızla uygulayın . Yatay ( .hstack) ve dikey ( .vstack) yığınlardan birini seçin. Yeni yardımcılarla<hr> öğelere benzer dikey bölücüler ekleyin ..vr
Yeni global :rootCSS değişkenleri eklendi. - Stilleri :rootkontrol etmek için seviyeye birkaç yeni CSS değişkeni eklendi . <body>Yardımcı programlarımız ve bileşenlerimiz de dahil olmak üzere daha fazlası üzerinde çalışılmaktadır, ancak şimdilik Özelleştirme bölümünde CSS değişkenlerini okuyun .
CSS değişkenlerini kullanmak için renk ve arka plan yardımcı programları elden geçirildi ve yeni metin opaklığı ve arka plan opaklığı yardımcı programları eklendi. — .text-* ve .bg-*yardımcı programlar artık CSS değişkenleri ve rgba()renk değerleriyle oluşturulmuştur ve yeni opaklık yardımcı programlarıyla herhangi bir yardımcı programı kolayca özelleştirmenize olanak tanır.
Bileşenlerimizi nasıl özelleştireceğimizi göstermek için yeni snippet örnekleri eklendi. — Yeni Snippet örneklerimizle özelleştirilmiş bileşenleri ve diğer yaygın tasarım modellerini kullanıma hazır hale getirin . Altbilgileri , açılır listeleri , liste gruplarını ve modelleri içerir .
Yalnızca Popper tarafından işlendiğinden, kullanılmayan konumlandırma stilleri popover'lardan ve araç ipuçlarından kaldırıldı . $tooltip-marginkullanımdan kaldırıldı ve nullsüreçte olarak ayarlandı.

Daha fazla bilgi mi istiyorsunuz? v5.1.0 blog gönderisini okuyun.

Selam! Bootstrap 5'in ilk büyük sürümü olan v5.0.0'da yapılan değişiklikler aşağıda belgelenmiştir. Yukarıda gösterilen ek değişiklikleri yansıtmazlar.

bağımlılıklar

Bırakılan jQuery.
Popper v1.x'ten Popper v2.x'e yükseltildi.
Libsass verilen Sass derleyicimiz kullanımdan kaldırıldığı için Libsass Dart Sass ile değiştirildi.
Belgelerimizi oluşturmak için Jekyll'den Hugo'ya taşındı

tarayıcı desteği

Bırakılan Internet Explorer 10 ve 11
Düşürülmüş Microsoft Edge < 16 (Eski Kenar)
Bırakılan Firefox < 60
Bırakılan Safari < 12
Bırakılan iOS Safari < 12
Düşen Krom < 60

Belge değişiklikleri

Yeniden tasarlanan ana sayfa, doküman düzeni ve alt bilgi.
Yeni Parsel kılavuzu eklendi .
Sass, genel yapılandırma seçenekleri, renk şemaları, CSS değişkenleri ve daha fazlasıyla ilgili yeni ayrıntılarla v4'ün Tema sayfasını değiştirerek yeni Özelleştirme bölümü eklendi .
Tüm form belgelerini yeni Formlar bölümünde yeniden düzenleyerek içeriği daha odaklı sayfalara böldü.
Benzer şekilde, ızgara içeriğini daha net bir şekilde ortaya çıkarmak için Düzen bölümü güncellendi.
"Navs" bileşen sayfası "Navs & Tabs" olarak yeniden adlandırıldı.
“Çekler” sayfasının adı “Çekler ve radyolar” olarak değiştirildi.
Gezinti çubuğunu yeniden tasarladı ve sitelerimizi ve doküman sürümlerimizi dolaşmayı kolaylaştırmak için yeni bir alt gezinme ekledi.
Arama alanı için yeni klavye kısayolu eklendi: Ctrl + /.

küstah

Gereksiz değerleri kaldırmayı kolaylaştırmak için varsayılan Sass eşleme birleştirmelerini kaldırdık. Artık Sass haritalarındaki tüm değerleri aşağıdaki gibi tanımlamanız gerektiğini unutmayın $theme-colors. Sass haritalarıyla nasıl başa çıkacağınıza bakın .
Son DakikaArtık YIQ renk uzayıyla ilgili olmadığı color-yiq()için işlev ve ilgili değişkenler yeniden adlandırıldı . #30168'e bakın.color-contrast()
- $yiq-contrasted-thresholdolarak yeniden adlandırılır $min-contrast-ratio.
- $yiq-text-darkve $yiq-text-lightsırasıyla $color-contrast-darkve olarak yeniden adlandırılır $color-contrast-light.
Son DakikaMedya sorgu karışımları parametreleri daha mantıklı bir yaklaşım için değiştirildi.
- media-breakpoint-down()sonraki kesme noktası yerine kesme noktasının kendisini kullanır (örneğin, ' den daha küçük olan hedef görünüm pencereleri media-breakpoint-down(lg)yerine ).media-breakpoint-down(md)lg
- Benzer şekilde, içindeki ikinci parametre media-breakpoint-between()de sonraki kesme noktası yerine kesme noktasının kendisini kullanır (örneğin, ve arasındaki hedefler görünüm pencereleri media-between(sm, lg)yerine ).media-breakpoint-between(sm, md)smlg
Son DakikaKaldırılan baskı stilleri ve $enable-print-stylesdeğişken. Baskı görüntüleme sınıfları hala etrafta. Bkz. #28339 .
Son DakikaBırakılan color(), theme-color()ve gray()değişkenler lehine işlevler. Bkz. #29083 .
Son DakikaYeniden adlandırılan theme-color-level()işlev, artık yalnızca renkler color-level()yerine istediğiniz herhangi bir rengi kabul ediyor . Bkz. #29083 Dikkat: daha sonra düştü .$theme-color color-level()v5.0.0-alpha3
Son DakikaYeniden adlandırıldı $enable-prefers-reduced-motion-media-queryve kısalık $enable-pointer-cursor-for-buttonsiçin $enable-reduced-motionve için.$enable-button-pointers
Son DakikaMixin'i bg-gradient-variant()kaldırdı. Oluşturulan sınıflar .bg-gradientyerine öğelere degradeler eklemek için sınıfı kullanın ..bg-gradient-*
Son Dakika Daha önce kullanımdan kaldırılan karışımlar kaldırıldı:
- hover, hover-focus, plain-hover-focusvehover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(ayrıca ilişkili yardımcı program sınıfını düşürdü, .text-hide)
- visibility()
- form-control-focus()
Son DakikaSass'ın kendi renk ölçekleme işleviyle çarpışmayı önlemek için yeniden adlandırılan scale-color()işlev .shift-color()
box-shadowmixins artık nulldeğerlere izin veriyor ve birden çok argümandan düşüyor none. #30394'e bakın .
border-radius()Mixin artık varsayılan bir değere sahiptir .

Renk sistemi

Birlikte çalışan color-level()ve $theme-color-intervalyeni bir renk sistemi lehine kaldırılan renk sistemi. Kod tabanımızdaki tüm lighten()ve işlevler ve ile değiştirilir . Bu işlevler, açıklığını sabit bir miktarda değiştirmek yerine rengi beyaz veya siyahla karıştıracaktır. Ağırlık parametresinin pozitif veya negatif olmasına bağlı olarak bir rengi tonlayacak veya gölgeleyecektir . Daha fazla ayrıntı için #30622'ye bakın.darken()tint-color()shade-color()shift-color()
Her renk için yeni renk tonları ve gölgeler eklendi, her temel renk için yeni Sass değişkenleri olarak dokuz ayrı renk sağlandı.
Geliştirilmiş renk kontrastı. WCAG 2.1 AA kontrastını sağlamak için 3:1'den 4,5:1'e yükseltilmiş renk kontrast oranı ve güncellenmiş mavi, yeşil, camgöbeği ve pembe renkler. Ayrıca renk kontrast rengimizi olarak $gray-900değiştirdik $black.
tint-color()Renk sistemimizi desteklemek için renklerimizi uygun şekilde karıştırmak için yeni özel ve shade-color()işlevler ekledik .

Izgara güncellemeleri

Yeni kırılma noktası! ve yukarısı için yeni xxlkesme noktası eklendi. 1400pxDiğer tüm kesme noktalarında değişiklik yok.
Geliştirilmiş oluklar. Oluklar artık rem cinsinden ayarlanmıştır ve v4'ten daha dardır ( 1.5rem, 24pxaşağı yukarı 30px). Bu, ızgara sistemimizin oluklarını boşluk yardımcı programlarımızla hizalar.
- Yatay/dikey olukları, yatay olukları ve dikey olukları kontrol etmek için yeni oluk sınıfı ( .g-*, .gx-*, ve ) eklendi..gy-*
- Son DakikaYeni oluk yardımcı programlarına uyacak .no-guttersşekilde yeniden adlandırıldı ..g-0
Sütunlar artık uygulanmadı, bu nedenle bu davranışı geri yüklemek için bazı öğeler position: relativeeklemeniz gerekebilir ..position-relative
Son Dakika.order-*Sıklıkla kullanılmayan birkaç sınıf düştü . Artık sadece kutudan çıkmayı .order-1sağlıyoruz ..order-5
Son DakikaYardımcı .mediaprogramlarla kolayca kopyalanabileceği için bileşen düşürüldü. Örnek için #28265'e ve esnek yardımcı programlar sayfasına bakın .
Son Dakika bootstrap-grid.cssartık box-sizing: border-boxgenel kutu boyutunu sıfırlamak yerine yalnızca sütun için geçerlidir. Bu sayede ızgara stillerimiz daha fazla yerde parazitlenmeden kullanılabilir.
$enable-grid-classesartık kapsayıcı sınıflarının oluşturulmasını devre dışı bırakmıyor. Bkz. #29146.
make-colKarıştırma, belirli bir boyut olmadan eşit sütunlara varsayılan olarak güncellendi .

İçerik, Yeniden Başlatma vb.

RFS artık varsayılan olarak etkindir. Karıştırmayı kullanan başlıklar, görünüm penceresiyle ölçeklenecek şekildefont-size()otomatik olarak ayarlanacaktırBu özellik daha önce v4 ile etkinleştirilmişti.font-size
Son Dakika$display-*Değişkenlerimizi ve bir $display-font-sizesSass haritasıyla değiştirmek için ekran tipografimizi elden geçirdik. Ayrıca tek ve ayarlanmış bir s $display-*-weightiçin bireysel değişkenler kaldırıldı .$display-font-weightfont-size
İki yeni .display-*başlık boyutu eklendi .display-5ve .display-6.
Belirli bileşenlerin bir parçası olmadıkça, bağlantıların altı varsayılan olarak vurgulanır (yalnızca üzerine gelindiğinde değil).
Stillerini yenilemek ve stil üzerinde daha fazla kontrol için CSS değişkenleriyle yeniden oluşturmak için yeniden tasarlanmış tablolar .
Son Dakikaİç içe tablolar artık stilleri devralmıyor.
Son Dakika .thead-lightve tüm tablo öğeleri ( , , , , ve ) için kullanılabilen değişken sınıfları .thead-darklehine bırakılır ..table-*theadtbodytfoottrthtd
Son DakikaKarışım table-row-variant()yeniden adlandırılır table-variant()ve yalnızca 2 parametreyi kabul eder: $color(renk adı) ve $value(renk kodu). Kenarlık rengi ve vurgu renkleri, tablo faktörü değişkenlerine göre otomatik olarak hesaplanır.
Tablo hücresi doldurma değişkenlerini -yve olarak ayırın -x.
Son DakikaBırakılan .pre-scrollablesınıf. #29135'e bakın
Son Dakika .text-*yardımcı programlar artık bağlantılara vurgulu ve odak durumları eklemiyor. .link-*bunun yerine yardımcı sınıflar kullanılabilir. Bkz. #29267
Son DakikaBırakılan .text-justifysınıf. Bkz. #29793
Son Dakika <hr>öğeleri artık özniteliği daha iyi desteklemek heightyerine kullanıyor. Bu aynı zamanda daha kalın bölücüler (örn., ) oluşturmak için dolgu yardımcı programlarının kullanılmasını sağlar .bordersize<hr class="py-1">
Varsayılan yatay padding-leftaçık <ul>ve öğeleri <ol>tarayıcı varsayılanından 40px.2rem
Medya sorgusu yoluyla azaltılmış hareket isteyen kullanıcılar hariç, küresel olarak $enable-smooth-scrollgeçerli olan eklendi . #31877'ye bakınscroll-behavior: smoothprefers-reduced-motion

sağdan sola

Yatay yöne özel değişkenler, yardımcı programlar ve karışımların tümü, esnek kutu düzenlerinde bulunanlar gibi mantıksal özellikleri kullanmak üzere yeniden adlandırıldı - örneğin startve endyerine leftve right.

Formlar

Yeni yüzen formlar eklendi! Kayan etiketler örneğini tam olarak desteklenen form bileşenlerine yükselttik. Yeni Kayan etiketler sayfasına bakın.
Son Dakika Konsolide yerel ve özel form öğeleri. v4'te yerel ve özel sınıfları olan onay kutuları, radyolar, seçimler ve diğer girdiler birleştirildi. Artık neredeyse tüm form öğelerimiz tamamen özeldir ve çoğu özel HTML'ye ihtiyaç duymaz.
- .custom-control.custom-checkboxşimdi .form-check.
- .custom-control.custom-custom-radioşimdi .form-check.
- .custom-control.custom-switchşimdi .form-check.form-switch.
- .custom-selectşimdi .form-select.
- .custom-fileve .form-fileüstüne özel stiller ile değiştirilmiştir .form-control.
- .custom-rangeşimdi .form-range.
- Bırakılan yerli .form-control-fileve .form-control-range.
Son DakikaDüştü .input-group-appendve .input-group-prepend. Artık sadece düğmeler ve .input-group-textgiriş gruplarının doğrudan çocukları olarak ekleyebilirsiniz.
Doğrulama geri bildirim hatasıyla giriş grubunda uzun süredir devam eden Eksik sınır yarıçapı, doğrulamalı .has-validationgiriş gruplarına ek bir sınıf eklenerek nihayet düzeltildi .
Son Dakika Izgara sistemimiz için forma özgü düzen sınıfları kaldırıldı. .form-group, .form-row, veya yerine kılavuzumuzu ve yardımcı programlarımızı kullanın .form-inline.
Son DakikaForm etiketleri artık .form-label.
Son Dakika .form-textartık set değil display, yalnızca HTML öğesini değiştirerek istediğiniz gibi satır içi veya blok yardım metni oluşturmanıza olanak tanır.
Form kontrolleri artık heightmümkün olduğunda sabit olarak kullanılmamaktadır, bunun yerine min-heightözelleştirmeyi ve diğer bileşenlerle uyumluluğu iyileştirmeyi ertelemiştir.
Doğrulama simgeleri artık <select>s ile birlikte uygulanmamaktadır multiple.
scss/forms/Giriş grubu stilleri de dahil olmak üzere altında yeniden düzenlenmiş kaynak Sass dosyaları .

Bileşenler

paddingUyarılar, içerik haritaları, kartlar, açılır menüler, liste grupları, modlar, açılır öğeler ve araç ipuçları için birleştirilmiş değerler, $spacerdeğişkenimize dayalı olacaktır. #30564'e bakın .

Akordeon

Yeni akordeon bileşeni eklendi .

uyarılar

Uyarıların artık simgelerle örnekleri var .
<hr>Zaten kullandıkları için her uyarıda s için özel stiller kaldırıldı currentColor.

Rozetler

Son DakikaArka plan yardımcı programları için tüm .badge-*renk sınıfları kaldırıldı (örneğin, .bg-primaryyerine kullanın .badge-primary).
Son DakikaBırakıldı .badge-pill— .rounded-pillbunun yerine yardımcı programı kullanın.
Son DakikaÖğeler için fareyle üzerine gelme <a>ve odak stilleri kaldırıldı .<button>
.25em/ .5emile .35em/ arasındaki rozetler için artırılmış varsayılan dolgu .65em.

Galeta unu

padding, background-colorve öğelerini kaldırarak içerik haritalarının varsayılan görünümünü basitleştirdi border-radius.
--bs-breadcrumb-dividerCSS'yi yeniden derlemeye gerek kalmadan kolay özelleştirme için yeni CSS özel özelliği eklendi .

Düğmeler

Son Dakika Onay kutulu veya radyolu geçiş düğmeleri artık JavaScript gerektirmez ve yeni işaretlemeye sahiptir. Artık bir sarma elemanına ihtiyacımız yok, 'ye.btn-checkve<input>onu. #30650'ye bakın . Bununla ilgili dokümanlar, Düğmeler sayfamızdan yeni Formlar bölümüne taşındı..btn<label>
Son Dakika Kamu hizmetleri için düştü .btn-block. .btn-blocküzerinde kullanmak yerine, düğmelerinizi gerektiği kadar boşluk bırakmak için bir yardımcı .btnprogramla sarın . Onlar üzerinde daha da fazla kontrol için duyarlı sınıflara geçin. Bazı örnekler için belgeleri okuyun..d-grid.gap-*
Ek parametreleri desteklemek için bizim button-variant()ve karışımlarımız güncellendi.button-outline-variant()
Fareyle üzerine gelme ve etkin durumlarda daha fazla kontrast sağlamak için güncellenmiş düğmeler.
Devre dışı bırakılan düğmeler artık pointer-events: none;.

kart

Son DakikaŞebekemiz .card-decklehine düştü. Kartlarınızı sütun sınıflarına sarın ve .row-cols-*kart destelerini yeniden oluşturmak için bir ana kap ekleyin (ancak duyarlı hizalama üzerinde daha fazla kontrol ile).
Son Dakika.card-columnsMasonluk lehine düştü . Bkz. #28922 .
Son Dakika.cardTabanlı akordeon yeni bir Akordeon bileşeniyle değiştirildi .

atlıkarınca

Koyu metin, kontroller ve göstergeler için yeni .carousel-darkdeğişken eklendi (daha açık arka planlar için harika).
Döngü kontrolleri için zikzak simgeleri, Bootstrap Icons'tan yeni SVG'lerle değiştirildi .

Kapat düğmesi

Son DakikaDaha az genel bir ad için .closeyeniden adlandırıldı ..btn-close
Kapat düğmeleri artık HTML'de background-imagea yerine bir (gömülü SVG) kullanıyor ve ×işaretlemenize dokunmanıza gerek kalmadan daha kolay özelleştirmeye olanak tanıyor.
Daha yüksek kontrastı etkinleştirmek için kullanılan yeni .btn-close-whitevaryant eklendi, simgeleri daha koyu arka planlara karşı kapatın.filter: invert(1)

Yıkılmak

Akordeonlar için kaydırma sabitlemesi kaldırıldı.

açılır menüler

İsteğe bağlı karanlık açılır menüler için yeni .dropdown-menu-darkdeğişken ve ilişkili değişkenler eklendi.
için yeni değişken eklendi $dropdown-padding-x.
Gelişmiş kontrast için açılır ayırıcıyı kararttı.
Son DakikaAçılır menü için tüm olaylar şimdi açılır menü geçiş düğmesinde tetiklenir ve ardından ana öğeye kadar kabarcıklanır.
Açılır menüler artık açılır menünün data-bs-popper="static"konumu statik olduğunda veya açılır menü gezinme çubuğunda olduğunda ayarlanmış bir özniteliğe sahiptir. Bu, JavaScript'imiz tarafından eklenir ve Popper'ın konumlandırmasına müdahale etmeden özel konum stillerini kullanmamıza yardımcı olur.
Son DakikaYerel Popper flipyapılandırması lehine açılan eklenti seçeneği kaldırıldı. Artık çevirme değiştiricisinde fallbackPlacementsseçenek için boş bir dizi ileterek çevirme davranışını devre dışı bırakabilirsiniz .
Açılır menüler artık otomatik kapanma davranışınıautoClose işlemek için yeni bir seçenekle tıklanabilir . Etkileşimli hale getirmek için açılır menünün içindeki veya dışındaki tıklamayı kabul etmek için bu seçeneği kullanabilirsiniz.
Açılır menüler artık .dropdown-items ile sarılmış <li>s'yi destekliyor.

Jumbotron

Son DakikaYardımcı programlarla çoğaltılabileceği için jumbotron bileşeni düşürüldü. Demo için yeni Jumbotron örneğimize bakın.

Liste grubu

Liste grupları için yeni .list-group-numbereddeğiştirici eklendi.

Gezinmeler ve sekmeler

, , ve için sınıfa yeni nulldeğişkenler eklendi.font-sizefont-weightcolor:hover color.nav-link

gezinme çubukları

Son DakikaGezinme çubukları artık içinde bir kapsayıcı gerektirir (aralık gereksinimlerini ve gerekli CSS'yi büyük ölçüde basitleştirmek için).
Son DakikaSınıf .activeartık .nav-items'ye uygulanamaz, doğrudan .nav-links'ye uygulanmalıdır.

tuval dışı

Yeni tuval dışı bileşeni eklendi .

sayfalandırma

Sayfalandırma bağlantıları artık, margin-leftbirbirinden ayrıldığında tüm köşelerde dinamik olarak yuvarlatılmış olan özelleştirilebilir.
transitionSayfalandırma bağlantılarına s eklendi .

popovers

Son DakikaVarsayılan popover şablonumuzda .arrowyeniden adlandırıldı ..popover-arrow
whiteListSeçenek olarak yeniden adlandırıldı allowList.

İplikçiler

prefers-reduced-motion: reduceDöndürücüler artık animasyonları yavaşlatarak onurlandırıyor . #31882'ye bakın .
İyileştirilmiş spinner dikey hizalaması.

Tostlar

Tostlar artık konumlandırma yardımcı programlarının.toast-container yardımıyla a'ya yerleştirilebilir .
Varsayılan tost süresi 5 saniye olarak değiştirildi.
Tostlardan overflow: hiddençıkarıldı ve işlevlere sahip uygun border-radiuss ile değiştirildi.calc()

Araç ipuçları

Son DakikaVarsayılan araç ipucu şablonumuzda .arrowyeniden adlandırıldı ..tooltip-arrow
Son DakikaPopper öğelerinin daha iyi yerleştirilmesi için varsayılan değer fallbackPlacementsolarak değiştirilir .['top', 'right', 'bottom', 'left']
Son DakikawhiteListSeçenek olarak yeniden adlandırıldı allowList.

Araçlar

Son DakikaRTL desteğinin eklenmesiyle yönlü adlar yerine mantıksal özellik adlarını kullanmak için birkaç yardımcı program yeniden adlandırıldı:
- Yeniden adlandırıldı .left-*ve .right-*için .start-*ve .end-*.
- Yeniden adlandırıldı .float-leftve .float-rightiçin .float-startve .float-end.
- Yeniden adlandırıldı .border-leftve .border-rightiçin .border-startve .border-end.
- Yeniden adlandırıldı .rounded-leftve .rounded-rightiçin .rounded-startve .rounded-end.
- Yeniden adlandırıldı .ml-*ve .mr-*için .ms-*ve .me-*.
- Yeniden adlandırıldı .pl-*ve .pr-*için .ps-*ve .pe-*.
- Yeniden adlandırıldı .text-leftve .text-rightiçin .text-startve .text-end.
Son DakikaVarsayılan olarak devre dışı negatif kenar boşlukları.
'nin arka planını ek öğelere hızlı bir şekilde ayarlamak için yeni .bg-bodysınıf eklendi.<body>
, , ve için yeni konum yardımcı programları eklendi . Değerler , her özellik için , ve içerir.toprightbottomleft050%100%
Mutlak/sabit konumlandırılmış öğeleri yatay veya dikey olarak ortalamak için yeni .translate-middle-xve yardımcı programlar eklendi..translate-middle-y
Yeni border-widthyardımcı programlar eklendi .
Son Dakikaolarak yeniden adlandırıldı .text-monospace..font-monospace
Son Dakika.text-hideArtık kullanılmaması gereken metinleri gizlemek için eski bir yöntem olduğu için kaldırıldı .
.fs-*Yardımcı programlar için yardımcı programlar eklendi font-size(RFS etkinken). Bunlar, HTML'nin varsayılan başlıklarıyla (1-6, büyükten küçüğe) aynı ölçeği kullanır ve Sass haritası aracılığıyla değiştirilebilir.
Son DakikaKısalık ve tutarlılık açısından yeniden adlandırılan .font-weight-*yardımcı programlar ..fw-*
Son DakikaKısalık ve tutarlılık açısından yeniden adlandırılan .font-style-*yardımcı programlar ..fst-*
CSS Izgarası ve esnek kutu düzenleri için yardımcı .d-gridprogramları ve yeni gapyardımcı programları ( ) görüntülemek için eklendi ..gap
Son Dakikave kaldırıldı .rounded-smve rounded-lgyeni bir sınıf ölçeği .rounded-0eklendi .rounded-3. #31687'ye bakın .
Yeni line-heightyardımcı programlar eklendi: .lh-1, .lh-sm, .lh-baseve .lh-lg. Buraya bakın .
.d-noneDiğer görüntüleme yardımcı programlarına göre daha fazla ağırlık vermek için yardımcı programı CSS'mize taşıdık.
.visually-hidden-focusableKullanarak yardımcıyı kapsayıcılar üzerinde de çalışacak şekilde genişletti :focus-within.

yardımcılar

Son Dakika Duyarlı yerleştirme yardımcıları , yeni sınıf adları ve iyileştirilmiş davranışların yanı sıra yararlı bir CSS değişkeni ile oran yardımcıları olarak yeniden adlandırıldı.
- Sınıflar , en boy oranında değiştirilecek şekilde yeniden adlandırıldı by. xÖrneğin .ratio-16by9, şimdi .ratio-16x9.
- .embed-responsive-itemve eleman grubu seçicisini daha basit bir seçicinin lehine bıraktık .ratio > *. Artık sınıfa gerek yok ve oran yardımcısı artık herhangi bir HTML öğesiyle çalışıyor.
- $embed-responsive-aspect-ratiosSass haritası yeniden adlandırıldı ve $aspect-ratiosdeğerleri, sınıf adını ve key: valueçift olarak yüzdeyi içerecek şekilde basitleştirildi.
- Artık CSS değişkenleri oluşturulur ve Sass haritasındaki her değer için dahil edilir. Herhangi bir özel en boy oranı oluşturmak için --bs-aspect-ratioüzerindeki değişkeni değiştirin ..ratio
Son Dakika “Ekran okuyucu” sınıfları artık “görsel olarak gizli” sınıflardır .
- Sass dosyası olarak scss/helpers/_screenreaders.scssdeğiştirildiscss/helpers/_visually-hidden.scss
- Yeniden adlandırıldı .sr-onlyve .sr-only-focusableve.visually-hidden.visually-hidden-focusable
- Yeniden adlandırıldı sr-only()ve ve ile karıştırıldı .sr-only-focusable()visually-hidden()visually-hidden-focusable()
bootstrap-utilities.cssartık yardımcılarımızı da içeriyor. Yardımcıların artık özel yapılarda içe aktarılmasına gerek yok.

JavaScript

JQuery bağımlılığı kaldırıldı ve eklentileri normal JavaScript'te olacak şekilde yeniden yazdı.
Son DakikaTüm JavaScript eklentileri için veri öznitelikleri, Bootstrap işlevselliğini üçüncü taraflardan ve kendi kodunuzdan ayırt etmeye yardımcı olmak için artık ad alanlıdır. Örneğin, data-bs-toggleyerine kullanıyoruz data-toggle.
Tüm eklentiler artık ilk argüman olarak bir CSS seçiciyi kabul edebilir. Eklentinin yeni bir örneğini oluşturmak için bir DOM öğesini veya herhangi bir geçerli CSS seçicisini iletebilirsiniz:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigBootstrap'in varsayılan Popper yapılandırmasını argüman olarak kabul eden bir işlev olarak geçirilebilir, böylece bu varsayılan yapılandırmayı kendi yolunuzla birleştirebilirsiniz. Açılır listeler, açılır pencereler ve araç ipuçları için geçerlidir.
Popper öğelerinin daha iyi yerleştirilmesi için varsayılan değer fallbackPlacementsolarak değiştirilir . Açılır listeler, açılır pencereler ve araç ipuçları için geçerlidir.['top', 'right', 'bottom', 'left']
_getInstance()→ gibi genel statik yöntemlerden alt çizgi kaldırıldı getInstance().