Berhijrah ke v5

Jejak dan semak perubahan pada fail sumber Bootstrap, dokumentasi dan komponen untuk membantu anda berhijrah dari v4 ke v5.

Pada halaman ini

Kebergantungan

jQuery digugurkan.
Dinaik taraf daripada Popper v1.x kepada Popper v2.x.
Menggantikan Libsass dengan Dart Sass kerana pengkompil Sass kami yang diberikan Libsass telah ditamatkan.
Berhijrah dari Jekyll ke Hugo untuk membina dokumentasi kami

Sokongan penyemak imbas

Menggugurkan Internet Explorer 10 dan 11
Menggugurkan Microsoft Edge < 16 (Legacy Edge)
Menggugurkan Firefox < 60
Safari digugurkan < 12
Menggugurkan iOS Safari < 12
Chrome digugurkan < 60

Perubahan dokumentasi

Laman utama reka bentuk semula, reka letak dokumen dan pengaki.
Menambahkan panduan Bungkusan baharu .
Menambah bahagian Peribadikan baharu , menggantikan halaman Tema v4 , dengan butiran baharu tentang Sass, pilihan konfigurasi global, skema warna, pembolehubah CSS dan banyak lagi.
Menyusun semula semua dokumentasi borang ke bahagian Borang baharu , memecahkan kandungan kepada halaman yang lebih fokus.
Begitu juga, kemas kini bahagian Reka Letak , untuk menyempurnakan kandungan grid dengan lebih jelas.
Menamakan semula halaman komponen "Navs" kepada "Navs & Tabs".
Menamakan semula halaman "Cek" kepada "Cek & radio".
Mereka bentuk semula bar navigasi dan menambah subnav baharu untuk memudahkan anda meneroka tapak dan versi dokumen kami.
Menambah pintasan papan kekunci baharu untuk medan carian: Ctrl + /.

Sass

Kami telah membuang gabungan peta Sass lalai untuk memudahkan anda mengalih keluar nilai berlebihan. Perlu diingat anda kini perlu menentukan semua nilai dalam peta Sass seperti $theme-colors. Semak cara berurusan dengan peta Sass .
BerbukaMenamakan semula color-yiq()fungsi dan pembolehubah berkaitan color-contrast()kerana ia tidak lagi berkaitan dengan ruang warna YIQ. Lihat #30168.
- $yiq-contrasted-thresholddinamakan semula kepada $min-contrast-ratio.
- $yiq-text-darkdan $yiq-text-lightmasing-masing dinamakan semula kepada $color-contrast-darkdan $color-contrast-light.
BerbukaParameter campuran pertanyaan media telah berubah untuk pendekatan yang lebih logik.
- media-breakpoint-down()menggunakan titik putus itu sendiri dan bukannya titik putus seterusnya (cth, media-breakpoint-down(lg)bukannya media-breakpoint-down(md)sasaran pandangan yang lebih kecil daripada lg).
- Begitu juga, parameter kedua dalam media-breakpoint-between()juga menggunakan titik putus itu sendiri dan bukannya titik putus seterusnya (cth, media-between(sm, lg)bukannya media-breakpoint-between(sm, md)sasaran pandangan antara smdan lg).
BerbukaGaya cetakan dan $enable-print-stylespembolehubah dialih keluar. Kelas paparan cetakan masih ada. Lihat #28339 .
BerbukaDigugurkan color(), theme-color(), dan gray()fungsi memihak kepada pembolehubah. Lihat #29083 .
Berbukatheme-color-level()Fungsi dinamakan semula kepada color-level()dan kini menerima sebarang warna yang anda inginkan dan bukannya $theme-colorwarna sahaja. Lihat #29083 Awas : color-level() kemudiannya digugurkan dalam v5.0.0-alpha3.
BerbukaDinamakan semula $enable-prefers-reduced-motion-media-querydan $enable-pointer-cursor-for-buttonskepada $enable-reduced-motiondan $enable-button-pointersuntuk ringkas.
BerbukaMengalih keluar bg-gradient-variant()campuran. Gunakan .bg-gradientkelas untuk menambah kecerunan pada elemen dan bukannya .bg-gradient-*kelas yang dijana.
Berbuka Mengalih keluar campuran yang telah ditamatkan sebelum ini:
- hover, hover-focus, plain-hover-focus, danhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(juga menjatuhkan kelas utiliti yang berkaitan, .text-hide)
- visibility()
- form-control-focus()
BerbukaMenamakan semula scale-color()fungsi kepada shift-color()untuk mengelakkan perlanggaran dengan fungsi penskalaan warna Sass sendiri.
box-shadowmixins kini membenarkan nullnilai dan drop nonedaripada berbilang argumen. Lihat #30394 .
Mixin border-radius()kini mempunyai nilai lalai.

