វិធីសាស្រ្ត

ខណៈពេលដែលទំព័រចាប់ផ្តើមផ្តល់ដំណើរទេសចរណ៍ណែនាំអំពីគម្រោង និងអ្វីដែលវាផ្តល់ជូន ឯកសារនេះផ្តោតលើ មូលហេតុដែល យើងធ្វើកិច្ចការដែលយើងធ្វើនៅក្នុង Bootstrap ។ វាពន្យល់ពីទស្សនវិជ្ជារបស់យើងក្នុងការកសាងគេហទំព័រ ដើម្បីឱ្យអ្នកដទៃអាចរៀនពីយើង រួមចំណែកជាមួយយើង និងជួយយើងឱ្យប្រសើរឡើង។

មើលអ្វីដែលមិនត្រឹមត្រូវ ឬប្រហែលជាអាចធ្វើវាបានប្រសើរជាងនេះ? បើកបញ្ហា - យើងចង់ពិភាក្សាវាជាមួយអ្នក។

សង្ខេប

យើង​នឹង​ចូល​ទៅ​ក្នុង​ចំណុច​នីមួយៗ​បន្ថែម​ទៀត ប៉ុន្តែ​នៅ​កម្រិត​ខ្ពស់ នេះ​ជា​អ្វី​ដែល​ណែនាំ​វិធីសាស្រ្ត​របស់​យើង។

• សមាសធាតុគួរតែឆ្លើយតប និងចល័តជាមុនសិន
• សមាសធាតុគួរតែត្រូវបានបង្កើតជាមួយថ្នាក់មូលដ្ឋាន និងពង្រីកតាមរយៈថ្នាក់កែប្រែ
• រដ្ឋសមាសធាតុគួរតែគោរពតាមមាត្រដ្ឋាន z-index ទូទៅ
• នៅពេលណាដែលអាចធ្វើទៅបាន ចូលចិត្តការអនុវត្ត HTML និង CSS ជាង JavaScript
• នៅពេលណាដែលអាចធ្វើទៅបាន សូមប្រើឧបករណ៍ប្រើប្រាស់លើរចនាប័ទ្មផ្ទាល់ខ្លួន
• នៅពេលណាដែលអាចធ្វើទៅបាន ជៀសវាងការអនុវត្តតម្រូវការ HTML ដ៏តឹងរឹង (ឧបករណ៍ជ្រើសរើសកុមារ)

ឆ្លើយតប

រចនាប័ទ្មឆ្លើយតបរបស់ Bootstrap ត្រូវបានបង្កើតឡើងដើម្បីឱ្យមានការឆ្លើយតប ដែលជាវិធីសាស្រ្តមួយដែលត្រូវបានសំដៅជាញឹកញាប់ថាជា mobile-first ។ យើងប្រើពាក្យនេះនៅក្នុងឯកសាររបស់យើង ហើយភាគច្រើនយល់ស្របជាមួយវា ប៉ុន្តែពេលខ្លះវាអាចទូលំទូលាយពេក។ ខណៈពេលដែលមិនមែនគ្រប់សមាសធាតុទាំងអស់ ត្រូវតែ ឆ្លើយតបទាំងស្រុងនៅក្នុង Bootstrap វិធីសាស្រ្តឆ្លើយតបនេះគឺអំពីការកាត់បន្ថយការបដិសេធ CSS ដោយជំរុញឱ្យអ្នកបន្ថែមរចនាប័ទ្មនៅពេលច្រកចូលមើលកាន់តែធំ។

នៅទូទាំង Bootstrap អ្នកនឹងឃើញវាច្បាស់បំផុតនៅក្នុងសំណួរប្រព័ន្ធផ្សព្វផ្សាយរបស់យើង។ ក្នុងករណីភាគច្រើន យើងប្រើ min-widthសំណួរដែលចាប់ផ្តើមអនុវត្តនៅចំណុចបំបែកជាក់លាក់មួយ ហើយអនុវត្តតាមរយៈចំណុចបំបែកខ្ពស់ជាងនេះ។ ឧទាហរណ៍ .d-noneការអនុវត្តពី min-width: 0ភាពគ្មានទីបញ្ចប់។ ម្យ៉ាងវិញទៀត .d-md-noneការអនុវត្តពីចំណុចបំបែកមធ្យម និងឡើង។

ពេលខ្លះ យើងនឹងប្រើ max-widthនៅពេលដែលភាពស្មុគស្មាញពីកំណើតរបស់សមាសធាតុទាមទារវា។ ពេលខ្លះ ការបដិសេធទាំងនេះមានមុខងារ និងផ្លូវចិត្តច្បាស់លាស់ជាងក្នុងការអនុវត្ត និងគាំទ្រជាងការសរសេរឡើងវិញនូវមុខងារស្នូលពីសមាសធាតុរបស់យើង។ យើងព្យាយាមកំណត់វិធីសាស្រ្តនេះ ប៉ុន្តែនឹងប្រើវាពីពេលមួយទៅពេលមួយ។

ថ្នាក់

ក្រៅពីការចាប់ផ្ដើមឡើងវិញរបស់យើង សន្លឹករចនាប័ទ្មធម្មតានៃកម្មវិធីរុករកឆ្លង រចនាប័ទ្មទាំងអស់របស់យើងមានគោលបំណងប្រើថ្នាក់ជាអ្នកជ្រើសរើស។ នេះមានន័យថា​ការបញ្ជា​ឱ្យ​ច្បាស់លាស់​នៃ​ប្រភេទ​ជម្រើស (ឧ, input[type="text"]) និងថ្នាក់មេ​បន្ថែម (ឧ, .parent .child) ដែល​ធ្វើឱ្យ​រចនាប័ទ្ម​ជាក់លាក់​ពេក​ដើម្បី​ងាយស្រួល​បដិសេធ។

ដូចនេះ សមាសធាតុគួរតែត្រូវបានសាងសង់ឡើងជាមួយនឹងថ្នាក់មូលដ្ឋានដែលបង្កើតគូតម្លៃអចលនទ្រព្យទូទៅ ដែលមិនត្រូវបានបដិសេធ។ ឧទាហរណ៍ .btnនិង .btn-primary។ យើងប្រើ .btnសម្រាប់រចនាប័ទ្មទូទៅទាំងអស់ដូចជា display, paddingនិង border-width. បន្ទាប់​មក​យើង​ប្រើ​កម្មវិធី​កែប្រែ​ដូច​ជា .btn-primary​ដើម្បី​បន្ថែម​ពណ៌​ផ្ទៃ​ខាង​ក្រោយ ពណ៌​ស៊ុម​ពណ៌​ជាដើម។

ថ្នាក់កែប្រែគួរតែត្រូវបានប្រើតែនៅពេលដែលមានលក្ខណៈសម្បត្តិ ឬតម្លៃជាច្រើនដែលត្រូវផ្លាស់ប្តូរនៅទូទាំងវ៉ារ្យ៉ង់ច្រើន។ ការកែប្រែមិនតែងតែចាំបាច់នោះទេ ដូច្នេះត្រូវប្រាកដថាអ្នកពិតជារក្សាទុកបន្ទាត់កូដ និងការពារការបដិសេធដែលមិនចាំបាច់នៅពេលបង្កើតវា។ ឧទាហរណ៍ដ៏ល្អនៃកម្មវិធីកែប្រែគឺជាថ្នាក់ពណ៌ស្បែក និងបំរែបំរួលទំហំរបស់យើង។

មាត្រដ្ឋានសន្ទស្សន៍ z

មាន z-indexមាត្រដ្ឋានពីរនៅក្នុង Bootstrap - ធាតុនៅក្នុងសមាសធាតុមួយ និងសមាសធាតុត្រួតលើគ្នា។

ធាតុផ្សំ

• សមាសធាតុមួយចំនួននៅក្នុង Bootstrap ត្រូវបានបង្កើតឡើងជាមួយនឹងធាតុត្រួតស៊ីគ្នាដើម្បីការពារព្រំដែនទ្វេរដោយមិនកែប្រែ borderទ្រព្យសម្បត្តិ។ ឧទាហរណ៍ ក្រុមប៊ូតុង ក្រុមបញ្ចូល និងលេខទំព័រ។
• សមាសធាតុទាំងនេះចែករំលែកខ្នាតស្តង់ដារ z-indexនៃ 0តាមរយៈ 3.
• 0គឺលំនាំដើម (ដំបូង) 1គឺ :hover, 2គឺ :active/ , .activeនិង 3.:focus
• វិធីសាស្រ្តនេះត្រូវគ្នានឹងការរំពឹងទុករបស់យើងអំពីអាទិភាពអ្នកប្រើប្រាស់ខ្ពស់បំផុត។ ប្រសិនបើធាតុមួយត្រូវបានផ្តោត នោះវាស្ថិតនៅក្នុងទិដ្ឋភាព និងការយកចិត្តទុកដាក់របស់អ្នកប្រើប្រាស់។ ធាតុសកម្មគឺខ្ពស់ជាងគេទីពីរព្រោះវាបង្ហាញពីស្ថានភាព។ Hover គឺខ្ពស់បំផុតទីបី ព្រោះវាបង្ហាញពីចេតនារបស់អ្នកប្រើ ប៉ុន្តែស្ទើរតែ អ្វីៗទាំងអស់ អាចត្រូវបានដាក់។

