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

Bootstrap 4 គឺជាការសរសេរឡើងវិញដ៏សំខាន់នៃគម្រោងទាំងមូល។ ការផ្លាស់ប្តូរគួរឱ្យកត់សម្គាល់បំផុតត្រូវបានសង្ខេបខាងក្រោម អមដោយការផ្លាស់ប្តូរជាក់លាក់បន្ថែមទៀតចំពោះសមាសធាតុពាក់ព័ន្ធ។

ការផ្លាស់ប្តូរស្ថេរភាព

ការផ្លាស់ប្តូរពី Beta 3 ទៅកាន់ការចេញផ្សាយ v4.0 ដែលមានស្ថេរភាពរបស់យើង មិនមានការផ្លាស់ប្តូរបំបែកនោះទេ ប៉ុន្តែមានការផ្លាស់ប្តូរគួរឱ្យកត់សម្គាល់មួយចំនួន។

ការបោះពុម្ព

• ជួសជុលឧបករណ៍បោះពុម្ពដែលខូច។ ពីមុន ការប្រើ .d-print-*class មួយនឹងបំពានលើ class ផ្សេងទៀតដោយមិននឹកស្មានដល់ .d-*។ ឥឡូវ​នេះ ពួក​វា​ត្រូវ​គ្នា​នឹង​ឧបករណ៍​បង្ហាញ​ផ្សេង​ទៀត​របស់​យើង ហើយ​អនុវត្ត​ចំពោះ​តែ​ប្រព័ន្ធ​ផ្សព្វផ្សាយ @media print​នោះ​ប៉ុណ្ណោះ។

• បានពង្រីកឧបករណ៍បង្ហាញបោះពុម្ពដែលមាន ដើម្បីផ្គូផ្គងឧបករណ៍ប្រើប្រាស់ផ្សេងទៀត។ Beta 3 និងចាស់ជាងនេះមានតែ block, inline-block, inline, និង none. ស្ថេរភាព v4 បានបន្ថែម flex, inline-flex, table, table-rowនិង table-cell.

• ជួសជុលការមើលជាមុនការបោះពុម្ពលើកម្មវិធីរុករកតាមអ៊ីនធឺណិតជាមួយនឹងរចនាប័ទ្មបោះពុម្ពថ្មីដែលបញ្ជាក់ @page size។

ការផ្លាស់ប្តូរ Beta 3

ខណៈពេលដែល Beta 2 បានឃើញការផ្លាស់ប្តូរភាគច្រើនរបស់យើងក្នុងដំណាក់កាលបេតា ប៉ុន្តែយើងនៅតែមានមួយចំនួនដែលចាំបាច់ត្រូវដោះស្រាយនៅក្នុងការចេញផ្សាយ Beta 3 ។ ការផ្លាស់ប្តូរទាំងនេះអនុវត្ត ប្រសិនបើអ្នកកំពុងធ្វើបច្ចុប្បន្នភាពទៅ Beta 3 ពី Beta 2 ឬកំណែចាស់របស់ Bootstrap។

ផ្សេងៗ

• បានលុប $thumbnail-transitionអថេរដែលមិនប្រើ។ យើងមិនបានផ្លាស់ប្តូរអ្វីនោះទេ ដូច្នេះវាគ្រាន់តែជាលេខកូដបន្ថែមប៉ុណ្ណោះ។
• កញ្ចប់ npm លែងរួមបញ្ចូលឯកសារណាមួយក្រៅពីឯកសារប្រភព និង dist របស់យើងទៀតហើយ។ ប្រសិនបើអ្នកពឹងផ្អែកលើពួកវា ហើយកំពុងដំណើរការស្គ្រីបរបស់យើងតាមរយៈ node_modulesថតនោះ អ្នកគួរតែសម្រួលលំហូរការងាររបស់អ្នក។

ទម្រង់

• សរសេរឡើងវិញទាំងប្រអប់ធីកផ្ទាល់ខ្លួន និងលំនាំដើម និងវិទ្យុ។ ឥឡូវនេះ ទាំងពីរមានរចនាសម្ព័ន្ធ HTML ដែលត្រូវគ្នា (ខាងក្រៅ <div>ជាមួយបងប្អូនបង្កើត <input>និង <label>) និងរចនាប័ទ្មប្លង់ដូចគ្នា (ជង់លំនាំដើម ជួរជាមួយថ្នាក់កែប្រែ)។ វាអនុញ្ញាតឱ្យយើងធ្វើរចនាប័ទ្មស្លាកដោយផ្អែកលើស្ថានភាពនៃធាតុបញ្ចូល ធ្វើឱ្យការគាំទ្រសម្រាប់ disabledគុណលក្ខណៈងាយស្រួល (ពីមុនតម្រូវឱ្យមានថ្នាក់មេ) និងគាំទ្រការផ្ទៀងផ្ទាត់ទម្រង់របស់យើងកាន់តែប្រសើរ។

  ជាផ្នែកមួយនៃការនេះ យើងបានផ្លាស់ប្តូរ CSS សម្រាប់គ្រប់គ្រង background-images ជាច្រើននៅលើប្រអប់ធីកទម្រង់ផ្ទាល់ខ្លួន និងវិទ្យុ។ កាលពីមុន .custom-control-indicatorធាតុដែលបានដកចេញឥឡូវនេះមានពណ៌ផ្ទៃខាងក្រោយ ជម្រាល និងរូបតំណាង SVG ។ ការប្ដូរពណ៌ផ្ទៃខាងក្រោយតាមបំណង មានន័យថាការជំនួសវាទាំងអស់ រាល់ពេលដែលអ្នកត្រូវការដើម្បីផ្លាស់ប្តូរតែមួយប៉ុណ្ណោះ។ ឥឡូវ​នេះ យើង​មាន .custom-control-label::before​សម្រាប់​ការ​បំពេញ និង​ជម្រាល ហើយ .custom-control-label::after​ដោះស្រាយ​រូបតំណាង។

  ដើម្បីធ្វើការត្រួតពិនិត្យផ្ទាល់ខ្លួននៅក្នុងបន្ទាត់ សូមបន្ថែម .custom-control-inline។

• បានធ្វើបច្ចុប្បន្នភាពឧបករណ៍ជ្រើសរើសសម្រាប់ក្រុមប៊ូតុងដែលមានមូលដ្ឋានលើការបញ្ចូល។ ជំនួស [data-toggle="buttons"] { }ឱ្យរចនាប័ទ្ម និងអាកប្បកិរិយា យើងប្រើ dataគុណលក្ខណៈសម្រាប់តែអាកប្បកិរិយា JS ហើយពឹងផ្អែកលើ .btn-group-toggleថ្នាក់ថ្មីសម្រាប់រចនាប័ទ្ម។

• បានដកចេញ .col-form-legendដើម្បីជាការប្រសើរបន្តិច .col-form-label។ វិធីនេះ .col-form-label-smនិង .col-form-label-lgអាចប្រើលើ <legend>ធាតុដោយភាពងាយស្រួល។

• ការបញ្ចូលឯកសារផ្ទាល់ខ្លួនបានទទួលការផ្លាស់ប្តូរទៅ $custom-file-textអថេរ Sass របស់ពួកគេ។ វាលែងជាផែនទី Sass ដែលដាក់ជាប់គ្នាទៀតហើយ ហើយឥឡូវនេះផ្តល់ថាមពលដល់ខ្សែតែមួយប៉ុណ្ណោះ ដែលជា Browseប៊ូតុងដែលឥឡូវនេះជាធាតុក្លែងក្លាយតែមួយគត់ដែលបានបង្កើតពី Sass របស់យើង។ អត្ថបទ Choose fileឥឡូវនេះបានមកពី .custom-file-label.