Sistem warna

Sistem warna yang berfungsi dengan color-level()dan $theme-color-intervaltelah dialih keluar memihak kepada sistem warna baharu. Semua lighten()dan darken()fungsi dalam pangkalan kod kami digantikan dengan tint-color()dan shade-color(). Fungsi ini akan mencampurkan warna dengan sama ada putih atau hitam dan bukannya menukar kecerahannya dengan jumlah tetap. Sama ada shift-color()akan mewarna atau mewarnakan warna bergantung pada sama ada parameter beratnya adalah positif atau negatif. Lihat #30622 untuk butiran lanjut.
Menambah warna dan warna baharu untuk setiap warna, menyediakan sembilan warna berasingan untuk setiap warna asas, sebagai pembolehubah Sass baharu.
Kontras warna yang dipertingkatkan. Nisbah kontras warna terhantuk daripada 3:1 hingga 4.5:1 dan warna biru, hijau, cyan dan merah jambu dikemas kini untuk memastikan kontras WCAG 2.1 AA. Juga menukar warna kontras warna kami daripada $gray-900kepada $black.
Untuk menyokong sistem warna kami, kami telah menambah adat tint-color()dan shade-color()fungsi baharu untuk mencampurkan warna kami dengan sewajarnya.

Kemas kini grid

Titik putus baru! Menambah xxltitik putus baharu untuk 1400pxdan ke atas. Tiada perubahan pada semua titik putus yang lain.
Longkang yang lebih baik. Parit kini ditetapkan dalam rem dan lebih sempit daripada v4 ( 1.5rem, atau kira-kira 24px, turun dari 30px). Ini menjajarkan longkang sistem grid kami dengan utiliti jarak kami.
- Menambahkan kelas longkang baharu ( .g-*, .gx-*, dan .gy-*) untuk mengawal longkang mendatar/menegak, longkang mendatar dan longkang menegak.
- BerbukaDinamakan semula .no-gutterskepada .g-0untuk memadankan utiliti longkang baharu.
Lajur tidak lagi position: relativedigunakan, jadi anda mungkin perlu menambah .position-relativebeberapa elemen untuk memulihkan gelagat tersebut.
BerbukaMenggugurkan beberapa .order-*kelas yang sering tidak digunakan. Kami kini hanya menyediakan .order-1kepada .order-5di luar kotak.
BerbukaMenggugurkan .mediakomponen kerana ia boleh direplikasi dengan mudah dengan utiliti. Lihat #28265 dan halaman utiliti fleksibel untuk contoh .
Berbuka bootstrap-grid.csskini hanya digunakan box-sizing: border-boxpada lajur dan bukannya menetapkan semula saiz kotak global. Dengan cara ini, gaya grid kami boleh digunakan di lebih banyak tempat tanpa gangguan.
$enable-grid-classestidak lagi melumpuhkan penjanaan kelas kontena lagi. Lihat #29146.
Mengemas kini make-colmixin kepada lalai kepada lajur yang sama tanpa saiz yang ditentukan.

Kandungan, But semula, dsb

