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