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.
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-threshold
olarak yeniden adlandırılır$min-contrast-ratio
.$yiq-text-dark
ve$yiq-text-light
sırasıyla$color-contrast-dark
ve 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()
media-breakpoint-down(lg)
sonraki kesme noktası yerinemedia-breakpoint-down(md)
kesme noktasının kendisini kullanır (örnlg
.- 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 pencerelerimedia-between(sm, lg)
yerine ).media-breakpoint-between(sm, md)
sm
lg
-
Son DakikaKaldırılan baskı stilleri ve
$enable-print-styles
değişken. Baskı görüntüleme sınıfları hala etrafta. Bkz. #28339 . -
Son DakikaBırakılan
color()
,theme-color()
vegray()
değişkenler lehine işlevler. Bkz. #29083 . -
Son DakikaYeniden adlandırılan
theme-color-level()
işlev, artık yalnızca renklercolor-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 Dakika
$enable-prefers-reduced-motion-media-query
Kısa ve öz$enable-pointer-cursor-for-buttons
olarak$enable-reduced-motion
yeniden adlandırıldı .$enable-button-pointers
-
Son DakikaMixin'i
bg-gradient-variant()
kaldırdı. Oluşturulan sınıflar.bg-gradient
yerine öğ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-focus
vehover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(ayrıca ilişkili yardımcı program sınıfını da 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-shadow
mixins artıknull
değerlere izin veriyor ve birden çok argümandan düşüyornone
. #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-interval
yeni bir renk sistemi lehine kaldırılan renk sistemi. Kod tabanımızdaki tümlighten()
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-900
değiştirdik$black
. -
tint-color()
Renk sistemimizi desteklemek için renklerimizi uygun şekilde karıştırmak için yeni özel veshade-color()
işlevler ekledik .
Izgara güncellemeleri
-
Yeni kırılma noktası! ve yukarısı için yeni
xxl
kesme noktası eklendi.1400px
Diğ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
,24px
aş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
- Yatay/dikey olukları, yatay olukları ve dikey olukları kontrol etmek için yeni oluk sınıfı (
-
Sütunlar artık uygulanmadı, bu nedenle bu davranışı geri yüklemek için bazı öğeler
position: relative
eklemeniz gerekebilir ..position-relative
-
Son Dakika
.order-*
Sıklıkla kullanılmayan birkaç sınıf düştü . Artık sadece kutudan çıkmayı.order-1
sağlıyoruz ..order-5
-
Son DakikaYardımcı
.media
programlarla 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.css
artıkbox-sizing: border-box
genel 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-classes
artık kapsayıcı sınıflarının oluşturulmasını devre dışı bırakmıyor. Bkz. #29146. -
make-col
Karış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 şekilde
font-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-sizes
Sass haritasıyla değiştirmek için ekran tipografimizi elden geçirdik. Ayrıca tek ve ayarlanmış bir s$display-*-weight
için bireysel değişkenler kaldırıldı .$display-font-weight
font-size
-
İki yeni
.display-*
başlık boyutu eklendi.display-5
ve.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 tablolar yeniden tasarlandı .
-
Son Dakikaİç içe tablolar artık stilleri devralmıyor.
-
Son Dakika
.thead-light
ve tüm tablo öğeleri ( , , , , ve ) için kullanılabilen değişken sınıfların.thead-dark
lehine bırakılır ..table-*
thead
tbody
tfoot
tr
th
td
-
Son DakikaKarışım
table-row-variant()
yeniden adlandırılırtable-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
-y
ve olarak ayırın-x
. -
Son DakikaBırakılan
.pre-scrollable
sı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-justify
sınıf. Bkz. #29793 -
Varsayılan yatay
padding-left
açık<ul>
ve öğeleri<ol>
tarayıcı varsayılanından40px
.2rem
-
Medya sorgusu yoluyla azaltılmış hareket isteyen kullanıcılar hariç, küresel olarak
$enable-smooth-scroll
geçerli olan eklendi . #31877'ye bakınscroll-behavior: smooth
prefers-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
start
veend
yerineleft
veright
.
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-check
şimdi.form-check
..custom-check.custom-switch
şimdi.form-check.form-switch
..custom-select
şimdi.form-select
..custom-file
ve.form-file
üstüne özel stiller ile değiştirilmiştir.form-control
..custom-range
şimdi.form-range
.- Bırakılan yerli
.form-control-file
ve.form-control-range
.
-
Son DakikaDüştü
.input-group-append
ve.input-group-prepend
. Artık sadece düğmeler ve.input-group-text
giriş 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-validation
giriş 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-text
artık set değildisplay
, 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. -
Doğrulama simgeleri artık ile
<select>
s'ye uygulanmıyormultiple
. -
scss/forms/
Giriş grubu stilleri de dahil olmak üzere altında yeniden düzenlenmiş kaynak Sass dosyaları .
Bileşenler
padding
Uyarı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,$spacer
değ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-primary
yerine kullanın.badge-primary
). -
Son DakikaBırakıldı
.badge-pill
—.rounded-pill
bunun yerine yardımcı programı kullanın. -
Son Dakika
<a>
ve<button>
öğeleri için fareyle üzerine gelme ve odak stilleri kaldırıldı . -
.25em
/.5em
ile.35em
/ arasındaki rozetler için artırılmış varsayılan dolgu.65em
.
Galeta unu
-
padding
,background-color
ve öğelerini kaldırarak içerik haritalarının varsayılan görünümünü basitleştirdiborder-radius
. -
--bs-breadcrumb-divider
CSS'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-check
ve<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ı.btn
programla 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-deck
lehine 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-columns
Masonluk lehine düştü . Bkz. #28922 . -
Son Dakika
.card
Tabanlı akordeon yeni bir Akordeon bileşeniyle değiştirildi .
atlıkarınca
-
Koyu metin, kontroller ve göstergeler için yeni
.carousel-dark
değ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
.close
yeniden adlandırıldı ..btn-close
-
Kapat düğmeleri artık HTML'de
background-image
a 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-white
varyant 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-dark
değ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 konumu statik olduğunda ve açılır menü gezinme çubuğunda olduğunda
data-bs-popper="static"
ayarlanmış bir özniteliğe sahiptir.data-bs-popper="none"
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
flip
yapılandırması lehine açılan eklenti seçeneği kaldırıldı. Artık çevirme değiştiricisindefallbackPlacements
seç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-item
s 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-numbered
değiştirici eklendi.
Gezinmeler ve sekmeler
- , , ve için sınıfa yeni
null
değişkenler eklendi.font-size
font-weight
color
: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).
tuval dışı
- Yeni tuval dışı bileşeni eklendi .
sayfalandırma
-
Sayfalandırma bağlantıları artık,
margin-left
birbirinden ayrıldığında tüm köşelerde dinamik olarak yuvarlatılmış olan özelleştirilebilir. -
transition
Sayfalandırma bağlantılarına s eklendi .
popovers
-
Son DakikaVarsayılan popover şablonumuzda
.arrow
yeniden adlandırıldı ..popover-arrow
-
whiteList
Seçenek olarak yeniden adlandırıldıallowList
.
İplikçiler
-
prefers-reduced-motion: reduce
Dö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 uygunborder-radius
s ile değiştirildi.calc()
Araç ipuçları
-
Son DakikaVarsayılan araç ipucu şablonumuzda
.arrow
yeniden adlandırıldı ..tooltip-arrow
-
Son DakikaPopper öğelerinin daha iyi yerleştirilmesi için varsayılan değer
fallbackPlacements
olarak değiştirilir .['top', 'right', 'bottom', 'left']
-
Son Dakika
whiteList
Seç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-left
ve.float-right
için.float-start
ve.float-end
. - Yeniden adlandırıldı
.border-left
ve.border-right
için.border-start
ve.border-end
. - Yeniden adlandırıldı
.rounded-left
ve.rounded-right
için.rounded-start
ve.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-left
ve.text-right
için.text-start
ve.text-end
.
- Yeniden adlandırıldı
-
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-body
sınıf eklendi.<body>
-
, , ve için yeni konum yardımcı programları eklendi . Değerler , her özellik için , ve içerir.
top
right
bottom
left
0
50%
100%
-
Mutlak/sabit konumlandırılmış öğeleri yatay veya dikey olarak ortalamak için yeni
.translate-middle-x
ve yardımcı programlar eklendi..translate-middle-y
-
Yeni
border-width
yardımcı programlar eklendi . -
Son Dakikaolarak yeniden adlandırıldı
.text-monospace
..font-monospace
-
Son Dakika
.text-hide
Artı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 eklendifont-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-grid
programları ve yenigap
yardımcı programları ( ) görüntülemek için eklendi ..gap
-
Son Dakikave kaldırıldı
.rounded-sm
verounded-lg
yeni bir sınıf ölçeği.rounded-0
eklendi.rounded-3
. #31687'ye bakın . -
Yeni
line-height
yardımcı programlar eklendi:.lh-1
,.lh-sm
,.lh-base
ve.lh-lg
. Buraya bakın . -
.d-none
Diğ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-focusable
Kullanarak 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-item
ve 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-ratios
Sass haritası yeniden adlandırıldı ve$aspect-ratios
değerleri, sınıf adını vekey: 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
- Sınıflar , en boy oranında değiştirilecek şekilde yeniden adlandırıldı
-
Son Dakika “Ekran okuyucu” sınıfları artık “görsel olarak gizli” sınıflardır .
- Sass dosyası olarak
scss/helpers/_screenreaders.scss
değiştirildiscss/helpers/_visually-hidden.scss
- Yeniden adlandırıldı
.sr-only
ve.sr-only-focusable
ve.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()
- Sass dosyası olarak
-
bootstrap-utilities.css
artı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-toggle
yerine kullanıyoruzdata-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:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
Bootstrap'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
fallbackPlacements
olarak 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()
.