កាត (Card) គឺជាផ្ទាំងមួយដែលផ្ទុកនូវមាតិកានិងពត៌មានផ្សេងៗស្ដីអំពីមនុស្ស រឺ ទីកន្លែងអ្វីមួយសំរាប់ជាការសំគាល់ រឺទុកជាពត៌មានដើម្បីផ្សព្វផ្សាយទៅដល់មនុស្សជាច្រើនបានដឹង ។ថ្ងៃនេះ TechFree សូមបង្ហាញនូវការបង្កើតនិងប្រើប្រាស់កាតនេះនៅលើគេហទំព័រដែលប្រើជាមួយនឹងបណ្ណាល័យ CSS គឺ Bootstrap ។
កាតគឺត្រូវមានផ្នែកខាងលើដែលជាកន្លែងដាក់នូវឈ្មោះ រឺចំណងជើង ហើយមានផ្នែកកណ្ដាលជាកន្លែងដាក់នូវរូបភាពនិងសរសេររៀបរាប់អំពីចំណងជើងខាងលើ និងចុងក្រោយមានផ្នែកខាងក្រោមគឺជាកន្លែងសរសេរអំពីអាស័យដ្ឋាន រឺ ការទំនាក់ទំនងដូចជាលេខទូរសព្ទជាដើម ។
១) ការសរសេកូដ Bootstrap
ដោយកាតនេះគឺមិនមាននៅក្នុង Bootstrap ជំនាន់ទី៣ដែលយើងប្រើសព្វថ្ងៃទេ ប៉ុន្តែវាស្ថិតនៅក្នុង Bootstrap ជំនាន់ទី៤ ។ ជំនាន់ទី៤គឺមិនទាន់ចេញជាផ្លូវការនៅឡើយទេ ក៏ប៉ុន្តែយើងអាចប្រើប្រាស់វាបាន ។សូមមើលកូដខាងក្រោម ៖
- បន្ទាត់ទី៧ គឺជាកូដរចនាដែលយើងសរសេរផ្ទាល់នូវអ្វីយើងចង់បាន
- បន្ទាត់ទី៨ គឺយើងទាញយកកូដរចនារបស់ Bootstrap ជំនាន់ទី៤ពី ក្នុងកន្លែងផ្ទុកឯកសារ(folder)
- បន្ទាត់ទី៩ គឺយើងទាញយកកូដរចនារបស់ Bootstrapជំនាន់ទី៤ពីអុីនធឺណេត
- បន្ទាត់ទី១២ ទី១៤និងទី១៦ គឺជាកូដបណ្ណាល័យនៃ Javascript ដែលទាញយកពីអុីនធឺណេត
- បន្ទាត់ទី១៨ គឺជាកូដទាញយកបណ្ណាល័យនៃJavascript ពីក្នុងកន្លែងផ្ទុកឯកសារ(folder)
សូម ចុចទីនេះ ដើម្បីមើលប្រភពនៃកូដខាងលើ។
២) ការសរសេរកូដរចនា
បន្ទាប់ពីយើងសរសេរកូដទាញយកបណ្ណាល័យរួចរាល់ហើយនោះគឺយើងត្រូវធ្វើការរចនាកាតដែលយើង
ចង់បាន ។សូមមើលកូដខាងក្រោម ៖
– index.html
– style.css
៣) លទ្ធផលនៃកូដ
ក្រោយពីសរសេរកូដរួចមកយើងនឹងឃើញនូវលទ្ធផលដូចខាងក្រោម ៖
