একটি প্রতিক্রিয়াশীল ওয়েবসাইট স্ক্রীনের আকার এবং ডিভাইসের মাত্রাগুলিকে মানিয়ে নিতে পারে যেখানে এটি দেখা হচ্ছে। ওয়েবসাইটের প্রতিক্রিয়াশীলতার পাশাপাশি, এটিও প্রয়োজনীয় যে চিত্র এবং পাঠ্য সারিবদ্ধ এবং প্রতিক্রিয়াশীল। সারিবদ্ধ চিত্রগুলিই তাদের চারপাশে পাঠ্য মোড়ানো। যদিও সারিবদ্ধ পাঠ্য একটি সম্পূর্ণ অনুচ্ছেদের মত দেখায়।
এই নিবন্ধটি প্রতিক্রিয়াশীলভাবে চিত্র এবং পাঠ্য সারিবদ্ধ করার পদ্ধতিটি দেখবে।
প্রতিক্রিয়াশীলভাবে ছবি এবং টেক্সট সারিবদ্ধ কিভাবে?
ছবি এবং পাঠ্য সহ বিষয়বস্তু বুটস্ট্র্যাপ ব্যবহার করে প্রতিক্রিয়াশীলভাবে সারিবদ্ধ করা যেতে পারে। প্রদর্শন প্রদানের জন্য, আমরা দুটি উদাহরণ তালিকাভুক্ত করেছি:
- টেক্সটটিকে কেন্দ্রে উল্লম্বভাবে এবং চিত্রটিকে অনুভূমিকভাবে সারিবদ্ধ করুন।
- পাঠ্য এবং প্রতিক্রিয়াশীল চিত্রকে বাম সারিবদ্ধ করুন।
উদাহরণ 1: টেক্সটটিকে উল্লম্বভাবে কেন্দ্রে সারিবদ্ধ করুন এবং চিত্রটি অনুভূমিকভাবে
প্রথমে, চিত্রটিকে অনুভূমিকভাবে এবং পাঠ্যটিকে উল্লম্বভাবে কেন্দ্রীভূত করার চেষ্টা করুন। এই উদ্দেশ্যে, নীচে দেওয়া নির্দেশাবলী অনুসরণ করুন:
ধাপ 1: একটি HTML স্ট্রাকচার তৈরি করুন
একটি এইচটিএমএল কাঠামো তৈরি করার সময়, প্রথমে লিঙ্ক করুন “ বুটস্ট্র্যাপ ” এবং বাহ্যিক CSS ফাইলও। এর পরে, একটি তৈরি করুন ধাপ 2: CSS প্রয়োগ করুন পাত্রে: চালু পাঠ্যে: এটি লক্ষ্য করা যায় যে পাঠ্যটি উল্লম্বভাবে কেন্দ্রীভূত, এবং চিত্রটি অনুভূমিকভাবে কেন্দ্রীভূত: উদাহরণ 2: পাঠ্য এবং প্রতিক্রিয়াশীল চিত্রকে বাম সারিবদ্ধ করুন এই প্রদত্ত উদাহরণে, চিত্র এবং পাঠ্য বাম-সারিবদ্ধ করা হবে। সেই উদ্দেশ্যে, নীচের ধাপে ধাপে নির্দেশাবলীর মাধ্যমে যান: ধাপ 1: একটি HTML স্ট্রাকচার তৈরি করুন HTML কোড উপরের মতই, উদাহরণে ব্যবহার করা হয়েছে। ধাপ 2: CSS প্রয়োগ করুন পাত্রে: চালু পাঠ্যে: আউটপুট নিশ্চিত করে যে পাঠ্য এবং চিত্র বাম-সারিবদ্ধ: প্রতিক্রিয়াশীলভাবে ছবি এবং পাঠ্য সারিবদ্ধ করতে, প্রথমে, CSS-এ একটি গ্রিড বা ফ্লেক্স লেআউট তৈরি করুন, তারপর ' সারিবদ্ধ আইটেম ' সম্পত্তির মান ' কেন্দ্র ” এটি করার ফলে CSS-এ প্রতিক্রিয়াশীলভাবে ছবি এবং পাঠ্য সারিবদ্ধ হবে। এই লেখা-আপ ব্যবহারকারীদের ছবি এবং পাঠ্যকে প্রতিক্রিয়াশীলভাবে সারিবদ্ধ করার জন্য একটি সম্পূর্ণ নির্দেশিকা প্রদান করেছে। ট্যাগ এবং টেক্সট:
< শরীর >
< div ক্লাস = 'পাত্র' >
< img src = 'test-image.jpg' সবকিছু = 'পরীক্ষা চিত্র' >
< div ক্লাস = 'পাঠ্য' > এই কিছু টেক্সট. div >
div >
শরীর >
:
.পাত্র {
প্রদর্শন: ফ্লেক্স ;
টেক্সট-সারিবদ্ধ: কেন্দ্র;
justify-content: কেন্দ্র;
align-items: কেন্দ্র;
}
img {
সর্বোচ্চ প্রস্থ: 100 % ;
উচ্চতা: স্বয়ংক্রিয়;
}
.টেক্সট {
ফন্ট-আকার: 16px;
সর্বোচ্চ-প্রস্থ: 390px;
}
:
.পাত্র {
প্রদর্শন: ফ্লেক্স ;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
img {
সর্বোচ্চ প্রস্থ: 100 % ;
উচ্চতা: স্বয়ংক্রিয়;
}
.টেক্সট {
ফন্ট-আকার: 16px;
সর্বোচ্চ-প্রস্থ: 390px;
}
উপসংহার