Tailwind CSS প্রদান করে ' সারিবদ্ধ আইটেম ” কন্টেইনারের ক্রস-অক্ষ বরাবর ফ্লেক্স এবং গ্রিড আইটেমগুলির অবস্থান নিয়ন্ত্রণ করতে ইউটিলিটিগুলি৷ এটির বিভিন্ন ইউটিলিটি ক্লাস রয়েছে, যেমন “আইটেম-স্টার্ট”, “আইটেম-সেন্টার”, “আইটেম-এন্ড”, “আইটেম-বেসলাইন” ইত্যাদি। উপরন্তু, ব্যবহারকারীরা হোভার প্রপার্টি ব্যবহার করতে পারেন “আইটেম-
এই নিবন্ধটি Tailwind CSS-এ সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে হোভার প্রয়োগ করার পদ্ধতির উদাহরণ দেবে।
টেইলউইন্ডে কীভাবে 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে হোভার প্রয়োগ করবেন?
টেইলউইন্ডে 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে হোভার প্রয়োগ করতে, একটি HTML কাঠামো তৈরি করুন এবং যোগ করুন ' হোভার 'কাঙ্খিত' সহ ইউটিলিটি ক্লাস আইটেম- <মান> পাত্রে ইউটিলিটি। এরপরে, HTML ওয়েব পৃষ্ঠাটি দেখুন এবং পরিবর্তনগুলি যাচাই করতে নির্দিষ্ট উপাদানের উপর মাউস হভার করুন।
বাক্য গঠন
< উপাদান ক্লাস = 'হোভার: আইটেম-
উদাহরণ
এই উদাহরণে, আমরা 'আইটেম-স্টার্ট' বৈশিষ্ট্য সহ একটি ফ্লেক্স ধারক তৈরি করব। তারপর, আমরা ব্যবহার করব ' হোভার: আইটেম-কেন্দ্র 'ক্লাসে' আউটপুট টেলউইন্ডের 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে হোভার প্রভাব প্রয়োগ করার জন্য, ' হোভার 'বিশেষের সাথে ইউটিলিটি ক্লাস' আইটেম- <মান> ” ফ্লেক্স বা গ্রিড পাত্রে ইউটিলিটি। যাচাইয়ের জন্য, ওয়েব পৃষ্ঠায় নির্দিষ্ট কন্টেইনারের উপর মাউস ঘোরান। এই নিবন্ধটি Tailwind-এ 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে হোভার প্রভাব প্রয়োগ করার উদাহরণগুলি প্রদর্শন করেছে৷
< শরীর >
< div ক্লাস = 'ফ্লেক্স আইটেম-স্টার্ট হোভার: আইটেম-সেন্টার জাস্টিফাই-এরাউন্ড টেক্সট-সেন্টার h-44 m-3 bg-pink-300 gap-4' >
< div ক্লাস = 'bg-pink-600 py-4 w-40' > 1 div >
< div ক্লাস = 'bg-pink-600 py-12 w-40' > 2 div >
< div ক্লাস = 'bg-pink-600 py-8 w-40' > 3 div >
div >
শরীর >
এখানে:
উপরের ওয়েব পৃষ্ঠা থেকে, এটি লক্ষ্য করা যায় যে ফ্লেক্স আইটেমগুলির প্রান্তিককরণটি হোভারে কন্টেইনারের ক্রস-অক্ষ বরাবর পরিবর্তিত হচ্ছে। উপসংহার