ការផ្លាស់ប្តូរទៅ v5

ភាពអាស្រ័យ

• ទម្លាក់ jQuery ។
• បានដំឡើងកំណែពី Popper v1.x ទៅ Popper v2.x ។
• ជំនួស Libsass ជាមួយ Dart Sass ដែលជាកម្មវិធីចងក្រង Sass របស់យើងដែលបានផ្តល់ឱ្យ Libsass ត្រូវបានបដិសេធ។
• បានធ្វើចំណាកស្រុកពី Jekyll ទៅ Hugo សម្រាប់ការកសាងឯកសាររបស់យើង។

ការគាំទ្រកម្មវិធីរុករក

• ទម្លាក់ Internet Explorer 10 និង 11
• បានទម្លាក់ Microsoft Edge < 16 (Legacy Edge)
• ទម្លាក់ Firefox < 60
• ទម្លាក់ Safari < 12
• ទម្លាក់ iOS Safari < 12
• បានទម្លាក់ Chrome < 60

---

ការផ្លាស់ប្តូរឯកសារ

• រចនាគេហទំព័រឡើងវិញ ប្លង់ឯកសារ និងបាតកថា។
• បានបន្ថែម ការណែនាំអំពី Parcel ថ្មី ។
• បាន បន្ថែម ផ្នែក ប្ដូរតាមបំណងថ្មី ដោយជំនួស ទំព័រ Theming របស់ v4 ជាមួយនឹងព័ត៌មានលម្អិតថ្មីនៅលើ Sass ជម្រើសកំណត់រចនាសម្ព័ន្ធសកល ពណ៌ចម្រុះ អថេរ CSS និងច្រើនទៀត។
• បានរៀបចំឡើងវិញនូវឯកសារទម្រង់ទាំងអស់ទៅក្នុង ផ្នែកទម្រង់ថ្មី ដោយបំបែកមាតិកាទៅជាទំព័រដែលផ្តោតកាន់តែច្រើន។
• ស្រដៀងគ្នានេះដែរ បានធ្វើបច្ចុប្បន្នភាព ផ្នែកប្លង់ ដើម្បីបញ្ចេញខ្លឹមសារក្រឡាចត្រង្គឱ្យកាន់តែច្បាស់។
• បានប្តូរឈ្មោះទំព័រសមាសភាគ "Navs" ទៅ "Navs & Tabs" ។
• ប្តូរឈ្មោះទំព័រ "ពិនិត្យ" ទៅ "ពិនិត្យ និងវិទ្យុ" ។
• រចនារបាររុករកឡើងវិញ និងបានបន្ថែម subnav ថ្មីមួយដើម្បីធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការធ្វើដំណើរជុំវិញគេហទំព័រ និងកំណែឯកសាររបស់យើង។
• បានបន្ថែមផ្លូវកាត់ក្តារចុចថ្មីសម្រាប់វាលស្វែងរក៖ Ctrl + /.

សាស

• យើងបានលុបចោលការបញ្ចូលគ្នានៃផែនទី Sass លំនាំដើម ដើម្បីធ្វើឱ្យវាកាន់តែងាយស្រួលក្នុងការលុបតម្លៃដែលលែងត្រូវការតទៅទៀត។ សូមចងចាំថាឥឡូវនេះអ្នកត្រូវកំណត់តម្លៃទាំងអស់នៅក្នុងផែនទី Sass ដូចជា $theme-colors. សូមពិនិត្យមើលរបៀបដោះស្រាយជាមួយ ផែនទី Sass ។

• បែកបានប្តូរឈ្មោះ color-yiq()មុខងារ និងអថេរដែលពាក់ព័ន្ធទៅ color-contrast()ព្រោះវាលែងទាក់ទងនឹងទំហំពណ៌ YIQ ទៀតហើយ។ សូមមើល #30168 ។

  • $yiq-contrasted-thresholdត្រូវបានប្តូរឈ្មោះទៅជា $min-contrast-ratio.
  • $yiq-text-darkហើយ $yiq-text-lightត្រូវបានប្តូរឈ្មោះរៀងៗខ្លួនទៅជា $color-contrast-darkនិង $color-contrast-light.

• បែកប៉ារ៉ាម៉ែត្រ mixins សំណួរប្រព័ន្ធផ្សព្វផ្សាយបានផ្លាស់ប្តូរសម្រាប់វិធីសាស្រ្តឡូជីខលជាង។

  • media-breakpoint-down()ប្រើ​ចំណុច​ឈប់​ដោយ​ខ្លួន​វា​ជំនួស​ឱ្យ​ចំណុច​ឈប់​បន្ទាប់ (ឧ. media-breakpoint-down(lg)ជំនួស​ឱ្យ media-breakpoint-down(md)​ច្រក​មើល​គោលដៅ​តូច​ជាង lg) ។
  • ដូច​គ្នា​នេះ​ដែរ ប៉ារ៉ាម៉ែត្រ​ទីពីរ​នៅ​ក្នុង media-breakpoint-between()​ក៏​ប្រើ​ចំណុច​ឈប់​ដោយ​ខ្លួន​វា​ជំនួស​ឱ្យ​ចំណុច​ឈប់​បន្ទាប់ (ឧ. media-between(sm, lg)ជំនួស​ឱ្យ media-breakpoint-between(sm, md)​ច្រក​មើល​គោលដៅ​រវាង smនិង lg)។

• បែកបានលុបរចនាប័ទ្មបោះពុម្ព និង $enable-print-stylesអថេរ។ ថ្នាក់បង្ហាញការបោះពុម្ពនៅតែមាននៅជុំវិញ។ សូមមើល #28339 ។