ក្រុមបញ្ចូល

• កម្មវិធីបន្ថែមក្រុមបញ្ចូលឥឡូវនេះមានភាពជាក់លាក់ចំពោះការដាក់របស់ពួកគេទាក់ទងទៅនឹងធាតុបញ្ចូល។ យើង​បាន​ធ្លាក់ .input-group-addon​ហើយ .input-group-btn​សម្រាប់​ថ្នាក់​ថ្មី​ពីរ .input-group-prepend​ហើយ .input-group-append​។ អ្នក​ត្រូវតែ​ប្រើ​ឧបសម្ព័ន្ធ​ឬ​ការ​បន្ថែម​ជាមុន​ឥឡូវនេះ​ឱ្យ​ច្បាស់ ដោយ​ធ្វើ​ឱ្យ​សាមញ្ញ​ជាច្រើន​នៃ CSS របស់យើង។ នៅ​ក្នុង​ការ​បន្ថែម​ឬ​បន្ថែម​ខាង​មុខ សូម​ដាក់​ប៊ូតុង​របស់​អ្នក​ដូច​ដែល​វា​មាន​នៅ​កន្លែង​ណា​ផ្សេង​ទៀត ប៉ុន្តែ​រុំ​អត្ថបទ​ក្នុង .input-group-text.

• រចនាប័ទ្ម​សុពលភាព​ឥឡូវ​ត្រូវ​បាន​គាំទ្រ ដូច​នឹង​ការ​បញ្ចូល​ច្រើន​ដែរ (ទោះបីជា​អ្នក​អាច​បញ្ជាក់​បាន​តែ​ការ​បញ្ចូល​មួយ​ក្នុង​មួយ​ក្រុម)។

• ថ្នាក់ទំហំត្រូវតែស្ថិតនៅលើមេ .input-groupនិងមិនមែនជាធាតុទម្រង់បុគ្គលទេ។

ការផ្លាស់ប្តូរ Beta 2

ខណៈពេលដែលនៅក្នុងបែតា យើងមានបំណងមិនមានការផ្លាស់ប្តូរបំបែក។ ទោះយ៉ាងណាក៏ដោយ អ្វីៗមិនតែងតែដូចការគ្រោងទុកនោះទេ។ ខាងក្រោម​នេះ​ជា​ការ​ផ្លាស់ប្តូរ​ដែល​ត្រូវ​ចងចាំ​នៅពេល​ផ្លាស់ប្តូរ​ពី Beta 1 ទៅ Beta 2។

បែក