RFS kini didayakan secara lalai. Tajuk yang menggunakanfont-size()mixin akan melaraskannya secara automatik mengikutfont-sizeskala dengan port pandangan. Ciri ini sebelum ini ikut serta dengan v4.
BerbukaMembaik pulih tipografi paparan kami untuk menggantikan $display-*pembolehubah kami dan dengan $display-font-sizespeta Sass. Juga mengalih keluar $display-*-weightpembolehubah individu untuk s tunggal $display-font-weightdan diselaraskan font-size.
Menambah dua .display-*saiz tajuk baharu .display-5dan .display-6.
Pautan digariskan secara lalai (bukan hanya pada tuding), melainkan ia adalah sebahagian daripada komponen tertentu.
Jadual direka bentuk semula untuk menyegarkan gaya mereka dan membina semulanya dengan pembolehubah CSS untuk lebih kawalan ke atas penggayaan.
BerbukaJadual bersarang tidak mewarisi gaya lagi.
Berbuka .thead-lightdan .thead-darkdigugurkan memihak kepada .table-*kelas varian yang boleh digunakan untuk semua elemen jadual ( thead, tbody, tfoot, tr, thdan td).
BerbukaMixin table-row-variant()dinamakan semula kepada table-variant()dan menerima hanya 2 parameter: $color(nama warna) dan $value(kod warna). Warna sempadan dan warna aksen dikira secara automatik berdasarkan pembolehubah faktor jadual.
Pisahkan pembolehubah pelapik sel jadual ke dalam -ydan -x.
BerbukaDigugurkan .pre-scrollablekelas. Lihat #29135
Berbuka .text-*utiliti tidak menambah keadaan tuding dan fokus pada pautan lagi. .link-*kelas pembantu boleh digunakan sebaliknya. Lihat #29267
BerbukaDigugurkan .text-justifykelas. Lihat #29793
padding-leftTetapkan semula lalai mendatar <ul>dan <ol>elemen daripada lalai penyemak imbas 40pxkepada 2rem.
Ditambah $enable-smooth-scroll, yang terpakai scroll-behavior: smoothsecara global—kecuali untuk pengguna yang meminta gerakan yang dikurangkan melalui prefers-reduced-motionpertanyaan media. Lihat #31877

RTL

Pembolehubah khusus arah mendatar, utiliti dan campuran semuanya telah dinamakan semula untuk menggunakan sifat logik seperti yang terdapat dalam reka letak kotak flex—cth, startdan endsebagai ganti leftdan right.

Borang

Menambah borang terapung baharu! Kami telah mempromosikan contoh label Terapung kepada komponen borang yang disokong sepenuhnya. Lihat halaman label Terapung baharu.
Berbuka Unsur bentuk asli dan tersuai disatukan. Kotak pilihan, radio, pilihan dan input lain yang mempunyai kelas asli dan tersuai dalam v4 telah disatukan. Kini hampir semua elemen borang kami adalah tersuai sepenuhnya, kebanyakannya tanpa memerlukan HTML tersuai.
- .custom-checkadalah sekarang .form-check.
- .custom-check.custom-switchadalah sekarang .form-check.form-switch.
- .custom-selectadalah sekarang .form-select.
- .custom-filedan .form-filetelah digantikan dengan gaya tersuai di atas .form-control.
- .custom-rangeadalah sekarang .form-range.
- Digugurkan asli .form-control-filedan .form-control-range.
BerbukaDijatuhkan .input-group-appenddan .input-group-prepend. Anda kini boleh menambah butang dan .input-group-textsebagai anak langsung kumpulan input.
Jejari sempadan Hilang yang lama pada kumpulan input dengan pepijat maklum balas pengesahan akhirnya dibetulkan dengan menambahkan .has-validationkelas tambahan pada kumpulan input dengan pengesahan.
Berbuka Menggugurkan kelas reka letak khusus bentuk untuk sistem grid kami. Gunakan grid dan utiliti kami dan bukannya .form-group, .form-row, atau .form-inline.
BerbukaLabel borang kini memerlukan .form-label.
Berbuka .form-texttidak lagi set display, membolehkan anda membuat teks bantuan sebaris atau menyekat seperti yang anda inginkan hanya dengan menukar elemen HTML.
Ikon pengesahan tidak lagi digunakan pada <select>s dengan multiple.
Fail Sass sumber disusun semula di bawah scss/forms/, termasuk gaya kumpulan input.

Komponen

Nilai bersatu paddinguntuk makluman, serbuk roti, kad, lungsur turun, kumpulan senarai, modal, popover dan petua alat berdasarkan $spacerpembolehubah kami. Lihat #30564 .

Akordion

Menambah komponen akordion baharu .

Makluman

