របៀបប្រើប្រាស់ Bootstrap កាត (Card)

កាត (Card) គឺជាផ្ទាំងមួយដែលផ្ទុកនូវមាតិកានិងពត៌មានផ្សេងៗស្ដីអំពីមនុស្ស រឺ ទីកន្លែងអ្វីមួយសំរាប់ជាការសំគាល់ រឺទុកជាពត៌មានដើម្បីផ្សព្វផ្សាយទៅដល់មនុស្សជាច្រើនបានដឹង ។ថ្ងៃនេះ TechFree សូមបង្ហាញនូវការបង្កើតនិងប្រើប្រាស់កាតនេះនៅលើគេហទំព័រដែលប្រើជាមួយនឹងបណ្ណាល័យ CSS គឺ Bootstrap ។

កាតគឺត្រូវមានផ្នែកខាងលើដែលជាកន្លែងដាក់នូវឈ្មោះ រឺចំណងជើង ហើយមានផ្នែកកណ្ដាលជាកន្លែងដាក់នូវរូបភាពនិងសរសេររៀបរាប់អំពីចំណងជើងខាងលើ និងចុងក្រោយមានផ្នែកខាងក្រោមគឺជាកន្លែងសរសេរអំពីអាស័យដ្ឋាន រឺ ការទំនាក់ទំនងដូចជាលេខទូរសព្ទជាដើម ។

១) ការសរសេកូដ Bootstrap

ដោយកាតនេះគឺមិនមាននៅក្នុង Bootstrap ជំនាន់ទី៣ដែលយើងប្រើសព្វថ្ងៃទេ ប៉ុន្តែវាស្ថិតនៅក្នុង Bootstrap ជំនាន់ទី៤ ។ ជំនាន់ទី៤គឺមិនទាន់ចេញជាផ្លូវការនៅឡើយទេ ក៏ប៉ុន្តែយើងអាចប្រើប្រាស់វាបាន ។សូមមើលកូដខាងក្រោម ៖

• បន្ទាត់ទី៧ គឺជាកូដរចនាដែលយើងសរសេរផ្ទាល់នូវអ្វីយើងចង់បាន
• បន្ទាត់ទី៨ គឺយើងទាញយកកូដរចនារបស់ Bootstrap ជំនាន់ទី៤ពី ក្នុងកន្លែងផ្ទុកឯកសារ(folder)
• បន្ទាត់ទី៩ គឺយើងទាញយកកូដរចនារបស់ Bootstrapជំនាន់ទី៤ពីអុីនធឺណេត
• បន្ទាត់ទី១២ ទី១៤និងទី១៦ គឺជាកូដបណ្ណាល័យនៃ Javascript ដែលទាញយកពីអុីនធឺណេត
• បន្ទាត់ទី១៨ គឺជាកូដទាញយកបណ្ណាល័យនៃJavascript ពីក្នុងកន្លែងផ្ទុកឯកសារ(folder)

សូម ចុចទីនេះ ដើម្បីមើលប្រភពនៃកូដខាងលើ។

២) ការសរសេរកូដរចនា

បន្ទាប់ពីយើងសរសេរកូដទាញយកបណ្ណាល័យរួចរាល់ហើយនោះគឺយើងត្រូវធ្វើការរចនាកាតដែលយើងចង់បាន។ សូមមើលកូដខាងក្រោម ៖

• index.html

• style.css

៣) លទ្ធផលនៃកូដ

ក្រោយពីសរសេរកូដរួចមកយើងនឹងឃើញនូវលទ្ធផលដូចខាងក្រោម ៖

ប្រភពដើម