សមាសធាតុលាប

Bootstrap រួមបញ្ចូលនូវសមាសធាតុមួយចំនួនដែលមានមុខងារជាការលាបលើប្រភេទមួយចំនួន។ នេះរួមបញ្ចូលតាមលំដាប់លំដោយខ្ពស់បំផុត z-indexការទម្លាក់ចុះ របាររុករកថេរ និងស្អិត ម៉ូឌុល ការណែនាំឧបករណ៍ និងផ្ទាំងព័ត៌មាន។ សមាសធាតុទាំងនេះមាន z-indexមាត្រដ្ឋានផ្ទាល់ខ្លួនរបស់ពួកគេដែលចាប់ផ្តើមពី 1000. លេខចាប់ផ្តើមនេះត្រូវបានជ្រើសរើសតាមអំពើចិត្ត និងបម្រើជាបណ្តុំតូចមួយរវាងរចនាប័ទ្មរបស់យើង និងរចនាប័ទ្មផ្ទាល់ខ្លួនរបស់គម្រោងរបស់អ្នក។

សមាសធាតុត្រួតលើគ្នានីមួយៗបង្កើន z-indexតម្លៃរបស់វាបន្តិចបន្តួចតាមរបៀបដែលគោលការណ៍ UI ទូទៅអនុញ្ញាតឱ្យអ្នកប្រើផ្តោត ឬដាក់ធាតុឱ្យនៅតែស្ថិតក្នុងទិដ្ឋភាពគ្រប់ពេលវេលា។ ឧទាហរណ៍ ម៉ូឌុលគឺជាការទប់ស្កាត់ឯកសារ (ឧ. អ្នកមិនអាចធ្វើសកម្មភាពផ្សេងទៀតរក្សាទុកសម្រាប់សកម្មភាពរបស់ម៉ូឌុល) ដូច្នេះយើងដាក់វានៅពីលើរបាររុករករបស់យើង។

ស្វែងយល់បន្ថែមអំពីវានៅក្នុង z-indexទំព័រប្លង់ របស់យើង ។

HTML និង CSS លើ JS

នៅពេលណាដែលអាចធ្វើទៅបាន យើងចូលចិត្តសរសេរ HTML និង CSS លើ JavaScript។ ជាទូទៅ HTML និង CSS មានភាពរីកចម្រើន និងអាចចូលប្រើបានសម្រាប់មនុស្សកាន់តែច្រើននៃកម្រិតបទពិសោធន៍ផ្សេងៗគ្នា។ HTML និង CSS ក៏លឿននៅក្នុងកម្មវិធីរុករករបស់អ្នកជាង JavaScript ហើយជាទូទៅកម្មវិធីរុករករបស់អ្នកផ្តល់នូវមុខងារជាច្រើនសម្រាប់អ្នក។

គោលការណ៍នេះគឺជា JavaScript API ថ្នាក់ដំបូងរបស់យើងដោយប្រើ dataគុណលក្ខណៈ។ អ្នកមិនចាំបាច់សរសេរ JavaScript ស្ទើរតែទាំងអស់ដើម្បីប្រើកម្មវិធីជំនួយ JavaScript របស់យើងទេ។ ជំនួសមកវិញ សរសេរ HTML ។ សូមអានបន្ថែមអំពីវានៅក្នុង ទំព័រទិដ្ឋភាពទូទៅ JavaScript របស់យើង ។

ជាចុងក្រោយ រចនាប័ទ្មរបស់យើងបង្កើតលើឥរិយាបថជាមូលដ្ឋាននៃធាតុគេហទំព័រទូទៅ។ នៅពេលណាដែលអាចធ្វើទៅបាន យើងចូលចិត្តប្រើអ្វីដែលកម្មវិធីរុករកផ្តល់ឱ្យ។ ជាឧទាហរណ៍ អ្នកអាចដាក់ .btnថ្នាក់លើធាតុស្ទើរតែទាំងអស់ ប៉ុន្តែធាតុភាគច្រើនមិនផ្តល់តម្លៃ semantic ឬមុខងារកម្មវិធីរុករកទេ។ ដូច្នេះ ជំនួសមកវិញ យើងប្រើ <button>s និង <a>s ។