Makluman kini mempunyai contoh dengan ikon .
Mengalih keluar gaya tersuai untuk <hr>s dalam setiap makluman kerana ia sudah menggunakan currentColor.

Lencana

BerbukaMenggugurkan semua .badge-*kelas warna untuk utiliti latar belakang (cth, gunakan .bg-primarybukannya .badge-primary).
BerbukaDijatuhkan .badge-pill—gunakan .rounded-pillutiliti sebaliknya.
BerbukaGaya tuding dan fokus dialih keluar untuk <a>dan <button>elemen.
Menambahkan padding lalai untuk lencana dari .25em/ .5emke .35em/ .65em.

Serbuk roti

Mempermudahkan rupa lalai serbuk roti dengan mengalih keluar padding, background-color, dan border-radius.
Menambah sifat tersuai CSS baharu --bs-breadcrumb-divideruntuk penyesuaian mudah tanpa perlu menyusun semula CSS.

Butang

Berbuka Togol butang , dengan kotak pilihan atau radio, tidak lagi memerlukan JavaScript dan mempunyai penanda baharu. Kami tidak lagi memerlukan elemen pembalut, tambah.btn-checkpada<input>, dan pasangkannya dengan mana-mana.btnkelas pada<label>. Lihat #30650 . Dokumen untuk ini telah berpindah dari halaman Butang kami ke bahagian Borang baharu.
Berbuka Digugurkan .btn-blockuntuk utiliti. Daripada menggunakan .btn-blockpada .btn, bungkus butang anda dengan .d-griddan .gap-*utiliti untuk menjarakkannya mengikut keperluan. Beralih kepada kelas responsif untuk mendapatkan lebih kawalan ke atasnya. Baca dokumen untuk beberapa contoh.
Mengemas kini kami button-variant()dan button-outline-variant()mixin untuk menyokong parameter tambahan.
Butang dikemas kini untuk memastikan peningkatan kontras pada tuding dan keadaan aktif.
Butang dilumpuhkan kini mempunyai pointer-events: none;.

Kad

BerbukaDijatuhkan .card-deckmemihak kepada grid kami. Balut kad anda dalam kelas lajur dan tambah .row-cols-*bekas induk untuk mencipta semula dek kad (tetapi dengan lebih kawalan ke atas penjajaran responsif).
BerbukaDijatuhkan .card-columnsmemihak kepada Masonry. Lihat #28922 .
BerbukaMenggantikan .cardakordion berasaskan dengan komponen Akordion baharu .

karusel

Menambahkan .carousel-darkvarian baharu untuk teks gelap, kawalan dan penunjuk (bagus untuk latar belakang yang lebih terang).
Menggantikan ikon chevron untuk kawalan karusel dengan SVG baharu daripada Ikon Bootstrap .

Butang tutup

BerbukaDinamakan semula .closekepada .btn-closeuntuk nama yang kurang generik.
Butang tutup kini menggunakan background-image(SVG terbenam) dan bukannya a ×dalam HTML, membolehkan penyesuaian lebih mudah tanpa perlu menyentuh penanda anda.
Menambahkan .btn-close-whitevarian baharu yang digunakan filter: invert(1)untuk mendayakan ikon tolak kontras yang lebih tinggi terhadap latar belakang yang lebih gelap.

Runtuh

Dialih keluar penambat skrol untuk akordion.

Jatuh turun

Menambahkan .dropdown-menu-darkvarian baharu dan pembolehubah yang berkaitan untuk menu lungsur gelap atas permintaan.
Menambah pembolehubah baharu untuk $dropdown-padding-x.
Menggelapkan pembahagi lungsur untuk kontras yang lebih baik.
BerbukaSemua peristiwa untuk lungsur turun kini dicetuskan pada butang togol lungsur turun dan kemudian menggelembung ke elemen induk.
Menu dropdown kini mempunyai data-bs-popper="static"atribut yang ditetapkan apabila kedudukan dropdown adalah statik dan data-bs-popper="none"apabila dropdown berada dalam navbar. Ini ditambah oleh JavaScript kami dan membantu kami menggunakan gaya kedudukan tersuai tanpa mengganggu kedudukan Popper.
BerbukaPilihan yang digugurkan flipuntuk pemalam lungsur memihak kepada konfigurasi Popper asli. Anda kini boleh melumpuhkan tingkah laku membalik dengan menghantar tatasusunan kosong untuk fallbackPlacementspilihan dalam pengubah suai flip .
Menu lungsur kini boleh diklik dengan pilihan baharu autoCloseuntuk mengendalikan gelagat auto tutup . Anda boleh menggunakan pilihan ini untuk menerima klik di dalam atau di luar menu lungsur turun untuk menjadikannya interaktif.
Dropdown kini menyokong .dropdown-items yang dibungkus dengan <li>s.

