এই নিবন্ধটি টেলউইন্ডের 'ক্লিয়ার' ইউটিলিটিগুলিতে ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি প্রয়োগ করার পদ্ধতির উদাহরণ দেবে।
টেলউইন্ডে 'ক্লিয়ার'-এ ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি কীভাবে ব্যবহার করবেন?
Tailwind-এ 'ক্লিয়ার' ইউটিলিটিগুলিতে নির্দিষ্ট ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্ন প্রয়োগ করতে, একটি HTML কাঠামো তৈরি করুন। তারপর, পছন্দসই মান সংজ্ঞায়িত করুন ' পরিষ্কার- <মান> ' ব্যবহার করে বিভিন্ন স্ক্রীন মাপের জন্য ইউটিলিটি ' মো 'বা' এলজি 'ব্রেকপয়েন্ট অবশেষে, যাচাইকরণের জন্য ওয়েব পৃষ্ঠার পর্দার আকার পরিবর্তন করুন।
উদাহরণ
এই উদাহরণে, আমরা ব্যবহার করব ' মো 'এর সাথে ব্রেকপয়েন্ট' স্পষ্ট উভয় 'উপযোগিতা এবং' এলজি 'এর সাথে ব্রেকপয়েন্ট' পরিষ্কার-কোনও নয় 'উপযোগিতা' ' উপাদান মাঝারি এবং বড় পর্দার আকারে তার অবস্থান পরিবর্তন করতে:
< শরীর >
< div ক্লাস = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' ক্লাস = 'ফ্লোট-বাম p-3 w-28 h-24' সবকিছু = 'ছবি' / >
< img src = 'tailwindcss_img.png' ক্লাস = 'ফ্লোট-ডান পি-3' সবকিছু = 'ছবি' / >
< পি ক্লাস = 'টেক্সট-জাস্টিফাই পরিষ্কার-বাম এমডি:ক্লিয়ার-বোথ এলজি:ক্লিয়ার-কোনটি নয়' > Tailwind CSS একটি উপাদানের চারপাশে সামগ্রীর মোড়ক নিয়ন্ত্রণ করতে 'ফ্লোটস' ইউটিলিটি প্রদান করে।
এই উদাহরণটি দেখাবে কিভাবে টেলউইন্ডে 'ক্লিয়ার' ইউটিলিটি সহ ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি ব্যবহার করতে হয়। < / পি >
< / div >
< / শরীর >
এখানে:
- 'ভাসা-বাম' ক্লাস উপাদানগুলিকে পাত্রের বাম দিকে ভাসিয়ে দেয়।
- 'ভাসা-ডানে' ক্লাস উপাদানগুলিকে পাত্রের ডানদিকে ভাসিয়ে দেয়।
- 'পরিষ্কার-বাম' ক্লাস কন্টেইনারে বাম-ভাসানো উপাদানের নীচে
উপাদানটিকে সরিয়ে দেয়।
- 'এমডি:ক্লিয়ার-উভয়' ক্লাস বাম এবং ডান উভয় ফ্লোট সাফ করে এবং মাঝারি পর্দার আকারে তাদের নীচে
উপাদানটিকে অবস্থান করে।
- 'এলজি:ক্লিয়ার-কোনটি' ক্লাস
এলিমেন্টে প্রয়োগ করা যেকোন পরিষ্কারকে নিষ্ক্রিয় করে এবং এলিমেন্টটিকে কন্টেইনারের উভয় পাশে একটি বড় স্ক্রীন সাইজে ভাসতে দেয়।
আউটপুট
উপরের আউটপুট অনুযায়ী, নির্দিষ্ট ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্ন সফলভাবে 'ক্লিয়ার' ইউটিলিটিতে প্রয়োগ করা হয়েছে।
উপসংহার
টেলউইন্ডে 'ক্লিয়ার' ইউটিলিটিগুলিতে ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্নগুলি প্রয়োগ করার জন্য, 'এ কাঙ্ক্ষিত মান নির্ধারণ করুন পরিষ্কার- <মান> 'ব্যবহার করে বিভিন্ন স্ক্রিনের আকারের জন্য উপযোগিতা' মো 'বা' এলজি 'ব্রেকপয়েন্ট যাচাইকরণের জন্য, ওয়েব পৃষ্ঠার পর্দার আকার পরিবর্তন করুন এবং পরিবর্তনগুলি নিশ্চিত করুন৷ এই নিবন্ধটি Tailwind-এর 'ক্লিয়ার' ইউটিলিটিগুলিতে নির্দিষ্ট ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি প্রয়োগ করার উদাহরণ প্রদর্শন করেছে।