টেইলউইন্ড সিএসএস-এ, প্রতিস্থাপিত উপাদানগুলি হল সেই উপাদানগুলির সামগ্রী যার বিষয়বস্তু একটি বহিরাগত সংস্থান যেমন ছবি এবং ভিডিও দ্বারা প্রতিস্থাপিত হয়৷ কখনও কখনও, ব্যবহারকারীরা পাত্রের মধ্যে একটি প্রতিস্থাপিত উপাদান স্থাপন করার জন্য একটি চ্যালেঞ্জের সম্মুখীন হন। এর কারণ হল এই উপাদানগুলি পাত্রে উপচে পড়তে পারে যদি তাদের আকার উপলব্ধ স্থানের চেয়ে বড় হয়। টেলউইন্ড সিএসএস একটি প্রতিস্থাপিত উপাদানের বিষয়বস্তু কন্টেইনারের মধ্যে কীভাবে অবস্থান এবং সারিবদ্ধ করা হয় তা নিয়ন্ত্রণ করতে ইউটিলিটি ক্লাস সরবরাহ করে।
এই নিবন্ধটি Tailwind CSS-এ একটি কন্টেইনারের মধ্যে প্রতিস্থাপিত উপাদানগুলির অবস্থানের পদ্ধতিটি ব্যাখ্যা করবে।
টেইলউইন্ডে একটি পাত্রের মধ্যে প্রতিস্থাপিত উপাদানগুলি কীভাবে স্থাপন করবেন?
টেলউইন্ডের একটি পাত্রের মধ্যে প্রতিস্থাপিত উপাদানগুলির অবস্থান করতে, একটি HTML প্রোগ্রাম তৈরি করুন এবং ' বস্তু-<অবস্থান/পার্শ্ব> পছন্দসই উপাদান সহ ইউটিলিটি। প্রতিস্থাপিত উপাদানগুলির অবস্থানের জন্য 'অবজেক্ট-
বাক্য গঠন
< উপাদান ক্লাস = 'অবজেক্ট-<পজিশন ...' > ... উপাদান >
উদাহরণ
এই উদাহরণে, আমরা একটি ধারক তৈরি করব এবং সমস্ত ' বস্তু-<অবস্থান/পার্শ্ব> 'সহ উপযোগিতা' ” (চিত্র) উপাদানগুলি কন্টেইনারের মধ্যে তাদের প্রতিস্থাপিত অবস্থান নির্দিষ্ট করতে:
< শরীর >
< div ক্লাস = 'বিজি-স্কাই-300 গ্রিড গ্রিড-সারি-3 গ্রিড-ফ্লো-কল এম-5 স্পেস-y-4 পি-4 ন্যায্যতা-এর মধ্যে' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-বাম-শীর্ষ w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-বাম w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-বাম-নীচে w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-টপ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-সেন্টার w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-নিচে w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-ডান-টপ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-রাইট w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img ক্লাস = 'অবজেক্ট-কোনও অবজেক্ট-ডান-নিচ w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
শরীর >
এখানে, প্যারেন্ট
- ' bg-sky-300 ” ক্লাস ধারকটির পটভূমির রঙ আকাশে সেট করে।
- ' গ্রিড ” ক্লাস একটি গ্রিড বিন্যাস সক্ষম করে।
- ' গ্রিড-সারি-3 ” ক্লাস গ্রিডে সারি সংখ্যা 3 এ সেট করে।
- ' গ্রিড-ফ্লো-কল ” ক্লাস কলামে গ্রিড আইটেমের প্রবাহকে সংজ্ঞায়িত করে।
- ' m-5 ” ক্লাস কন্টেইনারের চারপাশে মার্জিনের 5 ইউনিট যোগ করে।
- ' স্থান-y-4 ” ক্লাস কন্টেইনারের মধ্যে চাইল্ড
উপাদানগুলির মধ্যে 4 ইউনিটের একটি উল্লম্ব ব্যবধান যোগ করে।
- ' p-4 ” ক্লাস কন্টেইনারের ভিতরের সামগ্রীতে প্যাডিংয়ের 4 ইউনিট যোগ করে।
- ' ন্যায়সঙ্গত-এর মধ্যে ” ক্লাস পাত্রের মধ্যে শিশু উপাদানগুলিকে সারিবদ্ধ করে এবং সমানভাবে বিতরণ করে৷
উপাদানগুলিতে:
- ' বস্তু-কোনটি নয় ” ক্লাস এলিমেন্টে কোনো পজিশন প্রয়োগ করে না এবং কন্টেইনারে উপাদানটিকে তার ডিফল্ট অবস্থানে প্রদর্শন করে।
- ' বস্তু-বাম-শীর্ষ ” ক্লাস
উপাদানটিকে তার কন্টেইনারের উপরের-বাম কোণায় অবস্থান করে।
- ' বস্তু-বাম ” ক্লাস উপাদানটিকে কন্টেইনারের বাম প্রান্তে সারিবদ্ধ করে এবং উল্লম্বভাবে কেন্দ্রীভূত রাখে।
- ' বস্তু-বাম-নীচ ” ক্লাস
উপাদানটিকে তার কন্টেইনারের নীচে-বাম কোণে অবস্থান করে।
- ' বস্তু-শীর্ষ ” ক্লাস উপাদানটিকে তার পাত্রের উপরের প্রান্তে অবস্থান করে এবং এটিকে অনুভূমিকভাবে কেন্দ্রীভূত করে।
- ' বস্তু কেন্দ্র ” শ্রেণী উপাদানটিকে পাত্রের কেন্দ্রে রাখে এবং অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রীভূত রাখে।
- ' বস্তুর নীচে ” ক্লাস উপাদানটিকে তার ধারকটির নীচের প্রান্তে রাখে এবং এটিকে অনুভূমিকভাবে কেন্দ্রীভূত করে।
- ' বস্তু-ডান-শীর্ষ ” ক্লাস
উপাদানটিকে কন্টেইনারের উপরের-ডান কোণায় অবস্থান করে।
- ' অবজেক্ট-ডান ” শ্রেণী উপাদানটিকে তার পাত্রের ডান প্রান্তে অবস্থান করে এবং উল্লম্বভাবে কেন্দ্রীভূত রাখে।
- ' বস্তু-ডান-নীচ ” ক্লাস উপাদানটিকে তার কন্টেইনারের নীচে-ডান কোণায় অবস্থান করে।
আউটপুট
উপরের ওয়েব পৃষ্ঠায়, এটি লক্ষ্য করা যায় যে সমস্ত প্রতিস্থাপিত উপাদানের বিষয়বস্তু সফলভাবে অবস্থান করা হয়েছে।
উপসংহার
টেইলউইন্ডের একটি পাত্রের মধ্যে প্রতিস্থাপিত উপাদানগুলির অবস্থানের জন্য, ' বস্তু-<অবস্থান/পার্শ্ব> ” ইউটিলিটিগুলি পছন্দসই উপাদানগুলির সাথে ব্যবহার করা হয়, যেমন চিত্র৷ ব্যবহারকারীদের প্রতিস্থাপিত উপাদানগুলির অবস্থানের জন্য 'অবজেক্ট-
' ইউটিলিটিতে নির্দিষ্ট অবস্থান বা দিক যেমন বাম, ডান বা কেন্দ্র সংজ্ঞায়িত করতে হবে। এই নিবন্ধটি Tailwind CSS-এ একটি কন্টেইনারের মধ্যে প্রতিস্থাপিত উপাদানগুলির অবস্থানের পদ্ধতিকে চিত্রিত করেছে।