এই নিবন্ধটি Tailwind CSS-এ সারি গ্রিডে হোভার প্রভাব প্রয়োগ করার পদ্ধতি প্রদর্শন করবে।
কিভাবে Tailwind এ সারি গ্রিডে হোভার প্রয়োগ করবেন?
টেলউইন্ডের সারি গ্রিডে হোভার প্রভাব প্রয়োগ করতে, একটি HTML ফাইল তৈরি করুন এবং ' হোভার 'এর সাথে ক্লাস' গ্রিড-সারি-
ব্যবহারিক বাস্তবায়নের জন্য প্রদত্ত-প্রদত্ত পদক্ষেপগুলি দেখুন:
ধাপ 1: এইচটিএমএল প্রোগ্রামে সারি গ্রিড সহ হোভার প্রপার্টি ব্যবহার করুন
একটি HTML প্রোগ্রাম তৈরি করুন এবং ' হোভার 'এর সাথে সম্পত্তি' গ্রিড-সারি-
< শরীর >
< div ক্লাস = 'গ্রিড গ্রিড-সারি-3 হোভার:গ্রিড-সারি-5 গ্রিড-ফ্লো-কল গ্যাপ-3 m-3 পাঠ্য কেন্দ্র' >
< div ক্লাস = 'bg-teal-500 p-5' > 1 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 2 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 3 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 4 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 5 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 6 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 7 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 8 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 9 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / শরীর >
এখানে, প্যারেন্ট
- ' গ্রিড ” ক্লাস একটি গ্রিড লেআউট তৈরি করতে ব্যবহার করা হয়।
- ' গ্রিড-সারি-3 ” ক্লাস নির্দিষ্ট করে যে গ্রিডে 3টি সমান আকারের সারি থাকা উচিত।
- ' হোভার:গ্রিড-সারি-5 ” ক্লাস গ্রিডকে 5টি সমান আকারের সারিতে পরিবর্তন করে যখন একটি মাউস এটির উপর ঘোরে।
- ' গ্রিড-ফ্লো-কল ” ক্লাস গ্রিড আইটেমগুলিকে কলামে অনুভূমিকভাবে রাখে।
- ' ফাঁক-3 ” ক্লাস প্রতিটি গ্রিড আইটেমের মধ্যে 3 ইউনিটের ব্যবধান সেট করে।
- ' m-3 ” ক্লাস গ্রিড কন্টেইনারের চারপাশে 3 ইউনিটের মার্জিন প্রয়োগ করে।
- ' পাঠ্য কেন্দ্র ” ক্লাস প্রতিটি গ্রিড আইটেমের পাঠ্য কেন্দ্রে সেট করে।
শিশু
- ' ” গ্রিড আইটেম সংখ্যা প্রতিনিধিত্ব করে।
- ' bg-teal-500 ” ক্লাস গ্রিড আইটেমগুলির পটভূমিতে টিল রঙ সেট করে।
- ' p-5 ” ক্লাস চাইল্ড
আইটেমের ভিতরের সামগ্রীতে 5 ইউনিটের প্যাডিং যোগ করে।ধাপ 2: আউটপুট যাচাই করুন
সারি গ্রিডে হোভার প্রভাব প্রয়োগ করা হয়েছে তা যাচাই করতে, ওয়েব পৃষ্ঠাটি দেখুন এবং গ্রিড আইটেমগুলির উপর মাউস সরান:
এটি লক্ষ্য করা যায় যে প্রাথমিকভাবে 3টি সারি রয়েছে এবং যখন এটির উপর মাউস ঘোরায়, তখন সারির সংখ্যা 5-এ পরিবর্তিত হয়। এটি নির্দেশ করে যে সারি গ্রিডে হভার প্রভাব সফলভাবে প্রয়োগ করা হয়েছে।
উপসংহার
টেলউইন্ডের সারি গ্রিডে হোভার প্রভাব প্রয়োগ করতে, ' হোভার 'এর সাথে ক্লাস' গ্রিড-সারি-
HTML প্রোগ্রামে ইউটিলিটি। এটি হোভারে সারির সংখ্যা পরিবর্তন করে। পরিবর্তন নিশ্চিত করতে, ওয়েব HTML পৃষ্ঠা দেখুন এবং গ্রিড আইটেমগুলিতে মাউস হভার করুন। এই নিবন্ধটি Tailwind CSS-এ সারি গ্রিডে হোভার প্রভাব প্রয়োগ করার পদ্ধতির চিত্র তুলে ধরেছে।