ស្វែងយល់ពីការ​ប្រើ​ប្រាស់ Button ជាមួយនឹង Bootstrap

♦  ​រៀបរៀងអត្ថបទឡើងវិញនៅខែ កញ្ញា ឆ្នាំ​២០២២ ដោយលោក ចែ សុផល

តើ​លោកអ្នក​បាន​ស្គាល់ ឬ​ក៏​ធ្លាប់​បាន​ឮ​អំពី Bootstrap ដែរ ឬ​ទេ​? Bootstrap គឺជា Front-end Framework មួយ​ដែល​យើង​ប្រើ​សម្រាប់​ផ្តោតលើការអភិវឌ្ឍន៍គេហទំព័រ​ផ្នែក​ខាងមុខបាន​យ៉ាង​ងាយស្រូលនិងឆាប់​រហ័ស ។ ម៉្យាងវិញទៀតនៅ​ក្នុង​ការ Design Layout គឺមិនមានភាពស្មុគស្មាញទេ ហើយវាជួយ​ឲ្យ​អ្នក​សរសេរ​កូដ​ចំណេញ​ពេលវេលា​ច្រើន និងមានសណ្ដាប់ធ្នាប់ ប៉ុន្តែ​ចំណុច​សំខាន់​ទាំងនេះមិនមែនជាហេតុផលទាំងស្រុង ដែល​ធ្វើ​ឲ្យ​អ្នក​ប្រើ​ប្រាស់​ងាកមក​ប្រើ​ប្រាស់​ច្រើន​នោះទេ ហេតុផលនោះគឺ Responsive រាល់ពេល​ដែល​គេនិយាយដល់ Bootstrap គេតែងតែគិតដល់ Responsive ។ Bootstrap ​ត្រូវបាន​គេចងក្រងឡើងដោយ​ប្រើ​ប្រាស់​ភាសា​មូលដ្ឋាន​ដូចជា​ HTML, CSS និង JavaScript ​សម្រាប់​បង្កើត Website ​ដែល​មាន​លក្ខណៈ Responsive (អាចបើកបាននៅ​ក្នុង​ទូរស័ព្ទ​, អាយផេត និង​កុំព្យូទ័រ ដោយមិនខូចទ្រង់ទ្រាយ) ។  

សូមចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ប្រចាំ​ថ្ងៃ​

ដើម្បី​ប្រើ​ប្រាស់ Bootstrap បាន​លោកអ្នក​អាច​ប្រើ​បាន​តាមរយៈ​ពីរវិធីសាស្រ្ត៖

វិធីសាស្ត្រទី១៖  → ចូល​ទៅកាន់ website https://getbootstrap.com/ ​បន្ទាប់មក​ចុចលើពាក្យ Download ដូច​ខាងក្រោម​៖

→ បន្ទាប់មក​ទៀតចុច​ទៅលើ​ពាក្យ Download ម្ដងទៀតដូច​ខាងក្រោម​៖

→ បន្ទាប់មក​ទៀតពន្លា file ​ដែល​បាន download (Extract files) ហើយចូល​ទៅកាន់ folder CSS ​ដែល​នៅ​ក្នុង folder បានពន្លា អ្នកនឹងឃើញមាន file ជា​ច្រើន ប៉ុន្ដែអ្នកជ្រើសយកតែមួយមក​ប្រើ​គឺ boostrap.min.css ឬ bootstrap.css ។

→ រួចហៅវាទៅ​ប្រើ​នៅ​ក្នុង​​ HTML ​របស់អ្នក​

→ វិធីសាស្ត្រទី២៖  ហៅវាមក​ប្រើ តាមរយៈ​ internet (CDN)

→ បង្កើត​ file រួចហើយ​សរសេរ​កូដ​ខាងក្រោម​​៖

 ☆ រួច​ដំណើរ​ការ​កូដ​របស់អ្នក នឹងបាន​លទ្ធផល​ដូច​ខាងក្រោម​៖

♦ ការពន្យល់អំពីការ​ប្រើ​បា្រស់ class

• btn ជា class ​ដែល​ប្រើ​សម្រាប់​តុបតែង​ឲ្យ​ Button ​ដែល​មាន​តម្លៃ​ដូចជា​ padding, border, shadow, …, style hover និង​ Focus ជាដើម ។
• btn-primary ​សម្រាប់​ដាក់ពណ៌ផ្ទៃខាងក្រោយនៃ button ​ឲ្យ​មានពណ៌ ខៀវស្រាល
• btn-primary ​សម្រាប់​ដាក់ពណ៌ផ្ទៃខាងក្រោយនៃ button ​ឲ្យ​មានពណ៌ ខៀវប្រផេះស្រាល
• btn-success ​សម្រាប់​ដាក់ពណ៌ផ្ទៃខាងក្រោយនៃ button ​ឲ្យ​មានពណ៌ បៃតង
• btn-danger ​សម្រាប់​ដាក់ពណ៌ផ្ទៃខាងក្រោយនៃ button ​ឲ្យ​មានពណ៌ ក្រហមស្រាល
• btn-info ​សម្រាប់​ដាក់ពណ៌ផ្ទៃខាងក្រោយនៃ button ​ឲ្យ​មានពណ៌ ផ្ទៃមេឃ
• btn-warning ​សម្រាប់​ដាក់ពណ៌ផ្ទៃខាងក្រោយនៃ button ​ឲ្យ​មានពណ៌ ល្មៀត
• btn-dark ​សម្រាប់​ដាក់ពណ៌ផ្ទៃខាងក្រោយនៃ button ​ឲ្យ​មានពណ៌ ខ្មៅ
• btn-link ​សម្រាប់​ដាក់ពណ៌អក្សរនៃ button ​ឲ្យ​មានពណ៌ default link ។

♦ ហើយយើង​ក៏​អាច​បង្កើត​ Button ដោយមិន​ប្រើ​ប្រាស់​ពណ៌ផ្ទៃខាងក្រោយ (Outline button )  បាន​ផងដែរ ៖

→ បើត្រូវការប៊ូតុងមួយ ប៉ុន្តែ​មិនមានពណ៌ផ្ទៃខាងក្រោយ គឺ​គ្រាន់តែ​ជំនួស class default ដោយ​ប្រើ btn-outline-* (Ex. btn-outline-success) ដើម្បី​លុប​រូបភាព និងពណ៌ផ្ទៃខាងក្រោយ​ទាំងអស់​នៅលើ​ប៊ូតុង​ណាមួយ ។

♦ មួយវិញទៀត​យើងអាច​កំណត់​​ទំហំ​របស់ Button បានតាមរយៈ Class (btn-lg & btn-sm) ៖

• btn-lg ជា​ Class ​ដែល​ប្រើ​សម្រាប់​កំណត់​ទំហំ​នៃ button ​ឲ្យ​ធំជាង​ទំហំ Default​
• btn-sm ជា​ Class ​ដែល​ប្រើ​សម្រាប់​កំណត់​ទំហំ​នៃ button ​ឲ្យ​តូចជាង​ទំហំ Default ។