• បែកបានទម្លាក់ color(), theme-color(), និង gray()មុខងារនៅក្នុងការពេញចិត្តនៃអថេរ។ សូមមើល #29083 ។

• បែកtheme-color-level()មុខងារ ប្តូរឈ្មោះ ទៅជា color-level()ហើយឥឡូវនេះទទួលយកពណ៌ណាមួយដែលអ្នកចង់បាន ជំនួសឱ្យតែ $theme-colorពណ៌ប៉ុណ្ណោះ។ សូមមើល #29083 ប្រយ័ត្ន៖ color-level() ក្រោយមកត្រូវបានទម្លាក់ចូល v5.0.0-alpha3។

• បែកប្តូរឈ្មោះ $enable-prefers-reduced-motion-media-queryនិង $enable-pointer-cursor-for-buttonsទៅ $enable-reduced-motionនិង $enable-button-pointersសម្រាប់ភាពខ្លី។

• បែកយក bg-gradient-variant()mixin ចេញ។ ប្រើ .bg-gradientថ្នាក់ដើម្បីបន្ថែមជម្រាលទៅធាតុជំនួសឱ្យ .bg-gradient-*ថ្នាក់ដែលបានបង្កើត។

• បែក បានលុប mixins ដែលបានបដិសេធពីមុនចេញ៖

  • hover, hover-focus, plain-hover-focus, និងhover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(បានទម្លាក់ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលពាក់ព័ន្ធផងដែរ .text-hide)
  • visibility()
  • form-control-focus()

• បែកscale-color()មុខងារ ប្តូរឈ្មោះ shift-color()ដើម្បីជៀសវាងការប៉ះទង្គិចជាមួយមុខងារធ្វើមាត្រដ្ឋានពណ៌ផ្ទាល់ខ្លួនរបស់ Sass ។

• box-shadowmixins ឥឡូវនេះអនុញ្ញាតឱ្យ nullតម្លៃ និងទម្លាក់ noneពីអាគុយម៉ង់ច្រើន។ សូមមើល #30394 ។

• ឥឡូវនេះ border-radius()mixin មានតម្លៃលំនាំដើម។

ប្រព័ន្ធពណ៌

• ប្រព័ន្ធ​ពណ៌​ដែល​បាន​ធ្វើការ​ជាមួយ color-level()​និង $theme-color-interval​ត្រូវ​បាន​យក​ចេញ​ដើម្បី​ពេញចិត្ត​នឹង​ប្រព័ន្ធ​ពណ៌​ថ្មី។ lighten()មុខងារ និង មុខងារ ទាំងអស់ darken()នៅក្នុង codebase របស់យើងត្រូវបានជំនួសដោយ tint-color()និង shade-color(). មុខងារទាំងនេះនឹងលាយពណ៌ជាមួយពណ៌ស ឬខ្មៅ ជំនួសឱ្យការផ្លាស់ប្តូរពន្លឺរបស់វាតាមចំនួនថេរ។ ឆន្ទៈ ទាំង shift-color()ពណ៌ ឬដាក់ស្រមោលអាស្រ័យលើថាតើប៉ារ៉ាម៉ែត្រទម្ងន់របស់វាគឺវិជ្ជមាន ឬអវិជ្ជមាន។ សូមមើល #30622 សម្រាប់ព័ត៌មានលម្អិត។

• បានបន្ថែមពណ៌ និងពណ៌ថ្មីសម្រាប់គ្រប់ពណ៌ ដោយផ្តល់នូវពណ៌ចំនួនប្រាំបួនដាច់ដោយឡែកសម្រាប់ពណ៌មូលដ្ឋាននីមួយៗ ដែលជាអថេរ Sass ថ្មី។

• កម្រិតពណ៌ប្រសើរឡើង។ សមាមាត្រកម្រិតពណ៌ដែលខូចពី 3:1 ដល់ 4.5:1 និងបានធ្វើបច្ចុប្បន្នភាពពណ៌ពណ៌ខៀវ បៃតង ខៀវខ្ចី និងពណ៌ផ្កាឈូក ដើម្បីធានាបាននូវកម្រិតពណ៌ WCAG 2.1 AA។ ក៏បានផ្លាស់ប្តូរពណ៌ផ្ទុយពណ៌របស់យើងពី $gray-900ទៅ $black.

• ដើម្បីគាំទ្រប្រព័ន្ធពណ៌របស់យើង យើងបានបន្ថែម មុខងារ tint-color()និង shade-color()មុខងារថ្មីៗ ដើម្បីលាយពណ៌របស់យើងឱ្យសមស្រប។

ការធ្វើបច្ចុប្បន្នភាពក្រឡាចត្រង្គ

• ចំណុចបំបែកថ្មី! បាន បន្ថែម xxlចំណុចបំបែកថ្មីសម្រាប់ 1400pxនិងឡើង។ មិនមានការផ្លាស់ប្តូរចំពោះចំណុចឈប់ផ្សេងទៀតទាំងអស់។

• អណ្តូងទឹកដែលប្រសើរឡើង។ ឥឡូវ​នេះ Gutters ត្រូវ​បាន​កំណត់​នៅ​ក្នុង rems ហើយ​តូច​ជាង v4 ( 1.5remឬ​ប្រហែល 24px, ចុះ​ពី 30px) ។ នេះតម្រឹមប្រព័ន្ធក្រឡាចត្រង្គរបស់យើងជាមួយនឹងឧបករណ៍ប្រើប្រាស់គម្លាតរបស់យើង។

  • បាន បន្ថែម ថ្នាក់ gutter ថ្មី ( .g-*, .gx-*, និង .gy-*) ដើម្បីគ្រប់គ្រង gutters ផ្ដេក/បញ្ឈរ, gutters ផ្ដេក និង gutters បញ្ឈរ។
  • បែកប្តូរឈ្មោះ .no-guttersឱ្យ .g-0ត្រូវនឹងឧបករណ៍ប្រើប្រាស់ទឹកស្អុយថ្មី។

• ជួរ​ឈរ​លែង​បាន position: relative​អនុវត្ត​ហើយ ដូច្នេះ​អ្នក​ប្រហែល​ជា​ត្រូវ​បន្ថែម .position-relative​ទៅ​លើ​ធាតុ​មួយ​ចំនួន​ដើម្បី​ស្ដារ​ឥរិយាបថ​នោះ។

• បែកបានទម្លាក់ .order-*ថ្នាក់ជាច្រើនដែលជារឿយៗមិនប្រើ។ ឥឡូវនេះយើងផ្តល់ជូនតែ .order-1ក្រៅ .order-5ប្រអប់ប៉ុណ្ណោះ។

• បែកបានទម្លាក់ .mediaសមាសភាគព្រោះវាអាចចម្លងបានយ៉ាងងាយស្រួលជាមួយឧបករណ៍ប្រើប្រាស់។ សូមមើល #28265 និង ទំព័រ flex utilities សម្រាប់ឧទាហរណ៍ ។

• បែក bootstrap-grid.cssឥឡូវនេះអនុវត្តតែចំពោះ box-sizing: border-boxជួរឈរជំនួសឱ្យការកំណត់ទំហំប្រអប់សកលឡើងវិញ។ វិធីនេះ រចនាប័ទ្មក្រឡាចត្រង្គរបស់យើងអាចត្រូវបានប្រើនៅកន្លែងជាច្រើនទៀតដោយគ្មានការជ្រៀតជ្រែក។

• $enable-grid-classesលែងបិទការបង្កើតថ្នាក់កុងតឺន័រទៀតហើយ។ សូមមើល #29146 ។

• បានធ្វើបច្ចុប្បន្នភាព make-colmixin ទៅលំនាំដើមទៅជាជួរឈរស្មើគ្នាដោយគ្មានទំហំជាក់លាក់។

មាតិកា ចាប់ផ្ដើមឡើងវិញ។ល។

• ឥឡូវនេះ RFS ត្រូវបានបើកតាមលំនាំដើម។ ក្បាលដែលប្រើfont-size()mixin នឹងកែតម្រូវដោយស្វ័យប្រវត្តិfont-sizeទៅតាមមាត្រដ្ឋានជាមួយ viewport ។ មុខងារនេះពីមុនត្រូវបានជ្រើសរើសជាមួយ v4.

• បែកជួសជុលការវាយអក្សរបង្ហាញរបស់យើងដើម្បីជំនួស $display-*អថេររបស់យើង និងជាមួយ $display-font-sizesផែនទី Sass ។ ក៏បានដកចេញ $display-*-weightអថេរបុគ្គលសម្រាប់តែមួយ និង $display-font-weightកែតម្រូវfont-size

• បាន បន្ថែម .display-*ទំហំចំណងជើង ថ្មីចំនួនពីរ .display-5និង .display-6។

• តំណភ្ជាប់ត្រូវបានគូសបញ្ជាក់តាមលំនាំដើម (មិនមែនគ្រាន់តែដាក់លើ) លុះត្រាតែពួកវាជាផ្នែកនៃសមាសធាតុជាក់លាក់។

• តារាងដែលបានរចនាឡើងវិញ ដើម្បីធ្វើឱ្យរចនាប័ទ្មរបស់ពួកគេឡើងវិញ និងបង្កើតពួកវាឡើងវិញជាមួយនឹងអថេរ CSS សម្រាប់ការគ្រប់គ្រងបន្ថែមទៀតលើរចនាប័ទ្ម។

• បែកតារាង​ដែល​ជាប់​គាំង​មិន​ទទួល​យក​រចនាប័ទ្ម​ទៀត​ទេ។

• បែក .thead-lightហើយ .thead-dark​ត្រូវ​បាន​ទម្លាក់​នៅ​ក្នុង​ការ​ពេញចិត្ត​នៃ .table-*​ថ្នាក់​វ៉ារ្យ៉ង់​ដែល​អាច​ត្រូវ​បាន​ប្រើ​សម្រាប់​ធាតុ​តារាង​ទាំងអស់ ( thead, tbody, tfoot, tr, thនិង td) ។

• បែកtable-row-variant()Mixin ត្រូវបានប្តូរឈ្មោះទៅជា និង table-variant()ទទួលយកតែ 2 ប៉ារ៉ាម៉ែត្រប៉ុណ្ណោះ៖ $color(ឈ្មោះពណ៌) និង $value(កូដពណ៌)។ ពណ៌ស៊ុម និងពណ៌សង្កត់សំឡេងត្រូវបានគណនាដោយស្វ័យប្រវត្តិដោយផ្អែកលើអថេរកត្តាតារាង។

• បំបែកអថេរបន្ទះក្រឡាតារាងទៅជា -yនិង -x.

• បែកថ្នាក់ ធ្លាក់ .pre-scrollable។ សូមមើល #29135

• បែក .text-*ឧបករណ៍ប្រើប្រាស់មិនបន្ថែមការសង្កត់លើ និងរដ្ឋផ្តោតទៅលើតំណភ្ជាប់ទៀតទេ។ .link-*ថ្នាក់ជំនួយអាចត្រូវបានប្រើជំនួសវិញ។ សូមមើល #29267

• បែកថ្នាក់ ធ្លាក់ .text-justify។ សូមមើល #29793

