For Android device For iOS device

វិច្ឆិកា

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

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

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

♣♣♣ មុខវិជ្ផា Web Design with CSS,CSS3 & Bootstrap ​តម្លៃ ៨០ដុល្លា ឬ ៣២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​នេះ http://training.antkh.com/website_design_with_css.aspx

♣♣♣ ​សម្រាប់​ស្នាដៃសិស្ស​ដែល​បាន​បញ្ចប់​វគ្គ​គេហទំព័រជា​ច្រើន នៅអាន-ANT http://training.antkh.com/achievements/?c=web

♣♣ សូម​ចូលរួម Telegram÷ https://t.me/AntTechnologyTrainingCenter ដើម្បី​ទទួលបាន​ព័ត៌មាន​ថ្មីៗ​ទាក់ទងនឹង​បច្ចេកវិទ្យា​

 

♣♣ សូម​ចូលរួម​ជាសមាជិក ANT Training Group  ដើម្បី​តាមដានសម្មភាពប្រចាំ​ថ្ងៃ​ជាមួយអាន-ANT

♣♣ ចុច Like គេហទំព័រ www.antkh.com  ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ដែល​ទាក់ទងនឹង​បច្ចេកវិទ្យា​រៀងរាល់​ថ្ងៃ​

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា