For Android device For iOS device
២១
កក្កដា

ស្វែងយល់ពី BOOTSTRAP FRAMEWORK

♦ រៀបរៀងអត្ថបទឡើងវិញនៅ​ថ្ងៃ​ទី ១៥ សីហា ២០២២ ដោយលោក ចែ សុផល

. តើ Bootstrap Framework គឺជាអ្វី?

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

. របៀប​ប្រើ​ប្រាស់ Bootstrap Framework?

.១ របៀប Download Bootstrap

មុននឹងឈានដល់ការ​ប្រើ​ប្រាស់ Bootstrap ​តម្រូវ​ឲ្យ​លោកអ្នក​ទាញយក​កញ្ចប់ Bootstrap មកទុកនៅ​ក្នុង Project របស់​លោកអ្នក​ជាមុនសិន ដោយចូល​ទៅកាន់ https://getbootstrap.com/ លោកអ្នក​នឹងឃើញដូចរូប​ខាងក្រោម​៖

 

សូមចុចលើពាក្យ Download

ក្រោយមក​វានឹង​បង្ហាញ​ផ្ទាំង​ដូច​ខាងក្រោម សូមចុច Download ដើម្បី​ទាញយក​កញ្ចប់របស់ Bootstrap ដូច​ខាងក្រោម​៖

​បន្ទាប់ពី​បាន Download រួចរាល់ហើយ​លោកអ្នក​នឹងទទួលបាន Bootstrap មួយកញ្ចប់ ហើយវាស្ថិតនៅ​ក្នុង​កន្លែង Folder Download របស់

​លោកអ្នក ដែល​អាចយកទៅ​ប្រើ​ប្រាស់​បានតាម​តម្រូវ​ការ ។

. របៀប Connect Bootstrap

ដើម្បី​ប្រីប្រាស់ Bootstrap បានសូម​លោកអ្នក Extract កញ្ចប់នោះជាមុនសិន បន្ទាប់មក​សូមចូល​ទៅកាន់ Folder ​ដែល​បាន Extract នោះ​លោកអ្នក​នឹងឃើញមាន folder ចំនួនពីរ ដែល​រួមមាន CSS និង JS ដូចការ​ណែនាំ​ខាងក្រោម​៖

សូម copy folder ​ទាំងពីរ (css & js) របស់ Bootstrap ​ទៅកាន់ folder ​ការងារ​របស់​លោកអ្នក ដើម្បី​ប្រើ​ប្រាស់ ឬ​បង្កើត file html មួយនៅ​ក្នុង​នោះ​តែម្ដង​ក៏​បាន​៖

ដើម្បី​ដំណើរ​ការ​កូដ Bootstrap, នៅ​ក្នុង File html ​ខាងលើ​ត្រូវ​ធ្វើការ Link style sheet មួយ​ដែល​មាន​ឈ្មោះ bootstrap.css bootstrap.min.css ​ដែល​វាស្ថិតនៅ​ក្នុង folder (css) ។ ប្រសិនបើ​ components នោះ ទាក់ទងនឹង script ​លោកអ្នក​ត្រូវ​ធ្វើការ Link script មួយទៀត​ដែល​មាន​ឈ្មោះ bootstrap.bundle.min.js ដែល​វាស្ថិតនៅ​ក្នុង folder (js) ដោយ​សរសេរ​កូដដូច​ខាងក្រោម​៖

. របៀប​ប្រើ​ប្រាស់ Class របស់ Bootstrap

​ដោយសារ​តែ Bootstrap មាន class ​សម្រាប់​ប្រើ​ប្រាស់​ច្រើន ដូចនេះយើងសូម​បង្ហាញ​អំពីការ​ប្រើ​ប្រាស់ class មួយចំនួនដូច​ខាងក្រោម​៖

 ការ​បង្កើត​ប៊ូតុង (Button)

- បន្ទាត់ទី១២៖  class=”container” គឺជា class ​ដែល​ផ្ដល់​នូវ responsive fixed width container

សម្រាប់ class="mt-5" ​ប្រើ​សម្រាប់​កំណត់​គម្លាតពីលើមកក្រោម (mt-5 គឺ​ស្មើនឹង margin-top: 3rem;)

- បន្ទាត់ទី១៣៖ class=”btn” ជា class ​ដែល​ប្រើ​សម្រាប់​តុបតែង​ឲ្យ​ Button ​ដែល​មាន​តម្លៃ​ដូចជា padding, border, shadow, …, style 

hover និង​ Focus ជាដើម ។

- សម្រាប់ class btn-primary, btn-success… គឺ​ប្រើ​សម្រាប់​កំណត់​ពណ៌ផ្ទៃខាងក្រោយនៃ Button

 ការ​បង្កើត​ Menu bar

 ពន្យល់កូដ៖

​ក្នុង​ការ​បង្កើត layout ដោយ​ប្រើ Bootstrap មិនមានភាពស្មុគ្រស្មាញទេ គ្រាន់តែ​ត្រូវដឹងអំពី class និង មុខងាររបស់វាតែប៉ុណ្ណោះ ហើយរាល់ការ​សរសេរ​កូដត្រូវស្ថិតនៅ​ក្នុង container ឬ container-fluid ដែល​វាមាន​តួនាទី​ពង្រីកបង្រួម​ទៅតាម Device របស់ User ។
- បន្ទាត់ទី១២៖ class=”navbar” ប្រើ​សម្រាប់​ក្តោប Menu ទាំងមូល ដែល​មាន​តម្លៃ​គម្លាតជាដើម ។
សម្រាប់ class="bg-dark" ប្រើ​សម្រាប់​កំណត់​ពណ៌ផ្ទៃខាងក្រោយ ។
- បន្ទាត់ទី១៤៖ class=”nav” ប្រើ​សម្រាប់​ធ្វើ​ឲ្យ Menu link ទៅជាជួរដេក ។
សម្រាប់ class="w-100" ប្រើ​សម្រាប់​កំណត់​ប្រវែង (w-100 ស្មើនឹង width: 100%) ។
- បន្ទាត់ទី១៥៖ class=”nav-item” ជា class ប្រើ​សម្រាប់​តុបតែង​ឲ្យ tag <li> ។
សម្រាប់ class=”nav-link” ប្រើ​សម្រាប់​តុបតែងទៅ​ឲ្យ tag <a> ។
- បន្ទាត់ទី២០៖ class=”ms-auto” ប្រើ​សម្រាប់​រុញ Elements ឲ្យ​ទៅខាង​ស្ដាំ​ផុត (ms-auto ស្មើនឹង margin-left: auto;) ។
​ចំណាំ​៖ រាល់ឯកសារ​ទាក់ទងនឹង bootstrap ទាំងអស់​មាននៅ https://getbootstrap.com/docs/5.2/components/​ដែល​យើងនឹងលើកយក​ចំណុច​សំខាន់​ៗ មក​បង្ហាញ​នៅអត្ថបទក្រោយៗ​ទៀត ។

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

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