ដូចគ្នាទៅនឹងសមាសធាតុស្មុគស្មាញបន្ថែមទៀត។ ខណៈពេលដែលយើង អាច សរសេរកម្មវិធីជំនួយការបញ្ជាក់ទម្រង់ផ្ទាល់ខ្លួនរបស់យើងដើម្បីបន្ថែមថ្នាក់ទៅធាតុមេដោយផ្អែកលើស្ថានភាពនៃធាតុបញ្ចូល ដោយហេតុនេះអនុញ្ញាតឱ្យយើងធ្វើរចនាប័ទ្មអត្ថបទដែលនិយាយថាក្រហម យើងចូលចិត្តប្រើ :valid/ :invalidpseudo-ធាតុដែលគ្រប់កម្មវិធីរុករកផ្តល់ឱ្យយើង។

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

ថ្នាក់ឧបករណ៍ប្រើប្រាស់ - ពីមុនជាជំនួយការនៅក្នុង Bootstrap 3 - គឺជាសម្ព័ន្ធមិត្តដ៏មានឥទ្ធិពលក្នុងការប្រយុទ្ធប្រឆាំងនឹងការហើមពោះ CSS និងដំណើរការទំព័រមិនល្អ។ ថ្នាក់ឧបករណ៍ប្រើប្រាស់ជាធម្មតាគឺជាការផ្គូផ្គងតម្លៃទ្រព្យសម្បត្តិដែលមិនអាចកែប្រែបានតែមួយដែលបានបង្ហាញជាថ្នាក់ (ឧទាហរណ៍ .d-blockតំណាង display: block;) ។ ការអំពាវនាវចម្បងរបស់ពួកគេគឺល្បឿននៃការប្រើប្រាស់នៅពេលសរសេរ HTML និងកំណត់ចំនួន CSS ផ្ទាល់ខ្លួនដែលអ្នកត្រូវសរសេរ។

ជាពិសេសទាក់ទងនឹង CSS ផ្ទាល់ខ្លួន ឧបករណ៍ប្រើប្រាស់អាចជួយប្រយុទ្ធប្រឆាំងនឹងការបង្កើនទំហំឯកសារដោយកាត់បន្ថយគូតម្លៃអចលនទ្រព្យដែលបានធ្វើម្តងទៀតញឹកញាប់បំផុតរបស់អ្នកទៅជាថ្នាក់តែមួយ។ វាអាចមានឥទ្ធិពលយ៉ាងខ្លាំងនៅក្នុងទំហំនៅក្នុងគម្រោងរបស់អ្នក។

HTML ដែលអាចបត់បែនបាន។

ខណៈពេលដែលមិនតែងតែអាចធ្វើទៅបាន យើងព្យាយាមជៀសវាងការមិនជឿហួសហេតុពេកនៅក្នុងតម្រូវការ HTML របស់យើងសម្រាប់សមាសធាតុ។ ដូច្នេះ​ហើយ យើង​ផ្តោត​លើ​ថ្នាក់​ទោល​ក្នុង​អ្នក​ជ្រើសរើស CSS របស់​យើង ហើយ​ព្យាយាម​ជៀសវាង​អ្នក​ជ្រើសរើស​កុមារ​ភ្លាមៗ ( >)។ វាផ្តល់ឱ្យអ្នកនូវភាពបត់បែនកាន់តែច្រើនក្នុងការអនុវត្តរបស់អ្នក និងជួយរក្សា CSS របស់យើងឱ្យកាន់តែសាមញ្ញ និងមិនសូវជាក់លាក់។

អនុសញ្ញាកូដ

មគ្គុទ្ទេសក៍កូដ (ពីអ្នកបង្កើត Bootstrap, @mdo) ឯកសារអំពីរបៀបដែលយើងសរសេរ HTML និង CSS របស់យើងឆ្លងកាត់ Bootstrap ។ វា​បញ្ជាក់​អំពី​គោលការណ៍​ណែនាំ​សម្រាប់​ការ​ធ្វើ​ទ្រង់ទ្រាយ​ទូទៅ លំនាំ​ដើម​សុភវិនិច្ឆ័យ លំដាប់​ទ្រព្យសម្បត្តិ និង​គុណលក្ខណៈ និង​ច្រើន​ទៀត។

យើងប្រើ Stylelint ដើម្បីអនុវត្តស្តង់ដារទាំងនេះ និងច្រើនទៀតនៅក្នុង Sass/CSS របស់យើង។ ការកំណត់រចនាសម្ព័ន្ធ Stylelint ផ្ទាល់ខ្លួនរបស់យើង គឺជាប្រភពបើកចំហ ហើយមានសម្រាប់អ្នកផ្សេងទៀតដើម្បីប្រើប្រាស់ និងពង្រីក។

យើងប្រើ vnu-jar ដើម្បីពង្រឹង HTML ស្តង់ដារ និងអត្ថន័យ ក៏ដូចជាការរកឃើញកំហុសទូទៅ។