Media Object Layout এর ব্যবহার

Bulma CSS ফ্রেমওয়ার্কে Media Object Layout একটি শক্তিশালী লেআউট টুল, যা কন্টেন্টের মধ্যে টেক্সট এবং ইমেজ বা অন্যান্য উপাদানগুলি সমান্তরালভাবে প্রদর্শন করতে সহায়তা করে। এটি সাধারণত ব্লগ পোস্ট, নিউজ ফিড, অথবা যে কোনো কন্টেন্ট সেকশনে ব্যবহৃত হয় যেখানে একটি উপাদান (যেমন ইমেজ) একটি টেক্সটের সাথে পাশাপাশি প্রদর্শিত হয়।

Bulma এর Media Object ক্লাসটি ব্যবহারের মাধ্যমে আপনি সহজে এই ধরনের লেআউট তৈরি করতে পারেন, যেখানে উপাদানগুলি পাশপাশি থাকবে এবং তাদের মধ্যে সঠিক স্থান থাকবে।

১. Media Object এর মৌলিক কাঠামো

Bulma তে Media Object Layout তৈরি করতে media, media-left, এবং media-content ক্লাস ব্যবহার করা হয়। media ক্লাসটি মূল কন্টেইনার হিসেবে কাজ করে, এবং media-left ক্লাসটি সাধারণত ছবি বা আইকন ধারণ করে, আর media-content ক্লাসটি টেক্সট বা অন্যান্য কন্টেন্ট ধারণ করে।

Media Object Layout এর উদাহরণ:

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Media Object Title</p>
    <p class="subtitle is-6">Subtitle or description goes here.</p>
  </div>
</div>

এখানে, media-left ক্লাসটি ইমেজ ধারণ করছে এবং media-content ক্লাসটি টেক্সট ধারণ করছে। এই দুটি উপাদান একসাথে একটি লাইনবদ্ধভাবে প্রদর্শিত হবে।

২. Media Object এর Alignment এবং Variations

Bulma তে Media Object এর মধ্যে উপাদানগুলির অবস্থান এবং আকার কাস্টমাইজ করা যেতে পারে। আপনি media-left এবং media-right ব্যবহার করে বাম বা ডান দিকে উপাদান সজ্জিত করতে পারেন। এছাড়া, বিভিন্ন সাইজের ইমেজ ব্যবহার করতে is-48x48, is-128x128 ইত্যাদি ক্লাস ব্যবহার করা হয়।

উদাহরণ: Media Object Right Alignment

<div class="media">
  <div class="media-content">
    <p class="title is-4">Media Object Title</p>
    <p class="subtitle is-6">Subtitle or description goes here.</p>
  </div>
  <div class="media-right">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
</div>

এখানে media-right ক্লাসটি ইমেজটি ডানদিকে সজ্জিত করবে, এবং টেক্সটটি বামদিকে থাকবে।

৩. Media Object গুলোর স্টাইলিং এবং কাস্টমাইজেশন

Bulma তে Media Object এর জন্য অন্যান্য স্টাইলিং বৈশিষ্ট্য যেমন সীমানা, মার্জিন, প্যাডিং, এবং অন্যান্য স্টাইল যোগ করা যায়। আপনি media কন্টেইনারের মধ্যে বিভিন্ন কন্টেন্ট যুক্ত করতে পারেন, যেমন আইকন, টেক্সট, লিংক ইত্যাদি।

উদাহরণ: ইমেজ এবং টেক্সটের স্টাইলিং

<div class="media">
  <div class="media-left">
    <figure class="image is-64x64">
      <img src="https://via.placeholder.com/64" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Media Object with Icon</p>
    <p class="subtitle is-6">A small image with some text.</p>
    <a href="#">Read More</a>
  </div>
</div>

এখানে, is-64x64 ক্লাসটি ছবির সাইজ নির্ধারণ করেছে এবং একটি লিংক <a> যোগ করা হয়েছে।

৪. Responsive Media Object

Bulma তে Media Object Layout গুলো রেসপনসিভ (responsive) হতে পারে, অর্থাৎ বিভিন্ন স্ক্রীন সাইজে এই লেআউটগুলো নিজে থেকেই মানিয়ে নেবে। আপনি media-left এবং media-right ক্লাসগুলোর মাধ্যমে ফোন, ট্যাবলেট বা ডেস্কটপ স্ক্রীনে সহজে Media Object কাস্টমাইজ করতে পারবেন।

উদাহরণ: Responsive Media Object

<div class="media">
  <div class="media-left">
    <figure class="image is-128x128">
      <img src="https://via.placeholder.com/128" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Responsive Media Object</p>
    <p class="subtitle is-6">The image and content will stack on smaller screens.</p>
  </div>
</div>

এই উদাহরণে, মিডিয়া কন্টেন্টের সাইজ এবং ইমেজ বড়, এবং এটি ছোট স্ক্রীনে স্তুপীকৃত হবে।

৫. Multiple Media Objects

Bulma তে আপনি একাধিক Media Object ব্যবহার করতে পারেন একটি কন্টেইনারে। এটি সাধারণত ব্লগ পোস্ট, কমেন্ট সেকশন, অথবা নিউজ ফিডে ব্যবহৃত হয় যেখানে একাধিক আইটেম সজ্জিত করতে হয়।

উদাহরণ: Multiple Media Objects

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Media Object 1</p>
    <p class="subtitle is-6">First media object description.</p>
  </div>
</div>

<div class="media">
  <div class="media-left">
    <figure class="image is-48x48">
      <img src="https://via.placeholder.com/48" alt="Placeholder Image">
    </figure>
  </div>
  <div class="media-content">
    <p class="title is-4">Media Object 2</p>
    <p class="subtitle is-6">Second media object description.</p>
  </div>
</div>

এখানে দুটি Media Object একে অপরের নিচে প্রদর্শিত হবে।

সারাংশ

• Media Object Layout Bulma ফ্রেমওয়ার্কে কন্টেন্টের মধ্যে ছবি বা অন্যান্য উপাদানকে টেক্সটের সাথে পাশাপাশি প্রদর্শন করতে ব্যবহৃত হয়।
• media, media-left, এবং media-content ক্লাস ব্যবহার করে আপনি সহজেই Media Object তৈরি করতে পারেন।
• আপনি media-right ক্লাস ব্যবহার করে ডান দিকে উপাদান রাখতে পারেন এবং বিভিন্ন স্ক্রীন সাইজে রেসপনসিভ লেআউট তৈরি করতে পারেন।
• Bulma তে একাধিক Media Objects একই কন্টেইনারে ব্যবহার করা সম্ভব।

Bulma এর Media Object Layout আপনার ওয়েব পেজের কন্টেন্টকে সুন্দরভাবে সাজাতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে।