যাইহোক, এই নিবন্ধটি দুটি নির্দিষ্ট শ্রেণী সম্পর্কে বিস্তারিত বর্ণনা করবে যা আনুপাতিক পরিসংখ্যান এবং সারণী পরিসংখ্যান। এগুলি Tailwind-এ সাংখ্যিক মানগুলিকে স্টাইল করতে এবং নথির নকশার জন্য আবেদনকারী এমনভাবে সংখ্যাসূচক ডেটা সাজাতে এবং উপস্থাপন করতে ব্যবহৃত হয়।
এই নিবন্ধটি নিম্নলিখিত রূপরেখাটি ব্যবহার করে টেইলউইন্ড সিএসএস-এর আনুপাতিক এবং সারণী পরিসংখ্যানগুলিকে বিস্তারিত করবে:
- কিভাবে Tailwind CSS এ আনুপাতিক পরিসংখ্যান ব্যবহার করবেন?
- Tailwind CSS এ ট্যাবুলার ফিগার কিভাবে ব্যবহার করবেন?
- আনুপাতিক এবং ট্যাবুলার ফিগারের মধ্যে পার্থক্য
কিভাবে Tailwind CSS এ আনুপাতিক পরিসংখ্যান ব্যবহার করবেন?
আনুপাতিক পরিসংখ্যান শ্রেণী উপাদানটিকে একটি কনভেনশন বরাদ্দ করবে যেখানে প্রতিটি সংখ্যার একই প্রস্থ নেই।
বাক্য গঠন
Tailwind এ আনুপাতিক পরিসংখ্যান ব্যবহার করার জন্য বাক্য গঠন নিম্নরূপ:
< div ক্লাস = 'আনুপাতিক-সংখ্যা' >
< div / >
উপরে প্রদত্ত বাক্য গঠনে, ' সমানুপাতিক-সংখ্যা সমানুপাতিক পরিসংখ্যান ব্যবহার করার জন্য উপাদানটিতে শ্রেণী প্রদান করতে হবে।
আসুন আনুপাতিক পরিসংখ্যানের একটি ব্যবহারিক উদাহরণ দেখি।
নীচের প্রদত্ত কোডে, দুটি “ পি 'উপাদানগুলি একটি 'এ রয়েছে div ' উপাদান যা আনুপাতিক পরিসংখ্যান শ্রেণী ব্যবহার করে:
< div ক্লাস = 'আনুপাতিক-সংখ্যা পাঠ-কেন্দ্র বিজি-স্লেট-200 পাঠ্য-এক্সএল' >< পি > 121212 < / পি >
< পি > ৮৩৮৩৮৩ < / পি >
< / div >
উপরে প্রদত্ত কোডের ব্যাখ্যা নিম্নরূপ:
- দ্য ' div ' উপাদান ব্যবহার করে ' সমানুপাতিক-সংখ্যা ” শ্রেণী যা সংখ্যায় আনুপাতিক চিত্রের বৈশিষ্ট্য প্রয়োগ করবে।
- দ্য ' পাঠ্য কেন্দ্র ” ক্লাস উপাদানটির কেন্দ্রে পাঠ্যকে অবস্থান করে।
- দ্য ' bg-{color}-{number} ” ক্লাস উপাদানটির পটভূমির রঙের জন্য দায়ী।
- দ্য ' text-xl ” ক্লাস পাঠ্যের জন্য একটি অতিরিক্ত বড় ফন্টের আকার প্রদান করে।
- পরবর্তী, দুই ' পি বিভিন্ন সংখ্যা সম্বলিত উপাদান তৈরি করা হয়।
আউটপুট
এটি আউটপুটে দেখা যায় যে সংখ্যাটি দ্বিতীয় ' পি ” উপাদানটির প্রস্থ প্রথমটির চেয়ে কিছুটা বড়। এটি আনুপাতিক পরিসংখ্যান শ্রেণীর কারণে:
Tailwind CSS এ ট্যাবুলার ফিগার কিভাবে ব্যবহার করবেন?
টেইলউইন্ডের সারণী পরিসংখ্যানগুলি এমন একটি উপাদানের জন্য কনভেনশনকে বরাদ্দ করে যেখানে প্রতিটি সংখ্যার একই প্রস্থের আকার রয়েছে। এটি সংখ্যাগুলির একটি প্রতিসম টেবিলের মতো উপস্থাপনা তৈরি করে।
বাক্য গঠন
ট্যাবুলার পরিসংখ্যান ব্যবহার করার জন্য সিনট্যাক্স নিম্নরূপ:
< div ক্লাস = 'সারণী-সংখ্যা' >< div / >
উপরে প্রদত্ত বাক্য গঠনে, ' ট্যাবুলার-সংখ্যা ট্যাবুলার ফিগার ব্যবহার করার জন্য এলিমেন্টে ক্লাস দেওয়া হয়।
চলুন দেখি কিভাবে ' ট্যাবুলার-সংখ্যা ” একটি HTML নথিতে সাংখ্যিক মানগুলিকে প্রভাবিত করে। এই বিক্ষোভের জন্য, দুটি ' পি 'সাংখ্যিক মান দিয়ে তৈরি করা হয় এবং একটি 'এ থাকে div ” উপাদান যা ট্যাবুলার ফিগার ক্লাস ব্যবহার করে:
< div ক্লাস = ' টেবুলার-সংখ্যা টেক্সট-সেন্টার বিজি-স্লেট-200 টেক্সট-এক্সএল' >< পি > 121212 < / পি >
< পি > ৮৩৮৩৮৩ < / পি >
< / div >
উপরের কোডে, ' ট্যাবুলার-সংখ্যা 'ক্লাস প্রদান করা হয়' div ' উপাদান যা শিশুকে ট্যাবুলার ফিগারের শৈলী বরাদ্দ করবে ' পি ' উপাদান।
আউটপুট:
উপরের আউটপুটে দেখা যায় যে উভয় উপাদানের সাংখ্যিক মানগুলি অঙ্কের একই প্রস্থের আকারের কারণে পুরোপুরি সারিবদ্ধ।
বোনাস তথ্য: Tailwind CSS-এ সমানুপাতিক এবং ট্যাবুলার ফিগারের মধ্যে পার্থক্য
আসুন একটি প্রদর্শন দেখি যা সাংখ্যিক মানের উপর ট্যাবুলার এবং আনুপাতিক পরিসংখ্যান শ্রেণীর প্রভাবকে আলাদা করে। এই প্রদর্শনে, উপাদানগুলিকে ডিফল্ট হিসাবে আনুপাতিক পরিসংখ্যান শ্রেণী বরাদ্দ করা হবে। এরপরে, হোভার স্টেট ব্যবহার করে, উপাদানগুলিকে ট্যাবুলার ফিগার ক্লাস বরাদ্দ করা হবে:
< div ক্লাস = ' proportional-nums text-center bg-slate-200 text-xl hover:tabular-nums' >< পি > 121212 < / পি >
< পি > ৮৩৮৩৮৩ < / পি >
< / div >
উপরের কোডে দেখা যাবে যে ' div ' উপাদান প্রদান করা হয় ' সমানুপাতিক-সংখ্যা ”, যা হবে ডিফল্ট কনভেনশন যা সাংখ্যিক মান অনুসরণ করবে।
একইভাবে, কারণে ' হোভার: সারণী-সংখ্যা ” ক্লাসে, সাংখ্যিক মানগুলি ট্যাবুলার পরিসংখ্যান কনভেনশন অনুসরণ করবে যখনই ব্যবহারকারী “div” উপাদানের উপর মাউস কার্সার ঘোরায়।
আউটপুট
প্রদত্ত আউটপুটে, যখন ব্যবহারকারী উপাদানটির উপর মাউস ঘোরায় তখন সংখ্যাসূচক মানগুলির প্রস্থ পরিবর্তিত হয়। এটি Tailwind-এ আনুপাতিক এবং সারণী পরিসংখ্যানগুলির মধ্যে চাক্ষুষ পার্থক্য প্রদান করে:
এটি টেইলউইন্ডের সমানুপাতিক এবং সারণী পরিসংখ্যান সম্পর্কে।
উপসংহার
টেলউইন্ডে আনুপাতিক পরিসংখ্যান ব্যবহার করতে, ' সমানুপাতিক-সংখ্যা ” ক্লাস ব্যবহার করা হয়। আনুপাতিক পরিসংখ্যান কনভেনশন ব্যবহার করে যেখানে প্রতিটি সাংখ্যিক মানের একটি ভিন্ন প্রস্থের আকার থাকে। Tailwind এ সারণী পরিসংখ্যান ব্যবহার করতে, “ ট্যাবুলার-সংখ্যা ” ক্লাস ব্যবহার করা হয়। ট্যাবুলার পরিসংখ্যান কনভেনশন ব্যবহার করে যেখানে প্রতিটি সাংখ্যিক মানের একই প্রস্থের আকার থাকে। এই নিবন্ধটি Tailwind-এ আনুপাতিক এবং সারণী পরিসংখ্যান ব্যবহার করার পদ্ধতি প্রদান করেছে।