• បានលុប $badge-colorអថេរ និងការប្រើប្រាស់របស់វានៅលើ .badge. យើងប្រើមុខងារកម្រិតពណ៌ដើម្បីជ្រើសរើស colorដោយផ្អែកលើ background-colorដូចនេះអថេរគឺមិនចាំបាច់ទេ។
• បានប្តូរឈ្មោះ grayscale()មុខងារ ដើម្បី ជៀសវាងការប៉ះទង្គិចជាមួយ តម្រង gray()ដើម CSS ។grayscale
• បាន ប្តូរឈ្មោះ .table-inverse, .thead-inverseនិង .thead-defaultទៅ .*-darkនិង .*-light, ផ្គូផ្គងពណ៌ចម្រុះរបស់យើងដែលបានប្រើនៅកន្លែងផ្សេង។
• ឥឡូវនេះតារាងឆ្លើយតបបង្កើតថ្នាក់សម្រាប់ចំណុចបំបែកក្រឡាចត្រង្គនីមួយៗ។ នេះបំបែកចេញពី Beta 1 ដែល .table-responsiveអ្នកបានប្រើគឺកាន់តែដូច .table-responsive-md. ឥឡូវនេះអ្នកអាចប្រើ .table-responsiveឬ .table-responsive-{sm,md,lg,xl}តាមតម្រូវការ។
• បានទម្លាក់ការគាំទ្រ Bower ជាអ្នកគ្រប់គ្រងកញ្ចប់ត្រូវបានបដិសេធសម្រាប់ជម្រើស (ឧទាហរណ៍ អំបោះ ឬ npm)។ សូមមើល bower/bower #2298 សម្រាប់ព័ត៌មានលម្អិត។
• Bootstrap នៅតែទាមទារ jQuery 1.9.1 ឬខ្ពស់ជាងនេះ ប៉ុន្តែអ្នកត្រូវបានគេណែនាំឱ្យប្រើកំណែ 3.x ចាប់តាំងពីកម្មវិធីរុករកដែលគាំទ្ររបស់ v3.x គឺជាកម្មវិធីដែល Bootstrap គាំទ្រ បូក v3.x មានការជួសជុលសុវត្ថិភាពមួយចំនួន។
• បាន​យក .form-control-label​ថ្នាក់​ដែល​មិន​ប្រើ​ចេញ។ ប្រសិនបើអ្នកបានប្រើ class នេះ វាស្ទួនគ្នានៃ .col-form-labelថ្នាក់ដែលដាក់កណ្តាលបញ្ឈរ <label>ជាមួយនឹងការបញ្ចូលរបស់វានៅក្នុងប្លង់ទម្រង់ផ្ដេក។
• បានផ្លាស់ប្តូរ color-yiqពី mixin ដែលរួមបញ្ចូល colorលក្ខណសម្បត្តិទៅជាមុខងារដែលត្រឡប់តម្លៃដែលអនុញ្ញាតឱ្យអ្នកប្រើវាសម្រាប់លក្ខណៈសម្បត្តិ CSS ណាមួយ។ ឧទាហរណ៍ ជំនួសឱ្យ color-yiq(#000)អ្នកនឹងសរសេរ color: color-yiq(#000);។

រំលេច

• ណែនាំ pointer-eventsការប្រើប្រាស់ថ្មីលើម៉ូឌុល។ ខាងក្រៅ .modal-dialogឆ្លងកាត់ព្រឹត្តិការណ៍ជាមួយ pointer-events: noneសម្រាប់ការគ្រប់គ្រងការចុចផ្ទាល់ខ្លួន (ធ្វើឱ្យវាអាចធ្វើទៅបានដើម្បីគ្រាន់តែស្តាប់នៅលើ .modal-backdropសម្រាប់ការចុចណាមួយ) ហើយបន្ទាប់មកប្រឆាំងនឹងវាសម្រាប់ពិតប្រាកដ .modal-contentជាមួយ pointer-events: auto.

សង្ខេប

នេះ​ជា​ធាតុ​សំបុត្រ​ធំៗ​ដែល​អ្នក​នឹង​ចង់​ដឹង​ពេល​ផ្លាស់ទី​ពី v3 ទៅ v4។

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

• បានទម្លាក់ការគាំទ្រ IE8, IE9 និង iOS 6 ។ v4 ឥឡូវនេះមានតែ IE10+ និង iOS 7+ ប៉ុណ្ណោះ។ សម្រាប់គេហទំព័រដែលត្រូវការទាំងពីរនោះ សូមប្រើ v3.
• បានបន្ថែមការគាំទ្រផ្លូវការសម្រាប់កម្មវិធីរុករក និង WebView របស់ Android v5.0 Lollipop ។ កំណែមុនរបស់ Android Browser និង WebView នៅតែត្រូវបានគាំទ្រក្រៅផ្លូវការប៉ុណ្ណោះ។

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

• Flexbox ត្រូវបានបើកតាមលំនាំដើម។ ជាទូទៅ នេះមានន័យថាការផ្លាស់ទីឆ្ងាយពីអណ្តែត និងច្រើនទៀតនៅទូទាំងសមាសធាតុរបស់យើង។
• ប្តូរពី Less ទៅ Sass សម្រាប់ឯកសារ CSS ប្រភពរបស់យើង។
• បាន ប្តូរពី pxទៅ remជាឯកតា CSS ចម្បងរបស់យើង ទោះបីជាភីកសែលនៅតែត្រូវបានប្រើសម្រាប់សំណួរមេឌៀ និងឥរិយាបថក្រឡាចត្រង្គ ដោយសារច្រកមើលឧបករណ៍មិនរងផលប៉ះពាល់ដោយទំហំប្រភេទ។
• ទំហំពុម្ពអក្សរសកលបានកើនឡើង 14pxពី 16px.
• កំណែក្រឡាក្រឡាចត្រង្គដើម្បីបន្ថែមជម្រើសទីប្រាំ (ការដោះស្រាយឧបករណ៍តូចជាងនៅ 576pxនិងខាងក្រោម) និងបានលុបទិន្នន័យ -xsចេញពីថ្នាក់ទាំងនោះ។ ឧទាហរណ៍៖ .col-6.col-sm-4.col-md-3.
• បានជំនួសប្រធានបទជម្រើសដាច់ដោយឡែកជាមួយនឹងជម្រើសដែលអាចកំណត់រចនាសម្ព័ន្ធបានតាមរយៈអថេរ SCSS (ឧ, $enable-gradients: true)។
• ប្រព័ន្ធស្ថាបនាត្រូវបានជួសជុលឡើងវិញដើម្បីប្រើស៊េរីនៃអក្សរ npm ជំនួសឱ្យ Grunt ។ មើល package.jsonសម្រាប់ស្គ្រីបទាំងអស់ ឬគម្រោងរបស់យើង readme សម្រាប់តម្រូវការអភិវឌ្ឍន៍មូលដ្ឋាន។
• ការប្រើប្រាស់ Bootstrap មិនឆ្លើយតបមិនត្រូវបានគាំទ្រទៀតទេ។
• បានទម្លាក់កម្មវិធីប្ដូរតាមបំណងតាមអ៊ិនធរណេត ដើម្បីគាំទ្រដល់ឯកសារដំឡើងកាន់តែទូលំទូលាយ និងការបង្កើតតាមតម្រូវការ។
• បានបន្ថែម ថ្នាក់ឧបករណ៍ប្រើប្រាស់ ថ្មីរាប់សិប សម្រាប់គូតម្លៃទ្រព្យសម្បត្តិ CSS ទូទៅ និងផ្លូវកាត់គម្លាតរឹម/បន្ទះ។

ប្រព័ន្ធក្រឡាចត្រង្គ

• បានផ្លាស់ទីទៅ flexbox ។
  • បានបន្ថែមការគាំទ្រសម្រាប់ flexbox នៅក្នុងក្រឡាចត្រង្គ mixins និងថ្នាក់ដែលបានកំណត់ជាមុន។
  • ជាផ្នែកនៃ flexbox រួមបញ្ចូលការគាំទ្រសម្រាប់ថ្នាក់តម្រឹមបញ្ឈរ និងផ្ដេក។
• បានធ្វើបច្ចុប្បន្នភាពឈ្មោះថ្នាក់ក្រឡាចត្រង្គ និងថ្នាក់ក្រឡាចត្រង្គថ្មី។
  • បានបន្ថែម smថ្នាក់ក្រឡាចត្រង្គថ្មីនៅខាងក្រោម 768pxសម្រាប់ការគ្រប់គ្រងលម្អិតបន្ថែមទៀត។ ឥឡូវនេះយើងមាន xs, sm, md, lgនិង xl. នេះ​ក៏​មាន​ន័យ​ថា​គ្រប់​ថ្នាក់​ត្រូវ​បាន​ដំឡើង​មួយ​កម្រិត​ផង​ដែរ (ដូច្នេះ .col-md-6​នៅ​ក្នុង v3 ឥឡូវ .col-lg-6​ជា v4)។
  • xsថ្នាក់ក្រឡាចត្រង្គត្រូវបានកែប្រែដើម្បីមិនតម្រូវឱ្យ infix តំណាងឱ្យកាន់តែត្រឹមត្រូវថាពួកគេចាប់ផ្តើមអនុវត្តរចនាប័ទ្មនៅ min-width: 0និងមិនមែនជាតម្លៃភីកសែលដែលបានកំណត់។ ជំនួសឱ្យ .col-xs-6វាឥឡូវនេះ .col-6។ ក្រឡាក្រឡាចត្រង្គផ្សេងទៀតទាំងអស់ទាមទារការបញ្ចូល (ឧ. sm) ។
• បានធ្វើបច្ចុប្បន្នភាពទំហំក្រឡាចត្រង្គ mixins និងអថេរ។
  • ឥឡូវ​នេះ Grid gutters មាន​ផែនទី Sass ដូច្នេះ​អ្នក​អាច​បញ្ជាក់​ទទឹង gutter ជាក់លាក់​នៅ​ចំណុច​ឈប់​នីមួយៗ។
  • បានធ្វើបច្ចុប្បន្នភាពក្រឡាចត្រង្គ mixin ដើម្បីប្រើប្រាស់ make-col-readyprep mixin និង a make-colដើម្បីកំណត់ flexនិង max-widthសម្រាប់ទំហំជួរឈរនីមួយៗ។
  • បានផ្លាស់ប្តូរចំណុចបំបែកសំណួរមេឌៀរបស់ប្រព័ន្ធក្រឡាចត្រង្គ និងទទឹងកុងតឺន័រ ដើម្បីគិតគូរសម្រាប់ថ្នាក់ក្រឡាចត្រង្គថ្មី និងធានាថាជួរឈរត្រូវបានបែងចែកស្មើៗគ្នាដោយ 12ទទឹងអតិបរមារបស់វា។
  • ចំណុចបំបែកក្រឡាចត្រង្គ និងទទឹងកុងតឺន័រឥឡូវនេះត្រូវបានគ្រប់គ្រងតាមរយៈផែនទី Sass ( $grid-breakpointsនិង $container-max-widths) ជំនួសឱ្យអថេរមួយចំនួនដាច់ដោយឡែក។ ទាំងនេះជំនួស @screen-*អថេរទាំងស្រុង និងអនុញ្ញាតឱ្យអ្នកប្ដូរក្រឡាក្រឡាចត្រង្គតាមបំណងទាំងស្រុង។
  • សំណួរប្រព័ន្ធផ្សព្វផ្សាយក៏បានផ្លាស់ប្តូរផងដែរ។ ជំនួសឲ្យការប្រកាសសំណួរប្រព័ន្ធផ្សព្វផ្សាយឡើងវិញដោយមានតម្លៃដូចគ្នារាល់ពេល ឥឡូវនេះយើងមាន @include media-breakpoint-up/down/only. ឥឡូវនេះជំនួសឱ្យការសរសេរ @media (min-width: @screen-sm-min) { ... }អ្នកអាចសរសេរបាន @include media-breakpoint-up(sm) { ... }។

សមាសធាតុ

• បន្ទះដែលបានទម្លាក់ រូបតូចៗ និងអណ្តូង សម្រាប់សមាសធាតុថ្មីដែលគ្របដណ្តប់ទាំងអស់ កាត ។
• បានទម្លាក់ពុម្ពអក្សររូបតំណាង Glyphicons ។ ប្រសិនបើអ្នកត្រូវការរូបតំណាង ជម្រើសមួយចំនួនគឺ៖
  • កំណែចុងក្រោយនៃ Glyphicons
  • Octicons
  • ពុម្ពអក្សរអស្ចារ្យ
  • សូមមើល ទំព័រ បន្ថែមសម្រាប់បញ្ជីជម្រើស។ មានការណែនាំបន្ថែមទេ? សូមបើកបញ្ហា ឬ PR ។
• បានទម្លាក់កម្មវិធីជំនួយ Affix jQuery ។
  • យើងសូមណែនាំឱ្យប្រើ position: stickyជំនួសវិញ។ សូមមើល HTML5 សូមបញ្ចូល សម្រាប់ព័ត៌មានលម្អិត និងការណែនាំ polyfill ជាក់លាក់។ ការណែនាំមួយគឺត្រូវប្រើ @supportsច្បាប់សម្រាប់អនុវត្តវា (ឧ, @supports (position: sticky) { ... })/
  • ប្រសិនបើអ្នកកំពុងប្រើ Affix ដើម្បីអនុវត្តបន្ថែម មិនមែនជា positionរចនាប័ទ្ម នោះ polyfills ប្រហែលជាមិនគាំទ្រករណីប្រើប្រាស់របស់អ្នកទេ។ ជម្រើសមួយសម្រាប់ការប្រើប្រាស់បែបនេះគឺបណ្ណាល័យ ScrollPos-Styler ភាគីទីបី ។
• បានទម្លាក់សមាសធាតុ pager ព្រោះវាជាប៊ូតុងប្ដូរតាមបំណងជាសំខាន់។
• បានកែលម្អសមាសធាតុស្ទើរតែទាំងអស់ ដើម្បីប្រើឧបករណ៍ជ្រើសរើសថ្នាក់ដែលមិនមានការដាក់បញ្ចូលបន្ថែមទៀត ជំនួសឱ្យឧបករណ៍ជ្រើសរើសកុមារដែលលើសជាក់លាក់។

ដោយសមាសភាគ

បញ្ជីនេះរំលេចការផ្លាស់ប្តូរសំខាន់ៗតាមសមាសភាគរវាង v3.xx និង v4.0.0។

ចាប់ផ្ដើមឡើងវិញ

ថ្មីចំពោះ Bootstrap 4 គឺជាការ ចាប់ផ្ដើមឡើងវិញ ដែលជាសន្លឹករចនាប័ទ្មថ្មីដែលបង្កើតនៅលើ Normalize ជាមួយនឹងរចនាប័ទ្មកំណត់ឡើងវិញដែលយល់ឃើញខ្លះៗរបស់យើង។ អ្នកជ្រើសរើសដែលលេចឡើងក្នុងឯកសារនេះប្រើតែធាតុប៉ុណ្ណោះ - មិនមានថ្នាក់នៅទីនេះទេ។ វាញែករចនាប័ទ្មកំណត់ឡើងវិញរបស់យើងពីរចនាប័ទ្មសមាសភាគរបស់យើងសម្រាប់វិធីសាស្រ្តម៉ូឌុលបន្ថែមទៀត។ ការកំណត់ឡើងវិញដ៏សំខាន់បំផុតមួយចំនួន រួមមានការ box-sizing: border-boxផ្លាស់ប្តូរ ការផ្លាស់ប្តូរពី ឯកតា emទៅ remធាតុជាច្រើន រចនាប័ទ្មតំណ និងធាតុទម្រង់ជាច្រើនកំណត់ឡើងវិញ។

វាយអក្សរ

• បានផ្លាស់ទី .text-ឧបករណ៍ប្រើប្រាស់ទាំងអស់ទៅ _utilities.scssឯកសារ។
• បានទម្លាក់ .page-headerដូចជា ក្រៅពីព្រំដែន រចនាប័ទ្មទាំងអស់របស់វាអាចត្រូវបានអនុវត្តតាមរយៈឧបករណ៍ប្រើប្រាស់។
• .dl-horizontalត្រូវបានទម្លាក់។ ជំនួសមកវិញ ប្រើ .rowនៅលើ <dl>និងប្រើថ្នាក់ជួរឈរក្រឡាចត្រង្គ (ឬ mixins) នៅលើវា <dt>និង <dd>កូន។
• <blockquote>រចនាប័ទ្ម ផ្ទាល់ខ្លួន បានផ្លាស់ប្តូរទៅថ្នាក់- .blockquoteនិងកម្មវិធី .blockquote-reverseកែប្រែ។
• .list-inlineឥឡូវ​នេះ​តម្រូវ​ឱ្យ​កូន​របស់​ខ្លួន​ក្នុង​បញ្ជី​មាន .list-inline-item​ថ្នាក់​ថ្មី​ត្រូវ​បាន​អនុវត្ត​ចំពោះ​ពួក​គេ។

រូបភាព

• បានប្តូរឈ្មោះ .img-responsiveទៅជា .img-fluid។
• បានប្តូរឈ្មោះ .img-roundedទៅជា.rounded
• បានប្តូរឈ្មោះ .img-circleទៅជា.rounded-circle

តុ

• ស្ទើរតែគ្រប់ឧទាហរណ៍ទាំងអស់នៃ >កម្មវិធីជ្រើសរើសត្រូវបានដកចេញ មានន័យថា តារាងដែលដាក់ជាប់គ្នានឹងទទួលមរតករចនាប័ទ្មដោយស្វ័យប្រវត្តិពីឪពុកម្តាយរបស់ពួកគេ។ នេះ​ជួយ​សម្រួល​យ៉ាង​ខ្លាំង​ដល់​អ្នក​ជ្រើសរើស​របស់​យើង និង​ការ​ប្ដូរ​តាម​បំណង​ដ៏​មាន​សក្តានុពល។
• តារាងដែលឆ្លើយតបលែងត្រូវការធាតុរុំទៀតហើយ។ ជំនួសមកវិញ គ្រាន់តែដាក់ .table-responsiveខាងស្តាំលើ <table>.
• ប្តូរឈ្មោះ .table-condensedទៅ .table-smជាភាពស៊ីសង្វាក់គ្នា។
• បានបន្ថែម .table-inverseជម្រើសថ្មីមួយ។
• បានបន្ថែមការកែប្រែបឋមកថាតារាង៖ .thead-defaultនិង .thead-inverse.
• បានប្តូរឈ្មោះថ្នាក់បរិបទដើម្បីឱ្យមាន .table--prefix ។ ដូច្នេះ .active, .success, .warning, .dangerនិង , , , និង . .info_.table-active.table-success.table-warning.table-danger.table-info

ទម្រង់

• ធាតុដែលបានផ្លាស់ទីកំណត់ឡើងវិញទៅ _reboot.scssឯកសារ។
• បានប្តូរឈ្មោះ .control-labelទៅជា .col-form-label។
• ប្តូរឈ្មោះ .input-lgនិង .input-smទៅ .form-control-lgនិង .form-control-smរៀងៗខ្លួន។
• ថ្នាក់ ​ធ្លាក់​ចុះ .form-group-*​សម្រាប់​ភាព​សាមញ្ញ។ ប្រើ .form-control-*ថ្នាក់ជំនួសវិញឥឡូវនេះ។
• បានទម្លាក់ .help-blockនិងជំនួសវាដោយ .form-textសម្រាប់អត្ថបទជំនួយកម្រិតប្លុក។ សម្រាប់អត្ថបទជំនួយក្នុងបន្ទាត់ និងជម្រើសដែលអាចបត់បែនបានផ្សេងទៀត សូមប្រើថ្នាក់ឧបករណ៍ប្រើប្រាស់ដូចជា .text-muted.
• ទម្លាក់ .radio-inlineនិង .checkbox-inline។
• បង្រួបបង្រួម .checkboxនិង .radioចូល .form-checkនិង .form-check-*ថ្នាក់ផ្សេងៗ។
• ទម្រង់ផ្ដេកត្រូវបានជួសជុលឡើងវិញ៖
  • បានទម្លាក់ .form-horizontalតម្រូវការថ្នាក់។
  • .form-groupលែងអនុវត្តរចនាប័ទ្មពី .rowតាមរយៈ mixin ទៀតហើយ ដូច្នេះ .rowឥឡូវនេះត្រូវបានទាមទារសម្រាប់ប្លង់ក្រឡាចត្រង្គផ្តេក (ឧទាហរណ៍ <div class="form-group row">)។
  • បាន ​បន្ថែម .col-form-label​ថ្នាក់​ថ្មី​ទៅ​ស្លាក​កណ្តាល​បញ្ឈរ​ជាមួយ .form-controls ។
  • បាន បន្ថែមថ្មី .form-rowសម្រាប់ប្លង់ទម្រង់តូចជាមួយនឹងថ្នាក់ក្រឡាចត្រង្គ (ប្តូររបស់អ្នក .rowសម្រាប់មួយ .form-rowហើយទៅ)។
• បានបន្ថែមការគាំទ្រទម្រង់ផ្ទាល់ខ្លួន (សម្រាប់ប្រអប់ធីក វិទ្យុ ការជ្រើសរើស និងការបញ្ចូលឯកសារ)។
• ជំនួស .has-error, .has-warningនិង .has-successថ្នាក់ជាមួយនឹងសុពលភាពទម្រង់ HTML5 តាមរយៈ CSS :invalidនិង :validpseudo-class ។
• បានប្តូរឈ្មោះ .form-control-staticទៅជា .form-control-plaintext។

ប៊ូតុង

• បានប្តូរឈ្មោះ .btn-defaultទៅជា .btn-secondary។
• បាន​ទម្លាក់ .btn-xs​ថ្នាក់​ទាំង​ស្រុង​ដូច .btn-sm​ជា​សមាមាត្រ​តូច​ជាង​ v3 ។
• មុខងារ ប៊ូតុង មានសភាពនៃ button.jsកម្មវិធីជំនួយ jQuery ត្រូវបានទម្លាក់។ នេះរួមបញ្ចូល $().button(string)និង $().button('reset')វិធីសាស្រ្ត។ យើងណែនាំអោយប្រើ JavaScript ផ្ទាល់ខ្លួនបន្តិចបន្តួចជំនួសវិញ ដែលនឹងមានអត្ថប្រយោជន៍ក្នុងការធ្វើដូចដែលអ្នកចង់បាន។
  • ចំណាំថាលក្ខណៈពិសេសផ្សេងទៀតនៃកម្មវិធីជំនួយ (ប្រអប់ធីកប៊ូតុង វិទ្យុប៊ូតុង ប៊ូតុងបិទបើកតែមួយ) ត្រូវបានរក្សាទុកនៅក្នុង v4 ។
• ប្តូរប៊ូតុង [disabled]ទៅ :disabledជា IE9+ គាំទ្រ :disabled។ ទោះយ៉ាងណាក៏ដោយ fieldset[disabled]នៅតែចាំបាច់ ពីព្រោះ សំណុំវាលដែលបិទដំណើរការដើមនៅតែមានបញ្ហានៅក្នុង IE11 ។

ក្រុមប៊ូតុង

• សរសេរសមាសភាគឡើងវិញជាមួយ flexbox ។
• បានដកចេញ .btn-group-justified។ ក្នុងនាមជាការជំនួសអ្នកអាចប្រើ <div class="btn-group d-flex" role="group"></div>ជារុំជុំវិញធាតុជាមួយ .w-100.
• បានទម្លាក់ .btn-group-xsថ្នាក់ដែលបានផ្តល់ឱ្យទាំងស្រុងនូវការដកចេញ .btn-xs។
• ដកគម្លាតច្បាស់លាស់រវាងក្រុមប៊ូតុងនៅក្នុងរបារឧបករណ៍ប៊ូតុង។ ប្រើឧបករណ៍ប្រើប្រាស់រឹមឥឡូវនេះ។
• ឯកសារដែលបានកែលម្អសម្រាប់ប្រើជាមួយសមាសធាតុផ្សេងទៀត។

ទម្លាក់ចុះ

• បានប្តូរពីឧបករណ៍ជ្រើសរើសមេទៅថ្នាក់ឯកវចនៈសម្រាប់សមាសធាតុទាំងអស់ ធាតុកែប្រែ។ល។
• រចនាប័ទ្ម​ទម្លាក់ចុះ​សាមញ្ញ​ដើម្បី​លែង​បញ្ជូន​ដោយ​ព្រួញ​ឡើង​លើ ឬ​ចុះក្រោម​ដែល​ភ្ជាប់​ទៅ​ម៉ឺនុយ​ទម្លាក់​ចុះ។
• ការទម្លាក់ចុះអាចត្រូវបានបង្កើតជាមួយ <div>s ឬ <ul>s ឥឡូវនេះ។
• រចនា​រចនាប័ទ្ម​ទម្លាក់​ចុះ​ឡើងវិញ​និង​ការ​សម្គាល់​ដើម្បី​ផ្តល់​នូវ​ការ​ងាយ​ស្រួល​, ការ​គាំទ្រ​ដែល​មាន​ស្រាប់​សម្រាប់ ​ធាតុ​ទម្លាក់​ចុះ​ដែល​មាន​មូលដ្ឋាន <a>​។<button>
• បានប្តូរឈ្មោះ .dividerទៅជា .dropdown-divider។
• ធាតុទម្លាក់ចុះឥឡូវនេះទាមទារ .dropdown-item។
• បិទ/បើក​ទម្លាក់​ចុះ​លែង​ទាមទារ​ឱ្យ​មាន​ការ​បញ្ជាក់​ច្បាស់​លាស់ <span class="caret"></span>​; ឥឡូវនេះវាត្រូវបានផ្តល់ជូនដោយស្វ័យប្រវត្តិតាមរយៈ CSS's ::afteron .dropdown-toggle.

ប្រព័ន្ធក្រឡាចត្រង្គ

• បានបន្ថែម 576pxចំណុចបំបែកក្រឡាចត្រង្គ ថ្មី smមានន័យថាឥឡូវនេះមាន 5 ថ្នាក់សរុប ( xs, sm, md, lg, និង xl)។
• បានប្តូរឈ្មោះថ្នាក់កែប្រែក្រឡាចត្រង្គដែលឆ្លើយតបពី .col-{breakpoint}-{modifier}-{size}ទៅ .{modifier}-{breakpoint}-{size}សម្រាប់ថ្នាក់ក្រឡាចត្រង្គសាមញ្ញជាង។
• ទម្លាក់ និងទាញថ្នាក់កែប្រែសម្រាប់ថ្នាក់ប្រើ flexbox ថ្មី order។ ឧទាហរណ៍ ជំនួសឱ្យ .col-8.push-4និង .col-4.pull-8អ្នកនឹងប្រើ .col-8.order-2និង .col-4.order-1.
• បានបន្ថែមថ្នាក់ឧបករណ៍ប្រើប្រាស់ flexbox សម្រាប់ប្រព័ន្ធក្រឡាចត្រង្គ និងសមាសធាតុ។

រាយក្រុម

• សរសេរសមាសភាគឡើងវិញជាមួយ flexbox ។
• ជំនួស a.list-group-itemដោយថ្នាក់ជាក់លាក់មួយ .list-group-item-actionសម្រាប់ការកំណត់រចនាប័ទ្ម និងកំណែប៊ូតុងនៃធាតុក្រុមបញ្ជី។
• បាន បន្ថែម .list-group-flushថ្នាក់សម្រាប់ប្រើជាមួយកាត។

ម៉ូឌុល

• សរសេរសមាសភាគឡើងវិញជាមួយ flexbox ។
• ដោយសារការផ្លាស់ទីទៅ flexbox ការតម្រឹមនៃរូបតំណាងច្រានចោលនៅក្នុងបឋមកថាទំនងជាខូច ដោយសារយើងលែងប្រើអណ្តែត។ មាតិកាអណ្តែតកើតឡើងមុនគេ ប៉ុន្តែជាមួយនឹង flexbox នោះលែងជាករណីទៀតហើយ។ ធ្វើបច្ចុប្បន្នភាពរូបតំណាងច្រានចោលរបស់អ្នក ដើម្បីមកក្រោយចំណងជើងម៉ូឌុលដែលត្រូវជួសជុល។
• ជម្រើស remote(ដែលអាចត្រូវបានប្រើដើម្បីផ្ទុកដោយស្វ័យប្រវត្តិ និងបញ្ចូលមាតិកាខាងក្រៅទៅក្នុងម៉ូឌុល) ហើយ loaded.bs.modalព្រឹត្តិការណ៍ដែលត្រូវគ្នាត្រូវបានដកចេញ។ យើង​សូម​ណែនាំ​ជំនួស​វិញ​ដោយ​ប្រើ​គំរូ​ខាង​អតិថិជន ឬ​ក្របខ័ណ្ឌ​ចងទិន្នន័យ ឬ​ហៅ ​ទៅ jQuery.load ដោយខ្លួនឯង។

កងទ័ពជើងទឹក

• សរសេរសមាសភាគឡើងវិញជាមួយ flexbox ។
• បានទម្លាក់ >ឧបករណ៍ជ្រើសរើសស្ទើរតែទាំងអស់សម្រាប់រចនាប័ទ្មសាមញ្ញជាងតាមរយៈថ្នាក់ដែលមិនមានការដាក់។
• ជំនួសឱ្យឧបករណ៍ជ្រើសរើស HTML ជាក់លាក់ដូចជា .nav > li > aយើងប្រើថ្នាក់ដាច់ដោយឡែកសម្រាប់ .navs, .nav-items និង .nav-links ។ វាធ្វើឱ្យ HTML របស់អ្នកកាន់តែមានភាពបត់បែន ខណៈពេលដែលនាំមកនូវការពង្រីកបន្ថែម។

Navbar

navbar ត្រូវបានសរសេរឡើងវិញទាំងស្រុងនៅក្នុង flexbox ជាមួយនឹងការគាំទ្រប្រសើរឡើងសម្រាប់ការតម្រឹម ការឆ្លើយតប និងការប្ដូរតាមបំណង។

• ឥរិយាបទ navbar ឆ្លើយតបឥឡូវនេះត្រូវបានអនុវត្តទៅ .navbarថ្នាក់តាមរយៈ តម្រូវការ .navbar-expand-{breakpoint} ដែលអ្នកជ្រើសរើសកន្លែងដែលត្រូវបង្រួមរបាររុករក។ ពីមុននេះគឺជាការកែប្រែអថេរតិច ហើយតម្រូវឱ្យចងក្រងឡើងវិញ។
• .navbar-defaultឥឡូវនេះ .navbar-lightទោះបីជា .navbar-darkនៅតែដដែល។ មួយក្នុងចំណោមទាំងនេះត្រូវបានទាមទារនៅលើរបាររុករកនីមួយៗ។ ទោះយ៉ាងណាក៏ដោយ ថ្នាក់ទាំងនេះលែងកំណត់ background-colors ទៀតហើយ។ ផ្ទុយទៅវិញ ពួកគេគ្រាន់តែប៉ះពាល់ប៉ុណ្ណោះ color។
• ឥឡូវនេះ Navbars ទាមទារការប្រកាសផ្ទៃខាងក្រោយនៃប្រភេទមួយចំនួន។ ជ្រើសរើសពីឧបករណ៍ប្រើប្រាស់ផ្ទៃខាងក្រោយរបស់យើង ( .bg-*) ឬកំណត់ដោយខ្លួនឯងជាមួយនឹងថ្នាក់ពន្លឺ/បញ្ច្រាសខាងលើ សម្រាប់ការប្ដូរតាមបំណងឆ្កួត ។
• ដោយបានផ្តល់រចនាប័ទ្ម flexbox ឥឡូវនេះ navbars អាចប្រើឧបករណ៍ប្រើប្រាស់ flexbox សម្រាប់ជម្រើសតម្រឹមងាយស្រួល។
• .navbar-toggleឥឡូវ​នេះ .navbar-toggler​ហើយ​មាន​រចនាប័ទ្ម​ខុស​គ្នា​និង​ការ​សម្គាល់​ផ្នែក​ខាង​ក្នុង (មិន​មាន​បី​ទៀត <span>​) ។
• បានទម្លាក់ .navbar-formថ្នាក់ទាំងស្រុង។ វាមិនចាំបាច់ទៀតទេ; ជំនួសមកវិញ គ្រាន់តែប្រើ .form-inlineនិងអនុវត្តឧបករណ៍ប្រើប្រាស់រឹមតាមការចាំបាច់។
• Navbars លែងរួមបញ្ចូល margin-bottomឬ border-radiusតាមលំនាំដើមទៀតហើយ។ ប្រើប្រាស់ឧបករណ៍ប្រើប្រាស់តាមការចាំបាច់។
• ឧទាហរណ៍ទាំងអស់ដែលមាន navbars ត្រូវបានធ្វើបច្ចុប្បន្នភាពដើម្បីរួមបញ្ចូលការសម្គាល់ថ្មី។

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

• សរសេរសមាសភាគឡើងវិញជាមួយ flexbox ។
• ថ្នាក់ជាក់លាក់ ( .page-item, .page-link) ឥឡូវនេះត្រូវបានទាមទារនៅលើកូនចៅរបស់ .paginations
• បានទម្លាក់ .pagerសមាសភាគទាំងស្រុង ដោយសារវាលើសពីប៊ូតុងគ្រោងតាមបំណងបន្តិច។

ម្សៅនំប៉័ង

• ថ្នាក់ជាក់លាក់មួយ .breadcrumb-item, ឥឡូវនេះត្រូវបានទាមទារនៅលើកូនចៅរបស់ .breadcrumbs

ស្លាកនិងផ្លាកសញ្ញា

• ប្តូរឈ្មោះ .labelទៅជា .badgeដើម្បីផ្តាច់ចេញពី <label>ធាតុ។
• បានទម្លាក់ .badgeសមាសធាតុព្រោះវាស្ទើរតែដូចគ្នាបេះបិទទៅនឹងស្លាក។ ប្រើកម្មវិធី .badge-pillកែប្រែរួមជាមួយនឹងសមាសធាតុស្លាកជំនួសវិញសម្រាប់រូបរាងមូលនោះ។
• ផ្លាកសញ្ញាលែងត្រូវបានអណ្តែតដោយស្វ័យប្រវត្តិនៅក្នុងក្រុមបញ្ជី និងសមាសធាតុផ្សេងទៀតហើយ។ ឥឡូវនេះថ្នាក់ឧបករណ៍ប្រើប្រាស់ត្រូវបានទាមទារសម្រាប់នោះ។
• .badge-defaultត្រូវ​បាន​ទម្លាក់ និង .badge-secondary​បញ្ចូល​ទៅ​ក្នុង​ថ្នាក់​កែប្រែ​សមាសភាគ​ដែល​ត្រូវ​គ្នា​ដែល​បាន​ប្រើ​នៅ​កន្លែង​ផ្សេង។

បន្ទះ រូបតូចៗ និងអណ្តូង

បានទម្លាក់ទាំងស្រុងសម្រាប់សមាសធាតុកាតថ្មី។

បន្ទះ

• .panelទៅ .cardឥឡូវនេះបានសាងសង់ជាមួយ flexbox ។
• .panel-defaultដកចេញហើយគ្មានការជំនួសទេ។
• .panel-groupដកចេញហើយគ្មានការជំនួសទេ។ .card-groupមិនមែនជាការជំនួសទេ វាខុសគ្នា។
• .panel-headingទៅ.card-header
• .panel-titleទៅ .card-title។ អាស្រ័យលើរូបរាងដែលអ្នកចង់បាន អ្នកក៏អាចចង់ប្រើ ធាតុក្បាល ឬថ្នាក់ (ឧទាហរណ៍ <h3>, .h3) ឬធាតុដិត ឬថ្នាក់ (ឧទាហរណ៍ <strong>, <b>, .font-weight-bold)។ ចំណាំថា .card-titleខណៈពេលដែលមានឈ្មោះស្រដៀងគ្នា បង្កើតរូបរាងខុសពី .panel-title.
• .panel-bodyទៅ.card-body
• .panel-footerទៅ.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, និង .panel-dangerត្រូវបានទម្លាក់សម្រាប់ .bg-, .text-, និង .borderឧបករណ៍ប្រើប្រាស់ដែលបានបង្កើតពី $theme-colorsផែនទី Sass របស់យើង។

វឌ្ឍនភាព

• .progress-bar-*ជំនួស ថ្នាក់ បរិបទ ដោយ .bg-*ឧបករណ៍ប្រើប្រាស់។ ឧទាហរណ៍ class="progress-bar progress-bar-danger"ក្លាយជា class="progress-bar bg-danger"។
• ជំនួស .activeសម្រាប់របារវឌ្ឍនភាពដែលមានចលនាជាមួយ .progress-bar-animated.

វង់

• ជួសជុលផ្នែកទាំងមូល ដើម្បីសម្រួលការរចនា និងរចនាប័ទ្ម។ យើងមានរចនាប័ទ្មតិចជាងមុនសម្រាប់អ្នកដើម្បីបដិសេធ សូចនាករថ្មី និងរូបតំណាងថ្មី។
• CSS ទាំងអស់​ត្រូវ​បាន​គេ​មិន​បាន​ដាក់​បញ្ចូល​គ្នា និង​ប្តូរ​ឈ្មោះ ដោយ​ធានា​ថា​ថ្នាក់​នីមួយៗ​ត្រូវ​បាន​ដាក់​បុព្វបទ​ជាមួយ .carousel-.
  • សម្រាប់ធាតុរង្វង់ , .next, .prev, .leftនិង .rightឥឡូវនេះ .carousel-item-next, .carousel-item-prev, .carousel-item-left, និង .carousel-item-right.
  • .itemគឺឥឡូវនេះផងដែរ .carousel-item។
  • សម្រាប់ការគ្រប់គ្រងមុន/បន្ទាប់ .carousel-control.rightហើយ .carousel-control.leftឥឡូវនេះ .carousel-control-nextនិង .carousel-control-prevមានន័យថា ពួកគេលែងត្រូវការថ្នាក់មូលដ្ឋានជាក់លាក់ទៀតហើយ។
• បាន​លុប​រចនាប័ទ្ម​ឆ្លើយតប​ទាំងអស់ ដោយ​ពន្យារ​ទៅ​ឧបករណ៍​ប្រើប្រាស់ (ឧ. បង្ហាញ​ចំណង​ជើង​លើ​ច្រក​មើល​ជាក់លាក់) និង​រចនាប័ទ្ម​ផ្ទាល់ខ្លួន​តាម​តម្រូវការ។
• រូបភាពដែលបានលុបលុបពីលើសម្រាប់រូបភាពនៅក្នុងធាតុរង្វង់ ដោយពន្យារទៅឧបករណ៍ប្រើប្រាស់។
• បានកែប្រែឧទាហរណ៍ Carousel ដើម្បីរួមបញ្ចូលការសម្គាល់ និងរចនាប័ទ្មថ្មី។

តុ

• ការ​គាំទ្រ​បាន​ដក​ចេញ​សម្រាប់​តារាង​ដែល​មាន​រចនាប័ទ្ម។ រចនាប័ទ្មតារាងទាំងអស់ឥឡូវនេះត្រូវបានទទួលមរតកនៅក្នុង v4 សម្រាប់អ្នកជ្រើសរើសសាមញ្ញជាង។
• បានបន្ថែមវ៉ារ្យ៉ង់តារាងបញ្ច្រាស។

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

• បង្ហាញ លាក់ និងច្រើនទៀត៖
  • បានបង្កើតឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប (ឧទាហរណ៍ .d-noneនិង d-{sm,md,lg,xl}-none)។
  • បានទម្លាក់ឧបករណ៍ប្រើប្រាស់ភាគច្រើន សម្រាប់ឧបករណ៍ប្រើប្រាស់ បង្ហាញ.hidden-* ថ្មី ។ ឧទាហរណ៍ ជំនួសឱ្យ ប្រើ ។ បានប្តូរឈ្មោះ ឧបករណ៍ប្រើប្រាស់ ដើម្បីប្រើគ្រោងការណ៍ដាក់ឈ្មោះឧបករណ៍ប្រើប្រាស់បង្ហាញ។ ព័ត៌មានបន្ថែមនៅក្រោមផ្នែកឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតបនៃទំព័រនេះ។.hidden-sm-up.d-sm-none.hidden-print
  • បាន បន្ថែម .float-{sm,md,lg,xl}-{left,right,none}ថ្នាក់សម្រាប់អណ្តែតដែលឆ្លើយតប និងបានដកចេញ .pull-leftហើយ .pull-rightចាប់តាំងពីពួកវាមិនដូចគ្នាទៅនឹង .float-leftនិង .float-right.
• ប្រភេទ៖
  • បានបន្ថែមការប្រែប្រួលឆ្លើយតបទៅនឹងថ្នាក់តម្រឹមអត្ថបទរបស់យើង .text-{sm,md,lg,xl}-{left,center,right}។
• ការតម្រឹមនិងគម្លាត៖
  • បាន បន្ថែម រឹមឆ្លើយតបថ្មី និងឧបករណ៍ប្រើប្រាស់ទ្រនាប់ សម្រាប់គ្រប់ភាគី បូករួមទាំងអក្សរកាត់បញ្ឈរ និងផ្ដេក។
  • បាន បន្ថែមការផ្ទុកទូកនៃ ឧបករណ៍ flexbox ។
  • ធ្លាក់ .center-blockសម្រាប់ .mx-autoថ្នាក់ថ្មី។
• Clearfix បានធ្វើបច្ចុប្បន្នភាពដើម្បីទម្លាក់ការគាំទ្រសម្រាប់កំណែកម្មវិធីរុករកចាស់។

អ្នកលក់បុព្វបទ mixins

Mixins បុព្វបទអ្នកលក់ របស់ Bootstrap 3 ដែលត្រូវបានបដិសេធក្នុង v3.2.0 ត្រូវបានដកចេញនៅក្នុង Bootstrap 4។ ចាប់តាំងពីយើងប្រើ Autoprefixer ពួកគេលែងត្រូវការទៀតហើយ។

បានលុបការលាយបញ្ចូលខាងក្រោម៖ animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, , animation-iteration-count, animation-name, animation-timing-function, , backface-visibility, box-sizing, content-columns, , hyphens, opacity, , perspective, perspective-origin, , rotate, rotateX, , rotateY, scale, , scaleX, scaleY, , skew, transform-origin, transition-delay, , transition-duration, transition-property, transition-timing-function, , transition-transform, translate, translate3d,user-select

ឯកសារ

ឯកសាររបស់យើងបានទទួលការធ្វើឱ្យប្រសើរឡើងនៅទូទាំងក្រុមប្រឹក្សាភិបាលផងដែរ។ ខាងក្រោម​នេះ​ជា​កម្រិត​ទាប៖

• យើងនៅតែប្រើ Jekyll ប៉ុន្តែយើងមានកម្មវិធីជំនួយក្នុងការលាយបញ្ចូលគ្នា៖
  • bugify.rbត្រូវ​បាន​ប្រើ​ដើម្បី​រាយ​ធាតុ​យ៉ាង​មាន​ប្រសិទ្ធភាព​នៅ​លើ ​ទំព័រ ​កំហុស​របស់​កម្មវិធី​រុករក ​របស់​យើង ។
  • example.rbគឺជា fork ផ្ទាល់ខ្លួនរបស់ highlight.rbកម្មវិធីជំនួយលំនាំដើម ដែលអនុញ្ញាតឱ្យមានភាពងាយស្រួលក្នុងការដោះស្រាយកូដឧទាហរណ៍។
  • callout.rbគឺ​ជា​សម​ស្រប​តាម​បំណង​ស្រដៀង​គ្នា​នេះ ប៉ុន្តែ​បាន​រចនា​ឡើង​សម្រាប់​ការ​ហៅ​ចេញ​ឯកសារ​ពិសេស​របស់​យើង។
  • markdown-block.rbត្រូវបានប្រើដើម្បីបង្ហាញអត្ថបទ Markdown នៅក្នុងធាតុ HTML ដូចជាតារាង។
  • jekyll-toc ត្រូវបានប្រើដើម្បីបង្កើតតារាងមាតិការបស់យើង។
• មាតិកាឯកសារទាំងអស់ត្រូវបានសរសេរឡើងវិញនៅក្នុង Markdown (ជំនួសឱ្យ HTML) ដើម្បីងាយស្រួលកែសម្រួល។
• ទំព័រត្រូវបានរៀបចំឡើងវិញសម្រាប់មាតិកាសាមញ្ញជាងមុន និងឋានានុក្រមដែលអាចចូលទៅជិតបាន។
• យើងបានផ្លាស់ប្តូរពី CSS ធម្មតាទៅ SCSS ដើម្បីទាញយកអត្ថប្រយោជន៍ពេញលេញពីអថេរ របស់ Bootstrap, mixins និងច្រើនទៀត។

ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប

អថេរ ទាំងអស់ @screen-ត្រូវបានដកចេញនៅក្នុង v4.0.0 ។ ប្រើ Sass mixins ឬ Sass map ជំនួសវិញ media-breakpoint-up()។media-breakpoint-down()media-breakpoint-only()$grid-breakpoints

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតបរបស់យើងត្រូវបានដកចេញភាគច្រើនដើម្បីគាំទ្រដល់ឧបករណ៍ប្រើប្រាស់ច្បាស់លាស់ display។

• ថ្នាក់ .hiddenនិង .show​ថ្នាក់​ត្រូវ​បាន​យក​ចេញ​ដោយ​សារ​តែ​វា​មាន​ភាព​ផ្ទុយ​គ្នា​ជាមួយ​នឹង jQuery $(...).hide()និង $(...).show()​វិធីសាស្ត្រ។ ជំនួសមកវិញ ព្យាយាមបិទបើក [hidden]គុណលក្ខណៈ ឬប្រើរចនាប័ទ្មក្នុងបន្ទាត់ដូច style="display: none;"និង style="display: block;".
• ថ្នាក់ ទាំងអស់ .hidden-ត្រូវបានដកចេញ រក្សាទុកសម្រាប់ឧបករណ៍ប្រើប្រាស់បោះពុម្ពដែលត្រូវបានប្តូរឈ្មោះ។
  • ដកចេញពី v3៖.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • ដកចេញពី v4 alphas៖.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ឧបករណ៍ប្រើប្រាស់បោះពុម្ពលែងចាប់ផ្តើមជាមួយ .hidden-ឬ .visible-ប៉ុន្តែជាមួយ .d-print-.
  • ឈ្មោះចាស់៖ .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • ថ្នាក់ថ្មី៖ .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

ជាជាងប្រើ .visible-*ថ្នាក់ច្បាស់លាស់ អ្នកធ្វើឱ្យធាតុមើលឃើញដោយគ្រាន់តែមិនលាក់វានៅទំហំអេក្រង់នោះ។ អ្នក​អាច​ផ្សំ .d-*-none​ថ្នាក់​មួយ​ជាមួយ .d-*-block​ថ្នាក់​មួយ​ដើម្បី​បង្ហាញ​ធាតុ​មួយ​តែ​លើ​ចន្លោះ​ពេល​ដែល​បាន​ផ្ដល់​ឱ្យ​នៃ​ទំហំ​អេក្រង់​ប៉ុណ្ណោះ (ឧ. .d-none.d-md-block.d-xl-noneបង្ហាញ​ធាតុ​តែ​លើ​ឧបករណ៍​មធ្យម និង​ធំ)។

ចំណាំថាការផ្លាស់ប្តូរទៅចំណុចបំបែកក្រឡាចត្រង្គនៅក្នុង v4 មានន័យថាអ្នកនឹងត្រូវចូលទៅកាន់ចំណុចឈប់មួយធំជាងដើម្បីសម្រេចបានលទ្ធផលដូចគ្នា។ ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតបថ្មីមិនព្យាយាមសម្របសម្រួលករណីទូទៅតិចជាង ដែលភាពមើលឃើញរបស់ធាតុមួយមិនអាចត្រូវបានបង្ហាញជាជួរជាប់គ្នានៃទំហំទិដ្ឋភាព។ ជំនួសមកវិញ អ្នកត្រូវប្រើ CSS ផ្ទាល់ខ្លួនក្នុងករណីបែបនេះ។