• បែក <hr>ឥឡូវប្រើធាតុ heightជំនួសឱ្យ borderដើម្បីគាំទ្រ sizeគុណលក្ខណៈកាន់តែប្រសើរឡើង។ វា​ក៏​អាច​ប្រើ​ឧបករណ៍​ប្រើប្រាស់​ទ្រនាប់​ផងដែរ​ដើម្បី​បង្កើត​ការ​បែងចែក​ក្រាស់​ជាង​មុន (ឧ. <hr class="py-1">)។

• កំណត់ឡើងវិញនូវលំនាំដើមផ្ដេក padding-leftនៅលើ <ul>និង <ol>ធាតុពីលំនាំដើមកម្មវិធីរុករក 40pxទៅ 2rem.

• បាន បន្ថែម $enable-smooth-scrollដែលអនុវត្ត scroll-behavior: smoothជាសកល លើកលែងតែអ្នកប្រើប្រាស់ដែលស្នើសុំកាត់បន្ថយចលនាតាមរយៈ prefers-reduced-motionសំណួរប្រព័ន្ធផ្សព្វផ្សាយ។ សូមមើលលេខ ៣១៨៧៧

RTL

• អថេរជាក់លាក់នៃទិសដៅផ្តេក ឧបករណ៍ប្រើប្រាស់ និង mixins ទាំងអស់ត្រូវបានប្តូរឈ្មោះដើម្បីប្រើលក្ខណសម្បត្តិឡូជីខលដូចអ្វីដែលមាននៅក្នុងប្លង់ flexbox — ឧទាហរណ៍ startនិង endជំនួសឱ្យ leftនិង right.

ទម្រង់

• បានបន្ថែមទម្រង់អណ្តែតទឹកថ្មី! យើង​បាន​ផ្សព្វផ្សាយ​ឧទាហរណ៍​ស្លាក​អណ្តែត​ទៅ​ជា​សមាសធាតុ​ទម្រង់​ដែល​គាំទ្រ​យ៉ាង​ពេញលេញ។ មើលទំព័រស្លាកអណ្តែតថ្មី។

• បែក រួមបញ្ចូលគ្នានូវធាតុទម្រង់ដើម និងផ្ទាល់ខ្លួន។ ប្រអប់ធីក វិទ្យុ ការជ្រើសរើស និងធាតុបញ្ចូលផ្សេងទៀតដែលមានថ្នាក់ដើម និងផ្ទាល់ខ្លួននៅក្នុង v4 ត្រូវបានបញ្ចូលគ្នា។ ឥឡូវនេះ ធាតុទម្រង់របស់យើងស្ទើរតែទាំងអស់មានលក្ខណៈផ្ទាល់ខ្លួនទាំងស្រុង ភាគច្រើនដោយមិនចាំបាច់មាន HTML ផ្ទាល់ខ្លួនទេ។

  • .custom-checkឥឡូវនេះ .form-check។
  • .custom-check.custom-switchឥឡូវនេះ .form-check.form-switch។
  • .custom-selectឥឡូវនេះ .form-select។
  • .custom-fileហើយ .form-fileត្រូវបានជំនួសដោយរចនាប័ទ្មផ្ទាល់ខ្លួននៅលើកំពូលនៃ .form-control.
  • .custom-rangeឥឡូវនេះ .form-range។
  • ទម្លាក់​ដើម​កំណើត .form-control-file​និង .form-control-range​។

• បែកទម្លាក់ .input-group-appendនិង .input-group-prepend។ ឥឡូវនេះ អ្នកអាចគ្រាន់តែបន្ថែមប៊ូតុង និង .input-group-textជាកូនដោយផ្ទាល់នៃក្រុមបញ្ចូល។

• កាំព្រំដែនដែលបាត់ ជាយូរមកហើយ នៅលើក្រុមបញ្ចូលដែលមានកំហុស មតិកែលម្អសុពលភាព ទីបំផុតត្រូវបានជួសជុលដោយបន្ថែម .has-validationថ្នាក់បន្ថែមទៅក្រុមបញ្ចូលដោយមានសុពលភាព។

• បែក បានទម្លាក់ថ្នាក់ទម្រង់ជាក់លាក់សម្រាប់ប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង។ ប្រើក្រឡាចត្រង្គ និងឧបករណ៍ប្រើប្រាស់របស់យើងជំនួសឱ្យ .form-group, .form-rowឬ .form-inline.

• បែកស្លាកទម្រង់ឥឡូវនេះទាមទារ .form-label។

• បែក .form-textលែងកំណត់ displayអនុញ្ញាតឲ្យអ្នកបង្កើតអត្ថបទជំនួយក្នុងជួរ ឬប្លុកតាមដែលអ្នកចង់បាន ដោយគ្រាន់តែផ្លាស់ប្តូរធាតុ HTML ប៉ុណ្ណោះ។

• រូបតំណាងសុពលភាពមិនត្រូវបានអនុវត្តចំពោះ <select>s ជាមួយ multiple.

• ឯកសារ Sass ប្រភពដែលបានរៀបចំឡើងវិញនៅក្រោម scss/forms/រួមទាំងរចនាប័ទ្មក្រុមបញ្ចូល។

---

សមាសធាតុ

• តម្លៃ បង្រួបបង្រួម paddingសម្រាប់ការជូនដំណឹង, breadcrumbs, កាត, dropdowns, list group, modals, popovers, and tooltips to be based on our $spacervariable. សូមមើល #30564 ។

ស្រោមសំបុត្រ

• បានបន្ថែម សមាសធាតុ accordion ថ្មី ។

ការជូនដំណឹង

• ឥឡូវនេះ ការជូនដំណឹងមាន ឧទាហរណ៍ជាមួយរូបតំណាង ។

