រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

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

តាមដាន និងពិនិត្យមើលការផ្លាស់ប្តូរចំពោះឯកសារប្រភព Bootstrap ឯកសារ និងសមាសធាតុ ដើម្បីជួយអ្នកធ្វើចំណាកស្រុកពី v4 ទៅ 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-sizes ។

  • បាន បន្ថែម .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

  • កំណត់ឡើងវិញនូវលំនាំដើមផ្ដេក 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 ។

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

ការជូនដំណឹង

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

  • បានលុបរចនាប័ទ្មផ្ទាល់ខ្លួនសម្រាប់ <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 &times;នៅក្នុង 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

បញ្ជីក្រុម

  • បាន បន្ថែម nullអថេរថ្មីសម្រាប់ font-size, font-weight, color, និង :hover colorទៅ .nav-linkថ្នាក់។
  • បែកឥឡូវនេះ Navbars ទាមទារកុងតឺន័រមួយ (ដើម្បីសម្រួលដល់តម្រូវការគម្លាត និងតម្រូវការ CSS)។

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

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

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

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

Popovers

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

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

អ្នកបង្វិល

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

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

នំដុត

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

  • បែកបានប្តូរឈ្មោះ .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().