Jumbotron

BerbukaMenggugurkan komponen jumbotron kerana ia boleh direplikasi dengan utiliti. Lihat contoh Jumbotron baharu kami untuk demo.

Senaraikan kumpulan

Menambahkan .list-group-numberedpengubah suai baharu pada senarai kumpulan.

Navs dan tab

Menambah nullpembolehubah baharu untuk font-size, font-weight, color, dan :hover colorpada .nav-linkkelas.

Navbars

BerbukaNavbars kini memerlukan bekas dalam (untuk memudahkan keperluan jarak dan CSS yang diperlukan secara drastik).

Luar Kanvas

Menambahkan komponen offcanvas baharu .

penomboran

Pautan penomboran kini mempunyai boleh disesuaikan margin-leftyang dibulatkan secara dinamik pada semua penjuru apabila dipisahkan antara satu sama lain.
Ditambahkan transitions pada pautan penomboran.

Popovers

BerbukaDinamakan semula .arrowkepada .popover-arrowdalam templat popover lalai kami.
Menamakan semula whiteListpilihan kepada allowList.

Pemintal

Spinners kini menghormati prefers-reduced-motion: reducedengan memperlahankan animasi. Lihat #31882 .
Penjajaran menegak pemutar yang dipertingkatkan.

Roti bakar

Roti bakar kini boleh diletakkan di dalam sebuah .toast-containerdengan bantuan utiliti kedudukan .
Menukar tempoh roti bakar lalai kepada 5 saat.
Dialih overflow: hiddenkeluar daripada roti bakar dan digantikan dengan border-radiuss yang betul dengan calc()fungsi.

Petua alat

BerbukaDinamakan semula .arrowkepada .tooltip-arrowdalam templat petua alat lalai kami.
BerbukaNilai lalai untuk fallbackPlacementsditukar kepada ['top', 'right', 'bottom', 'left']untuk penempatan elemen popper yang lebih baik.
BerbukaMenamakan semula whiteListpilihan kepada allowList.

Utiliti

BerbukaMenamakan semula beberapa utiliti untuk menggunakan nama harta logik dan bukannya nama arah dengan penambahan sokongan RTL:
- Dinamakan semula .left-*dan .right-*kepada .start-*dan .end-*.
- Dinamakan semula .float-leftdan .float-rightkepada .float-startdan .float-end.
- Dinamakan semula .border-leftdan .border-rightkepada .border-startdan .border-end.
- Dinamakan semula .rounded-leftdan .rounded-rightkepada .rounded-startdan .rounded-end.
- Dinamakan semula .ml-*dan .mr-*kepada .ms-*dan .me-*.
- Dinamakan semula .pl-*dan .pr-*kepada .ps-*dan .pe-*.
- Dinamakan semula .text-leftdan .text-rightkepada .text-startdan .text-end.
BerbukaJidar negatif dilumpuhkan secara lalai.
Menambah .bg-bodykelas baharu untuk menetapkan latar belakang dengan pantas <body>kepada elemen tambahan.
Menambahkan utiliti kedudukan baharu untuk top, right, bottom, dan left. Nilai termasuk 0, 50%, dan 100%untuk setiap harta.
Ditambah baharu .translate-middle-x& .translate-middle-yutiliti pada elemen kedudukan mutlak/tetap secara mendatar atau menegak.
Menambah border-widthutiliti baharu .
BerbukaDinamakan semula .text-monospacekepada .font-monospace.
BerbukaDialih keluar .text-hidekerana ia merupakan kaedah lama untuk menyembunyikan teks yang tidak boleh digunakan lagi.
Menambah .fs-*utiliti untuk font-sizeutiliti (dengan RFS didayakan). Ini menggunakan skala yang sama seperti tajuk lalai HTML (1-6, besar ke kecil), dan boleh diubah suai melalui peta Sass.
Berbuka.font-weight-*Utiliti dinamakan semula sebagai .fw-*ringkas dan konsisten.
Berbuka.font-style-*Utiliti dinamakan semula sebagai .fst-*ringkas dan konsisten.
Ditambah .d-griduntuk memaparkan utiliti dan gaputiliti baharu ( .gap) untuk susun atur Grid CSS dan flexbox.
BerbukaDialih keluar .rounded-smdan rounded-lg, dan memperkenalkan skala kelas baharu, .rounded-0kepada .rounded-3. Lihat #31687 .
Menambah line-heightutiliti baharu: .lh-1, .lh-sm, .lh-basedan .lh-lg. Lihat di sini .
Mengalihkan .d-noneutiliti dalam CSS kami untuk memberikannya lebih berat berbanding utiliti paparan lain.
Dilanjutkan .visually-hidden-focusablepembantu untuk turut bekerja pada bekas, menggunakan :focus-within.

Pembantu

Berbuka Pembantu benam responsif telah dinamakan semula kepada pembantu nisbah dengan nama kelas baharu dan gelagat yang dipertingkatkan, serta pembolehubah CSS yang berguna.
- Kelas telah dinamakan semula untuk ditukar bykepada xdalam nisbah bidang. Sebagai contoh, .ratio-16by9adalah sekarang .ratio-16x9.
- Kami telah menggugurkan .embed-responsive-itempemilih kumpulan elemen dan memihak kepada .ratio > *pemilih yang lebih mudah. Tiada lagi kelas diperlukan dan pembantu nisbah kini berfungsi dengan mana-mana elemen HTML.
- Peta $embed-responsive-aspect-ratiosSass telah dinamakan semula kepada $aspect-ratiosdan nilainya telah dipermudahkan untuk memasukkan nama kelas dan peratusan sebagai key: valuepasangan.
- Pembolehubah CSS kini dijana dan disertakan untuk setiap nilai dalam peta Sass. Ubah suai --bs-aspect-ratiopembolehubah pada .ratiountuk mencipta sebarang nisbah aspek tersuai .
Berbuka Kelas "Pembaca skrin" kini ialah kelas "tersembunyi secara visual" .
- Menukar fail Sass daripada scss/helpers/_screenreaders.scsskepadascss/helpers/_visually-hidden.scss
- Dinamakan semula .sr-onlydan .sr-only-focusablekepada .visually-hiddendan.visually-hidden-focusable
- Dinamakan semula sr-only()dan sr-only-focusable()campurkan kepada visually-hidden()dan visually-hidden-focusable().
bootstrap-utilities.csskini juga termasuk pembantu kami. Pembantu tidak perlu diimport dalam binaan tersuai lagi.

JavaScript

Menggugurkan kebergantungan jQuery dan menulis semula pemalam untuk berada dalam JavaScript biasa.
BerbukaAtribut data untuk semua pemalam JavaScript kini diberi ruang nama untuk membantu membezakan fungsi Bootstrap daripada pihak ketiga dan kod anda sendiri. Sebagai contoh, kami menggunakan data-bs-togglebukannya data-toggle.
Semua pemalam kini boleh menerima pemilih CSS sebagai hujah pertama. Anda boleh sama ada menghantar elemen DOM atau mana-mana pemilih CSS yang sah untuk membuat contoh baharu pemalam:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigboleh diluluskan sebagai fungsi yang menerima konfigurasi Popper lalai Bootstrap sebagai hujah, supaya anda boleh menggabungkan konfigurasi lalai ini mengikut cara anda. Digunakan pada lungsur turun, popover dan petua alat.
Nilai lalai untuk fallbackPlacementsditukar kepada ['top', 'right', 'bottom', 'left']peletakan elemen Popper yang lebih baik. Digunakan pada lungsur turun, popover dan petua alat.
Garis bawah dialih keluar daripada kaedah statik awam seperti _getInstance()→ getInstance().