• បានលុបរចនាប័ទ្មផ្ទាល់ខ្លួនសម្រាប់ <hr>s នៅក្នុងការជូនដំណឹងនីមួយៗចាប់តាំងពីពួកគេបានប្រើរួចហើយ currentColor។

ផ្លាកសញ្ញា

• បែកបានទម្លាក់ .badge-*ថ្នាក់ពណ៌ទាំងអស់សម្រាប់ឧបករណ៍ប្រើប្រាស់ផ្ទៃខាងក្រោយ (ឧ. ប្រើ .bg-primaryជំនួស .badge-primary)។

• បែកទម្លាក់ .badge-pill- .rounded-pillប្រើឧបករណ៍ប្រើប្រាស់ជំនួសវិញ។

• បែកបាន​លុប​រចនាប័ទ្ម​ដាក់​លើ និង​ផ្ដោត​សម្រាប់ <a>និង <button>​ធាតុ។

• ការបង្កើនបន្ទះលំនាំដើមសម្រាប់ផ្លាកសញ្ញាពី .25em/ .5emទៅ .35em/ .65em.

ម្សៅនំប៉័ង

• សម្រួលរូបរាងលំនាំដើមរបស់ breadcrumbs ដោយយក padding, background-color, និង border-radius.

• បានបន្ថែមលក្ខណសម្បត្តិផ្ទាល់ខ្លួន CSS ថ្មី --bs-breadcrumb-dividerសម្រាប់ងាយស្រួលប្ដូរតាមបំណងដោយមិនចាំបាច់ចងក្រង CSS ឡើងវិញ។

ប៊ូតុង

• បែក ប៊ូតុងបិទ/បើក ជាមួយនឹងប្រអប់ធីក ឬវិទ្យុ លែងត្រូវការ JavaScript និងមានការសម្គាល់ថ្មី។ យើងលែងត្រូវការធាតុរុំ បន្ថែម.btn-checkទៅ<input>និងផ្គូផ្គងវាជាមួយ.btnថ្នាក់ណាមួយនៅលើ<label>. សូមមើល #30650 ។ ឯកសារសម្រាប់រឿងនេះបានផ្លាស់ប្តូរពីទំព័រប៊ូតុងរបស់យើងទៅផ្នែកទម្រង់ថ្មី។

• បែក ទម្លាក់ .btn-blockសម្រាប់ឧបករណ៍ប្រើប្រាស់។ ជំនួសឱ្យការប្រើ .btn-blockនៅលើ .btnប៊ូតុង រុំប៊ូតុងរបស់អ្នកជាមួយ .d-gridនិង .gap-*ឧបករណ៍ប្រើប្រាស់ដើម្បីដាក់ពួកវាតាមតម្រូវការ។ ប្ដូរទៅថ្នាក់ដែលឆ្លើយតបសម្រាប់ការគ្រប់គ្រងកាន់តែច្រើនលើពួកគេ។ សូមអានឯកសារសម្រាប់ឧទាហរណ៍មួយចំនួន។

• បានធ្វើបច្ចុប្បន្នភាពរបស់យើង button-variant()និង button-outline-variant()mixins ដើម្បីគាំទ្រប៉ារ៉ាម៉ែត្របន្ថែម។

• ប៊ូតុងដែលបានធ្វើបច្ចុប្បន្នភាពដើម្បីធានាបាននូវភាពផ្ទុយគ្នាកើនឡើងនៅលើការសង្កត់លើ និងស្ថានភាពសកម្ម។

• ប៊ូតុងបិទឥឡូវនេះមាន pointer-events: none;។

កាត

• បែកបានធ្លាក់ចុះ .card-deckនៅក្នុងការពេញចិត្តនៃក្រឡាចត្រង្គរបស់យើង។ រុំកាតរបស់អ្នកនៅក្នុងថ្នាក់ជួរឈរ ហើយបន្ថែម .row-cols-*ធុងមេដើម្បីបង្កើតបន្ទះកាតឡើងវិញ (ប៉ុន្តែជាមួយនឹងការគ្រប់គ្រងបន្ថែមទៀតលើការតម្រឹមឆ្លើយតប)។

• បែកបានធ្លាក់ចុះ .card-columnsនៅក្នុងការពេញចិត្តនៃ Masonry ។ សូមមើល #28922 ។

• បែកជំនួសគ្រឿងភ្លេងដែល .cardមានមូលដ្ឋានជាមួយនឹង សមាសធាតុ Accordion ថ្មី ។

វង់

• បាន បន្ថែម .carousel-darkវ៉ារ្យ៉ង់ ថ្មី សម្រាប់អត្ថបទងងឹត ការគ្រប់គ្រង និងសូចនាករ (ល្អសម្រាប់ផ្ទៃខាងក្រោយស្រាលជាងមុន)។

• បានជំនួសរូបតំណាង chevron សម្រាប់ការគ្រប់គ្រងរង្វង់មូលជាមួយនឹង SVGs ថ្មីពី Bootstrap Icons ។

ប៊ូតុងបិទ

• បែកប្តូរឈ្មោះ .closeទៅ .btn-closeជាឈ្មោះទូទៅតិច។

• ប៊ូតុងបិទឥឡូវនេះប្រើ background-image(បានបង្កប់ SVG) ជំនួសឱ្យ a ×នៅក្នុង HTML ដែលអនុញ្ញាតឱ្យមានការប្ដូរតាមបំណងកាន់តែងាយស្រួលដោយមិនចាំបាច់ប៉ះសញ្ញាសម្គាល់របស់អ្នក។

• បាន បន្ថែម .btn-close-whiteវ៉ារ្យ៉ង់ថ្មីដែលប្រើ filter: invert(1)ដើម្បីបើករូបតំណាងបដិសេធកម្រិតពណ៌ខ្ពស់ប្រឆាំងនឹងផ្ទៃខាងក្រោយងងឹត។

ដួលរលំ

• ដក​ការ​បោះ​យុថ្កា​រមូរ​សម្រាប់ accordions ។

ទម្លាក់ចុះ

• បាន បន្ថែម .dropdown-menu-darkវ៉ារ្យ៉ង់ថ្មី និងអថេរដែលពាក់ព័ន្ធសម្រាប់ការទម្លាក់ចុះងងឹតតាមតម្រូវការ។

• បានបន្ថែមអថេរថ្មីសម្រាប់ $dropdown-padding-x.

• ធ្វើឱ្យ​ផ្នែក​បែងចែក​ទម្លាក់ចុះ​ងងឹត​សម្រាប់​កម្រិតពណ៌​ដែល​ប្រសើរឡើង។

• បែកព្រឹត្តិការណ៍ទាំងអស់សម្រាប់បញ្ជីទម្លាក់ចុះឥឡូវនេះត្រូវបានកេះនៅលើប៊ូតុងបិទ/បើកទម្លាក់ចុះ ហើយបន្ទាប់មកបានផ្ទុះឡើងដល់ធាតុមេ។

• ម៉ឺនុយទម្លាក់ចុះឥឡូវនេះមាន data-bs-popper="static"កំណត់គុណលក្ខណៈនៅពេលដែលទីតាំងនៃការធ្លាក់ចុះគឺឋិតិវន្ត ហើយ data-bs-popper="none"នៅពេលដែលទម្លាក់ចុះនៅក្នុងរបាររុករក។ នេះត្រូវបានបន្ថែមដោយ JavaScript របស់យើង និងជួយយើងប្រើរចនាប័ទ្មទីតាំងផ្ទាល់ខ្លួនដោយមិនជ្រៀតជ្រែកជាមួយទីតាំងរបស់ Popper ។

• បែកជម្រើសដែល បានទម្លាក់ flipសម្រាប់កម្មវិធីជំនួយទម្លាក់ចុះនៅក្នុងការពេញចិត្តនៃការកំណត់រចនាសម្ព័ន្ធ Popper ដើម។ ឥឡូវ​នេះ អ្នក​អាច​បិទ​ឥរិយាបទ​ត្រឡប់​ដោយ​ឆ្លងកាត់​អារេ​ទទេ​សម្រាប់ fallbackPlacements​ជម្រើស​ក្នុង ​ការ ​កែប្រែ ​ត្រឡប់ ។

• ម៉ឺនុយទម្លាក់ចុះឥឡូវនេះអាចចុចបានជាមួយនឹង autoCloseជម្រើសថ្មីមួយដើម្បីគ្រប់គ្រង ឥរិយាបថបិទដោយស្វ័យប្រវត្តិ ។ អ្នកអាចប្រើជម្រើសនេះដើម្បីទទួលយកការចុចនៅខាងក្នុងឬខាងក្រៅម៉ឺនុយទម្លាក់ចុះដើម្បីធ្វើឱ្យវាអន្តរកម្ម។

• ការទម្លាក់ចុះឥឡូវនេះគាំទ្រ .dropdown-items រុំក្នុង <li>s ។

Jumbotron

• បែកបានទម្លាក់សមាសធាតុ jumbotron ដូចដែលវាអាចត្រូវបានចម្លងជាមួយឧបករណ៍ប្រើប្រាស់។ សូមមើលឧទាហរណ៍ Jumbotron ថ្មីរបស់យើងសម្រាប់ការបង្ហាញ។

បញ្ជីក្រុម

• បាន បន្ថែម .list-group-numberedអ្នកកែប្រែ ថ្មី ទៅក្នុងបញ្ជីក្រុម។

Navs និងផ្ទាំង

• បាន បន្ថែម nullអថេរថ្មីសម្រាប់ font-size, font-weight, color, និង :hover colorទៅ .nav-linkថ្នាក់។

Navbars

• បែកឥឡូវនេះ Navbars ទាមទារកុងតឺន័រមួយ (ដើម្បីសម្រួលដល់តម្រូវការគម្លាត និងតម្រូវការ CSS)។

ផ្ទាំងក្រណាត់

• បានបន្ថែម សមាសធាតុ offcanvas ថ្មី ។

ការបិទភ្ជាប់

• ឥឡូវនេះតំណភ្ជាប់ Pagination អាចប្ដូរតាមបំណងបាន margin-leftដែលបង្គត់ដោយថាមវន្តនៅគ្រប់ជ្រុងទាំងអស់ នៅពេលបំបែកចេញពីគ្នាទៅវិញទៅមក។

• បាន បន្ថែម transitions ទៅកាន់តំណភ្ជាប់ទំព័រ។

Popovers

• បែកបានប្តូរឈ្មោះ .arrowទៅ .popover-arrowជាគំរូ popover លំនាំដើមរបស់យើង។

• បានប្តូរឈ្មោះ whiteListជម្រើសទៅជា allowList.

អ្នកបង្វិល

• ឥឡូវ​នេះ អ្នក​បង្វិល​ប្រាក់​គោរព prefers-reduced-motion: reduce​ដោយ​បន្ថយ​ចលនា។ សូមមើល #31882 ។

• ការតម្រឹមបញ្ឈររបស់ spinner ប្រសើរឡើង។

នំដុត

• ពេល​នេះ​នំបុ័ង​អាច​ត្រូវ​បាន ​ដាក់ ​នៅ​ក្នុង​មួយ .toast-container​ដោយ​មាន​ជំនួយ​ពី ​ឧបករណ៍​ប្រើប្រាស់​ក្នុង​ការ​កំណត់​ទីតាំង ។

