លោកអ្នកប្រហែលជាបានស្គាល់ ឬបានឮរួចមកហើយ អំពី Bootstrap ជាការពិតណាស់វាគឺជា Framework របស់ CSS មួយដែលមានការពេញនិយម និងគាំទ្រច្រើន វាធ្វើការជាមួយ Class Selector របស់ CSS វាមិនពិបាកក្នុងការសិក្សាទេ ប៉ុន្តែតម្រូវឲ្យលោកអ្នកស្គាល់ Class ច្រើនទើបងាយស្រួលក្នុងការប្រើប្រាស់ ដោយសារតែវាមានលក្ខណៈទំនើប និងថ្មី ដូចនេះ ក្នុងការ Design Layout គឺមិនមានភាពស្មុគស្មាញទេហើយ វាជួយឲ្យអ្នកសរសេរកូដ ចំណេញពេលវេលាច្រើន និង មានសណ្ដាប់ធ្នាប់ ប៉ុន្តែចំណុចសំខាន់ទាំងនេះមិនមែនជា ហេតុផលទាំងស្រុង ដែលធ្វើឲ្យអ្នកប្រើប្រាស់ងាកមកប្រើប្រាស់ច្រើននោះទេ ហេតុផលនោះគឺ Responsive រាល់ពេលដែលគេនិយាយដល់ Bootstrap គេតែងតែគិតដល់ Responsive ។
និយមន័យ Responsive និងការប្រើប្រាស់៖
Responsive គឺសំដៅទៅលើវេបសាយមួយដែលអាចឲ្យអ្នកប្រីប្រាស់ Access ចូលទៅកាន់បាន សូម្បីតែទូរសព្ទដូចលោកអ្នកធ្លាប់បានឃើញរួចមកហើយ គេហទំព័រមួយចំនួនប្រសិនជា User ចូលទៅតាមរយៈកុំព្យូទ័រវាមិនមានបញ្ហានោះទេ ប៉ុន្តែប្រសិនបើ Access ចូលទៅតាមរយៈ ទូរសព្ទដៃនោះលោកអ្នកនឹងពិបាកមើល ដោយសារតែទំហំរបស់វេបសាយនៅដដែលមិនមាន ភាព Responsive តាម device (ឧបករណ៍) របស់អ្នកប្រើប្រាស់ ម៉្យាងទៀតទំហំរបស់ទូរសព្ទដៃ និង កំព្យូទ័រគឺមិនដូចគ្នាទេ ។ ដោយសារតែសព្វថ្ងៃអ្នកប្រើប្រាស់អ៊ីនធឺណែតតាមរយៈទូរសព្ទដៃ មានច្រើនស្ទើរស្មានមិនដល់ ដូចនេះទើបគេហទំព័របច្ចុប្បន្នប្រើប្រាស់បច្ចេកទេសResponsive ផ្សេងៗគ្នាក្នុងការ Design រូបរាង Layout របស់ខ្លួន ។
របៀប Download Bootstrap៖
មុននឹងឈានដល់ការប្រើប្រាស់ Bootstrap តម្រូវឲ្យលោកអ្នកទាញយកកញ្ចប់ Bootstrap មកទុកនៅក្នុង Project របស់លោកអ្នកជាមុនសិន ដោយចូលទៅកាន់www.getbootstrap.com លោកអ្នកនឹងទទួលបានដូចខាងក្រោម៖
សូមចុចលើពាក្យ Download Bootstrap ៖
ក្រោយមកវានឹងបង្ហាញផ្ទាំងដូចខាងក្រោម សូមចុច Download Bootstrap ដើម្បីទាញយកកញ្ចប់ របស់ Bootstrap តាមប្រភេទដែលប្រើប្រាស់ដូចខាងក្រោម៖
ក្រោយពីបាន Download រួចរាល់ហើយលោកអ្នកនឹងទទួលបាន Bootstrap មួយកញ្ចប់ ហើយវាស្ថិតនៅក្នុងកន្លែង Download របស់លោកអ្នក ដែលអាចយកទៅប្រើប្រាស់បាន តាមតម្រូវការ ។
របៀប Connect Bootstrap៖
ដើម្បីប្រីប្រាស់ Bootstrap បានសូមលោកអ្នក Extract កញ្ចប់នោះជាមុនសិន បន្ទាប់មកសូមចូលទៅកាន់ Folder ដែលបាន Extract នោះ លោកអ្នកនឹងឃើញមាន folderចំនួនបីទៀត ដែលរួមមាន css , fonts និង js ដូចការណែនាំខាងក្រោម៖
សូម copy folder ទាំងបីនេះទៅកាន់ folder ការងាររបស់លោកអ្នក ដើម្បីប្រើប្រាស់ ឬ បង្កើត file html មួយនៅក្នុងនោះតែម្ដង៖
នៅក្នុង page html នោះសូមសរសេរកូដសម្រាប់ link style sheet មកទៅកាន់ file មួយដែលមាន ឈ្មោះថា bootstrap.min.css ដែលវាស្ថិតនៅក្នុង folder (css) ដោយសរសេរកូដដូចខាងក្រោម៖
របៀបប្រើប្រាស់ Class របស់ Bootstrap ៖
ដោយសារតែ bootstrap មាន class សម្រាប់ប្រើប្រាស់ច្រើន ដូចនេះយើងសូមបង្ហាញអំពីការ ប្រើប្រាស់ class មួយចំនួនដូចខាងក្រោម៖
♦ ការបង្កើតប៊ូតុង៖
♦ ការបង្កើត Menu bar៖
♦ ពន្យល់កូដ៖
ក្នុងការបង្កើត layout ដោយប្រើ bootstrap មិនមានភាពស្មុគស្មាញទេ គ្រាន់តែត្រូវដឹងអំពី class និង មុខងាររបស់វាតែប៉ុណ្ណោះហើយរាល់ការសរសេរកូដត្រូវស្ថិតនៅក្នុង container ឬ container-fluid ដែលវាមានតួនាទីពង្រីកបង្រួមទៅតាម Device របស់ User ។
រាល់ main class ទាំងអស់គឺសុទ្ធតែមាន class ចាប់ពីពីរឡើងទៅមួយសម្រាប់ បញ្ជាក់ប្រភេទ មួយទៀត គឺសម្រាប់បញ្ជាក់ពីលក្ខណៈដូចឧទាហរណ៍ខាងក្រោម ៖
- class=”nav navbar-nav”សម្រាប់ធ្វើឲ្យវាក្លាយជា menu ជួរដេក ដែលវាអាចប្រើបាននៅក្នុង tag <ul>
- class=”navbar navbar-inverse” សម្រាប់ក្ដោបរាល់ menu ទាំងអស់ឲ្យស្ថិតនៅក្នុងវាហើយដាក់ background ត្រឹមត្រូវពីព្រោះវាអាចមាន menu ច្រើនប្លុក (ឆ្វេង កណ្ដាល និង ស្ដាំ) តាមការ design
ហើយមានជម្រើសពីរគឺ navbar-default (ពណ៌ស) និង navbar-inverse (ពណ៌ខ្មៅ) ។
ចំណាំ៖ រាល់ឯកសារទាក់ទងនឹង bootstrap ទាំងអស់មាននៅ http://getbootstrap.com/components/ ដែលយើងនឹងលើកយកចំណុចសំខាន់ៗ មកបង្ហាញនៅអត្ថបទក្រោយៗទៀត ។
No comments:
Post a Comment