• បានផ្លាស់ប្តូររយៈពេលនំបុ័ងអាំងលំនាំដើមទៅ 5 វិនាទី។

• យក overflow: hiddenចេញពី toasts និងជំនួសដោយ border-radiuss ត្រឹមត្រូវជាមួយនឹង calc()មុខងារ។

ព័ត៌មានជំនួយ

• បែកបានប្តូរឈ្មោះ .arrowទៅ .tooltip-arrowជាគំរូណែនាំឧបករណ៍លំនាំដើមរបស់យើង។

• បែកតម្លៃ​លំនាំដើម​សម្រាប់ fallbackPlacements​ត្រូវ​បាន​ផ្លាស់​ប្តូ​រ​ទៅ ['top', 'right', 'bottom', 'left']​ជា​ការ​ដាក់​ឱ្យ​ប្រសើរ​ឡើង​នៃ​ធាតុ popper ។

• បែកបានប្តូរឈ្មោះ whiteListជម្រើសទៅជា allowList.

ឧបករណ៍ប្រើប្រាស់

• បែកបានប្តូរឈ្មោះឧបករណ៍ប្រើប្រាស់ជាច្រើនដើម្បីប្រើឈ្មោះទ្រព្យសម្បត្តិឡូជីខលជំនួសឱ្យឈ្មោះទិសដៅជាមួយនឹងការបន្ថែមការគាំទ្រ RTL៖

  • ប្តូរឈ្មោះ .left-*និង .right-*ទៅ .start-*និង .end-*។
  • ប្តូរឈ្មោះ .float-leftនិង .float-rightទៅ .float-startនិង .float-end។
  • ប្តូរឈ្មោះ .border-leftនិង .border-rightទៅ .border-startនិង .border-end។
  • ប្តូរឈ្មោះ .rounded-leftនិង .rounded-rightទៅ .rounded-startនិង .rounded-end។
  • ប្តូរឈ្មោះ .ml-*និង .mr-*ទៅ .ms-*និង .me-*។
  • ប្តូរឈ្មោះ .pl-*និង .pr-*ទៅ .ps-*និង .pe-*។
  • ប្តូរឈ្មោះ .text-leftនិង .text-rightទៅ .text-startនិង .text-end។

• បែកបានបិទរឹមអវិជ្ជមានតាមលំនាំដើម។

• បាន បន្ថែម .bg-bodyថ្នាក់ថ្មីសម្រាប់ការកំណត់ <body>ផ្ទៃខាងក្រោយរបស់ធាតុបន្ថែមយ៉ាងឆាប់រហ័ស។

• បាន បន្ថែម ឧបករណ៍ប្រើប្រាស់មុខតំណែង ថ្មី សម្រាប់ top, right, bottom, និង left. តម្លៃរួមបញ្ចូល 0, 50%និង 100%សម្រាប់ទ្រព្យសម្បត្តិនីមួយៗ។

• បាន បន្ថែមឧបករណ៍ប្រើប្រាស់ថ្មី .translate-middle-xទៅ .translate-middle-yធាតុដែលមានទីតាំងផ្ដេក ឬបញ្ឈរ។

• បានបន្ថែម border-widthឧបករណ៍ប្រើប្រាស់ ថ្មី ។

• បែកបានប្តូរឈ្មោះ .text-monospaceទៅជា .font-monospace។

• បែកបាន​យក​ចេញ .text-hideព្រោះ​វា​ជា​វិធីសាស្ត្រ​បុរាណ​សម្រាប់​លាក់​អត្ថបទ ដែល​មិន​គួរ​ប្រើ​ទៀត​ទេ។

• បាន បន្ថែម .fs-*ឧបករណ៍ប្រើប្រាស់សម្រាប់ font-sizeឧបករណ៍ប្រើប្រាស់ (ជាមួយ RFS បានបើក) ។ ទាំងនេះប្រើមាត្រដ្ឋានដូចគ្នានឹងចំណងជើងលំនាំដើមរបស់ HTML (1-6 ធំទៅតូច) ហើយអាចត្រូវបានកែប្រែតាមរយៈ Sass map ។

• បែកប្តូរឈ្មោះ .font-weight-*ឧបករណ៍ប្រើប្រាស់ .fw-*សម្រាប់ភាពខ្លី និងភាពស៊ីសង្វាក់គ្នា។

• បែកប្តូរឈ្មោះ .font-style-*ឧបករណ៍ប្រើប្រាស់ .fst-*សម្រាប់ភាពខ្លី និងភាពស៊ីសង្វាក់គ្នា។

• បាន បន្ថែម .d-gridដើម្បីបង្ហាញឧបករណ៍ប្រើប្រាស់ និងឧបករណ៍ gapប្រើប្រាស់ថ្មី ( .gap) សម្រាប់ CSS Grid និង flexbox layouts ។

• បែកបានយកចេញ .rounded-smនិង rounded-lgនិងណែនាំមាត្រដ្ឋានថ្មីនៃថ្នាក់ .rounded-0ទៅ .rounded-3. សូមមើល #31687 ។

• បាន បន្ថែម line-heightឧបករណ៍ប្រើប្រាស់ថ្មី៖ .lh-1, .lh-sm, .lh-baseនិង .lh-lg. សូមមើល នៅទីនេះ ។

• បានផ្លាស់ទី .d-noneឧបករណ៍ប្រើប្រាស់នៅក្នុង CSS របស់យើងដើម្បីឱ្យវាមានទម្ងន់ច្រើនជាងឧបករណ៍ប្រើប្រាស់បង្ហាញផ្សេងទៀត។

• បានពង្រីក .visually-hidden-focusableជំនួយដើម្បីធ្វើការលើធុងផងដែរ ដោយប្រើ :focus-within.

អ្នកជំនួយ

• បែក ជំនួយការបង្កប់ដែលឆ្លើយតបត្រូវបានប្តូរឈ្មោះទៅជា ជំនួយការសមាមាត្រ ជាមួយនឹងឈ្មោះថ្នាក់ថ្មី និងអាកប្បកិរិយាដែលប្រសើរឡើង ក៏ដូចជាអថេរ CSS ដ៏មានប្រយោជន៍ផងដែរ។

  • ថ្នាក់ត្រូវបានប្តូរឈ្មោះដើម្បីប្តូរ byទៅ xជាសមាមាត្រទិដ្ឋភាព។ ឧទាហរណ៍ .ratio-16by9ឥឡូវនេះ .ratio-16x9។
  • យើង​បាន​ទម្លាក់ .embed-responsive-item​កម្មវិធី​ជ្រើសរើស​ក្រុម​ធាតុ និង​ជម្រើស​សម្រាប់​ការ .ratio > *​ជ្រើសរើស​ដែល​សាមញ្ញ​ជាង។ មិនត្រូវការថ្នាក់ទៀតទេ ហើយជំនួយការសមាមាត្រឥឡូវនេះដំណើរការជាមួយធាតុ HTML ណាមួយ។
  • ផែនទី $embed-responsive-aspect-ratiosSass ត្រូវបានប្តូរឈ្មោះទៅជា $aspect-ratiosហើយតម្លៃរបស់វាត្រូវបានធ្វើឱ្យសាមញ្ញដើម្បីបញ្ចូលឈ្មោះថ្នាក់ និងភាគរយជា key: valueគូ។
  • អថេរ CSS ឥឡូវនេះត្រូវបានបង្កើត និងរួមបញ្ចូលសម្រាប់តម្លៃនីមួយៗនៅក្នុងផែនទី Sass ។ កែប្រែ --bs-aspect-ratioអថេរនៅលើ .ratioដើម្បីបង្កើត សមាមាត្រទិដ្ឋភាពផ្ទាល់ខ្លួន ណាមួយ ។

• បែក ឥឡូវនេះថ្នាក់ "កម្មវិធីអានអេក្រង់" គឺជាថ្នាក់ "លាក់ដោយមើលឃើញ" ។

  • បានផ្លាស់ប្តូរឯកសារ Sass ពី scss/helpers/_screenreaders.scssទៅscss/helpers/_visually-hidden.scss
  • ប្តូរឈ្មោះ .sr-onlyនិង .sr-only-focusableទៅ .visually-hiddenនិង.visually-hidden-focusable
  • ប្តូរឈ្មោះ sr-only()និង sr-only-focusable()mixins ទៅ visually-hidden()និង visually-hidden-focusable().

• bootstrap-utilities.cssឥឡូវនេះក៏រួមបញ្ចូលជំនួយរបស់យើងផងដែរ។ ជំនួយមិនចាំបាច់ត្រូវបាននាំចូលនៅក្នុងការស្ថាបនាផ្ទាល់ខ្លួនទៀតទេ។

JavaScript

• បានទម្លាក់ភាពអាស្រ័យ jQuery និងសរសេរកម្មវិធីជំនួយឡើងវិញដើម្បីឱ្យមាននៅក្នុង JavaScript ធម្មតា។

• បែកគុណលក្ខណៈទិន្នន័យសម្រាប់កម្មវិធីជំនួយ JavaScript ទាំងអស់ឥឡូវនេះត្រូវបានដាក់ឈ្មោះដើម្បីជួយបែងចែកមុខងារ Bootstrap ពីភាគីទីបី និងកូដផ្ទាល់ខ្លួនរបស់អ្នក។ ឧទាហរណ៍ យើងប្រើ data-bs-toggleជំនួស data-toggle.

• ឥឡូវនេះកម្មវិធីជំនួយទាំងអស់អាចទទួលយកឧបករណ៍ជ្រើសរើស CSS ជាអាគុយម៉ង់ដំបូង។ អ្នកអាចឆ្លងកាត់ធាតុ DOM ឬឧបករណ៍ជ្រើសរើស CSS ត្រឹមត្រូវណាមួយ ដើម្បីបង្កើតឧទាហរណ៍ថ្មីនៃកម្មវិធីជំនួយ៖

  ចម្លង

  var modal = new bootstrap.Modal('#myModal')
  var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigអាចត្រូវបានឆ្លងកាត់ជាមុខងារដែលទទួលយកការកំណត់លំនាំដើម Popper របស់ Bootstrap ជាអាគុយម៉ង់ ដូច្នេះអ្នកអាចបញ្ចូលការកំណត់លំនាំដើមនេះតាមវិធីរបស់អ្នក។ អនុវត្តចំពោះការទម្លាក់ចុះ ការលេចឡើង និងព័ត៌មានជំនួយ។

• តម្លៃ​លំនាំដើម​សម្រាប់ fallbackPlacements​ត្រូវ​បាន​ប្តូរ​ទៅ ['top', 'right', 'bottom', 'left']​សម្រាប់​ការ​ដាក់​ធាតុ Popper ឱ្យ​កាន់​តែ​ប្រសើរ។ អនុវត្តចំពោះការទម្លាក់ចុះ ការលេចឡើង និងព័ត៌មានជំនួយ។

• បាន​លុប​ចំណុច​ក្រោម​ចេញ​ពី​វិធីសាស្ត្រ​ឋិតិវន្ត​សាធារណៈ​ដូចជា _getInstance()→ getInstance().