Bulma এর Media Object এবং Card Components

Bulma ফ্রেমওয়ার্কে Media Object এবং Card দুটি গুরুত্বপূর্ণ উপাদান (component) রয়েছে, যা ব্যবহৃত হয় কন্টেন্টকে সুন্দরভাবে সাজানোর জন্য। এই উপাদানগুলির সাহায্যে আপনি সহজেই মিডিয়া কন্টেন্ট এবং কার্ড ভিত্তিক লেআউট তৈরি করতে পারেন।

১. Media Object

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

Media Object এর গঠন

<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>This is an example of a media object in Bulma.</p>
  </div>
</div>

এখানে:

• media ক্লাসটি একটি Flexbox কন্টেইনার হিসেবে কাজ করে।
• media-left: এখানে আপনি মিডিয়া উপাদান (যেমন ছবি) রাখবেন।
• media-content: এটি টেক্সট বা অন্যান্য কন্টেন্টের জন্য ব্যবহৃত হয়।
• image is-48x48: ছবির আকার সীমিত করতে ব্যবহার করা হয়।

Media Object এর কাস্টমাইজেশন:

আপনি media-left এবং media-right ব্যবহার করে মিডিয়া উপাদানকে বাম বা ডানদিকে রাখতে পারেন। এছাড়া is-64x64, is-128x128 ইত্যাদি ক্লাস দিয়ে ছবির আকার কাস্টমাইজ করা যায়।

<div class="media">
  <div class="media-right">
    <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-5">Media Object with Right Image</p>
    <p>This media object has the image on the right side.</p>
  </div>
</div>

এখানে media-right ক্লাস ব্যবহার করে ছবিটি ডানদিকে রাখা হয়েছে।

২. Card Components

Bulma এর Card কম্পোনেন্ট একটি জনপ্রিয় এবং নমনীয় উপাদান, যা কন্টেন্টকে একটি বক্স বা কার্ডের মধ্যে সুন্দরভাবে উপস্থাপন করতে ব্যবহৃত হয়। এই কম্পোনেন্টটি সাধারণত ছবির সাথে টেক্সট, লিঙ্ক, এবং বাটন ইত্যাদি একত্রে দেখানোর জন্য ব্যবহার করা হয়।

Card এর গঠন

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://via.placeholder.com/800x600" alt="Placeholder Image">
    </figure>
  </div>
  <div class="card-content">
    <p class="title is-4">Card Title</p>
    <p>This is a simple card in Bulma.</p>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Link 1</a>
    <a href="#" class="card-footer-item">Link 2</a>
  </footer>
</div>

এখানে:

• card: পুরো কার্ডের কন্টেইনার।
• card-image: ছবির জন্য একটি অংশ (যেমন হেডার বা টপ ইমেজ)।
• card-content: টেক্সট বা অন্যান্য কন্টেন্টের জন্য ব্যবহৃত অংশ।
• card-footer: ফুটা বা ফুটার যেখানে লিঙ্ক বা বাটন রাখতে পারেন।

Card এর কাস্টমাইজেশন:

Bulma এর কার্ডে আপনি বিভিন্ন সেকশন যেমন card-header, card-body, card-footer ব্যবহার করে আরও কাস্টমাইজেশন করতে পারেন।

উদাহরণ: কার্ডের হেডার এবং ফুটার ব্যবহার

<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Card Header
    </p>
    <a href="#" class="card-header-icon">
      <span class="icon">
        <i class="fas fa-times" aria-hidden="true"></i>
      </span>
    </a>
  </header>
  <div class="card-content">
    <p class="title is-4">Card Content</p>
    <p>This is the content inside the card.</p>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Footer Link</a>
    <a href="#" class="card-footer-item">Footer Link</a>
  </footer>
</div>

এখানে:

• card-header: কার্ডের শিরোনাম বা হেডার অংশ।
• card-footer: কার্ডের ফুটার, যেখানে সাধারণত লিঙ্ক বা বাটন রাখা হয়।

৩. Media Object এবং Card কম্পোনেন্টের তুলনা

সারাংশ

Bulma এর Media Object এবং Card Components দুটি শক্তিশালী উপাদান যা বিভিন্ন ধরনের কন্টেন্ট সাজাতে সাহায্য করে। Media Object সাধারণত ছবি এবং টেক্সট একত্রে প্রদর্শন করার জন্য ব্যবহৃত হয়, যেখানে মিডিয়া উপাদান বাম বা ডানদিকে থাকে এবং টেক্সট তার পাশে। অপরদিকে, Card Component কন্টেন্টকে একটি বক্সের মধ্যে সাজাতে ব্যবহৃত হয়, যা বিভিন্ন সেকশন যেমন header, content, এবং footer ধারণ করতে পারে। Bulma তে এই উপাদানগুলির সহজ এবং নমনীয় কাস্টমাইজেশন সুবিধা রয়েছে, যা আপনাকে খুব সহজে সুন্দর এবং রেসপনসিভ ডিজাইন তৈরি করতে সহায়তা করে।

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 আপনার ওয়েব পেজের কন্টেন্টকে সুন্দরভাবে সাজাতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে।

Bulma ফ্রেমওয়ার্কে Image এবং Content একত্রিত করা একটি সহজ কাজ। Bulma এর Image কম্পোনেন্ট এবং Content ক্লাসগুলি ব্যবহার করে আপনি সাইটের কন্টেন্টের সাথে ইমেজকে সুন্দরভাবে সাজিয়ে উপস্থাপন করতে পারেন। এই ফ্রেমওয়ার্কটি স্বয়ংক্রিয়ভাবে রেসপনসিভ ডিজাইন প্রদান করে, যা বিভিন্ন স্ক্রীন সাইজে ইমেজ এবং কন্টেন্টের উপস্থাপনাকে উপযুক্ত করে।

১. Image কম্পোনেন্ট

Bulma-এ ইমেজগুলোর জন্য একটি বিশেষ কম্পোনেন্ট রয়েছে, যা responsive এবং সুন্দরভাবে সজ্জিত থাকে। আপনি image ক্লাসটি ব্যবহার করে ইমেজকে রেসপনসিভ বা বিভিন্ন সাইজে সেট করতে পারবেন।

ইমেজের বেসিক ব্যবহৃত ক্লাস:

• image: সাধারণ ইমেজ উপাদান।
• is-16by9: ইমেজকে একটি 16:9 অনুপাত অনুযায়ী সেট করা।
• is-square: ইমেজকে স্কোয়ার (বর্গাকার) বানানো।
• is-4by3: ইমেজকে 4:3 অনুপাত অনুযায়ী সেট করা।

উদাহরণ: Basic Image

<div class="image">
  <img src="https://via.placeholder.com/800x600" alt="Example Image">
</div>

এখানে:

• image ক্লাসটি ব্যবহার করা হয়েছে, যা ইমেজকে রেসপনসিভ করে তোলে।

২. Image এবং Content সমন্বয়

Bulma ফ্রেমওয়ার্কে আপনি ইমেজ এবং কন্টেন্ট (যেমন প্যারাগ্রাফ, শিরোনাম, লিঙ্ক ইত্যাদি) সুন্দরভাবে একত্রিত করতে পারেন। এটি সাধারণত Columns, Card, বা Media Object এর মতো লেআউট সিস্টেম ব্যবহার করে করা হয়।

উদাহরণ: Image এবং Content একত্রিত করা

<div class="columns">
  <div class="column is-one-third">
    <div class="image">
      <img src="https://via.placeholder.com/400x300" alt="Sample Image">
    </div>
  </div>
  <div class="column is-two-thirds">
    <h2 class="title is-3">Lorem Ipsum</h2>
    <p>This is an example paragraph to demonstrate the alignment of image and content in Bulma. The image is placed on the left side and the text is on the right.</p>
  </div>
</div>

এখানে:

• columns এবং column ক্লাস ব্যবহার করে ইমেজ এবং কন্টেন্টকে দুইটি কলামে বিভক্ত করা হয়েছে।
• ইমেজটি বামে এবং কন্টেন্টটি ডানদিকে সজ্জিত হয়েছে।

৩. Card কম্পোনেন্টে Image এবং Content

Bulma এর Card কম্পোনেন্টটি ইমেজ এবং কন্টেন্ট একত্রিত করার একটি জনপ্রিয় উপায়। এখানে ইমেজ এবং কন্টেন্টকে সুন্দরভাবে একটি কনটেইনারের মধ্যে উপস্থাপন করা হয়, যা বেশিরভাগ সময় প্রোডাক্ট ডিটেইলস বা ব্লগ পোস্টের জন্য ব্যবহার করা হয়।

উদাহরণ: Card কম্পোনেন্টে Image এবং Content

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://via.placeholder.com/400x300" alt="Image in Card">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <h2 class="title is-4">Product Title</h2>
        <p>Some details about the product go here. It could be a brief description or specifications of the item.</p>
      </div>
    </div>
  </div>
</div>

এখানে:

• card ক্লাসটি একটি কার্ড তৈরি করে।
• card-image ক্লাসটি ইমেজ ধারণ করে।
• card-content ক্লাসটি কন্টেন্টের জন্য ব্যবহৃত হয়, যেমন শিরোনাম, বিবরণ ইত্যাদি।
• is-4by3 ক্লাসটি ইমেজকে 4:3 অনুপাত অনুযায়ী সেট করেছে।

৪. Media Object Layout

Media Object Layout একটি জনপ্রিয় লেআউট যা ইমেজ এবং কন্টেন্টকে একটি একসাথে সজ্জিত করতে ব্যবহৃত হয়। এটি সাধারনত সংবাদ বা ব্লগ পোস্টে ব্যবহৃত হয় যেখানে একটি ইমেজ এবং তার সাথে সম্পর্কিত কন্টেন্ট থাকে।

উদাহরণ: Media Object Layout

<article class="media">
  <div class="media-left">
    <figure class="image is-64x64">
      <img src="https://via.placeholder.com/64" alt="Avatar">
    </figure>
  </div>
  <div class="media-content">
    <div class="content">
      <p><strong>John Doe</strong> <small>@johndoe</small> <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
      </p>
    </div>
  </div>
</article>

এখানে:

• media ক্লাসটি ব্যবহৃত হয়েছে যা একটি মিডিয়া অবজেক্ট তৈরি করে।
• media-left ক্লাসটি ইমেজের জন্য ব্যবহৃত হয়েছে এবং media-content ক্লাসটি কন্টেন্টের জন্য।

৫. Image এবং Content এর রেসপনসিভ সমন্বয়

Bulma ফ্রেমওয়ার্কের image এবং columns ক্লাসগুলি রেসপনসিভ ডিজাইনের জন্য স্বয়ংক্রিয়ভাবে ইমেজ এবং কন্টেন্টের আকার ঠিক রাখে। ফলে ওয়েবসাইটটি বিভিন্ন স্ক্রীনে সুন্দরভাবে কাজ করে।

উদাহরণ: রেসপনসিভ Image এবং Content

<div class="columns">
  <div class="column is-half-tablet is-one-third-desktop">
    <div class="image">
      <img src="https://via.placeholder.com/500x300" alt="Responsive Image">
    </div>
  </div>
  <div class="column">
    <h2 class="title is-4">Responsive Layout</h2>
    <p>This layout adjusts itself based on the screen size. On larger screens, the image takes one-third of the width, while on smaller devices, it takes half the width.</p>
  </div>
</div>

এখানে:

• is-half-tablet এবং is-one-third-desktop ক্লাসগুলি রেসপনসিভ ডিজাইনে ইমেজের আকার পরিবর্তন করতে সাহায্য করে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Image এবং Content একত্রিত করার জন্য সহজ এবং কার্যকরী কম্পোনেন্ট প্রদান করা হয়েছে। Image কম্পোনেন্ট ব্যবহার করে আপনি রেসপনসিভ ইমেজ তৈরি করতে পারেন, এবং Columns, Card, অথবা Media Object Layout ব্যবহার করে ইমেজ এবং কন্টেন্টকে সুন্দরভাবে সাজিয়ে উপস্থাপন করতে পারেন। Bulma এর এই সুবিধাগুলি ওয়েব পৃষ্ঠায় ইমেজ এবং কন্টেন্টের সমন্বয়কে আরও সুন্দর এবং কার্যকরী করে তোলে।

Bulma ফ্রেমওয়ার্কে Card Component একটি শক্তিশালী এবং লাইটওয়েট উপাদান যা কন্টেন্টকে একটি নির্দিষ্ট বক্সের মধ্যে উপস্থাপন করতে ব্যবহৃত হয়। এটি সাধারণত প্রোডাক্টের বিস্তারিত, ব্লগ পোস্ট, প্রোফাইল ইত্যাদি প্রদর্শনের জন্য ব্যবহৃত হয়। Bulma এর Card কম্পোনেন্টটি খুবই কাস্টমাইজযোগ্য এবং রেসপনসিভ, যা বিভিন্ন ধরনের কন্টেন্ট সন্নিবেশ করতে পারে যেমন টেক্সট, ইমেজ, বাটন ইত্যাদি।

১. Card Structure (কার্ডের গঠন)

Bulma-তে Card কম্পোনেন্ট তিনটি মূল অংশে বিভক্ত:

• Card Header: কার্ডের উপরের অংশ, যা সাধারণত টাইটেল বা অন্য কোনো গুরুত্বপূর্ণ তথ্য ধারণ করে।
• Card Content: কার্ডের মূল কন্টেন্ট, যেমন টেক্সট, ইমেজ বা অন্য উপাদান।
• Card Footer: কার্ডের নিচের অংশ, যেখানে অতিরিক্ত লিঙ্ক বা বাটন থাকে।

২. Basic Card Example (বেসিক কার্ড উদাহরণ)

নিচে একটি সাধারণ Card কম্পোনেন্টের উদাহরণ দেওয়া হল:

<div class="card">
  <div class="card-header">
    <p class="card-header-title">
      Card Title
    </p>
  </div>
  <div class="card-content">
    <div class="content">
      This is some content inside a card. You can add more text, images, and other elements here.
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="card-footer-item">Footer Link 1</a>
    <a href="#" class="card-footer-item">Footer Link 2</a>
  </div>
</div>

এখানে:

• card: এটি পুরো কার্ড কম্পোনেন্টের কন্টেইনার।
• card-header: কার্ডের উপরের অংশ যেখানে টাইটেল থাকে।
• card-content: কার্ডের মূল কন্টেন্ট।
• card-footer: কার্ডের নিচের অংশ যেখানে লিঙ্ক বা বাটন থাকে।

৩. Card with Image (কার্ডে ইমেজ যোগ করা)

আপনি কার্ডে ইমেজও যোগ করতে পারেন। ইমেজটি সাধারণত card-image ক্লাস ব্যবহার করে যুক্ত করা হয়।

উদাহরণ:

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://via.placeholder.com/400" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
      This card contains an image.
    </div>
  </div>
</div>

এখানে:

• card-image: ইমেজের জন্য কন্টেইনার।
• figure এবং image is-4by3: ইমেজের অনুপাত ঠিক করার জন্য ব্যবহৃত হয়।

৪. Card with a Button (কার্ডে বাটন যোগ করা)

কার্ডের মধ্যে বাটন যোগ করতে, আপনি card-footer-item ক্লাস ব্যবহার করতে পারেন, অথবা button ক্লাস সরাসরি card-content অংশে প্রয়োগ করতে পারেন।

উদাহরণ:

<div class="card">
  <div class="card-header">
    <p class="card-header-title">
      Card with Button
    </p>
  </div>
  <div class="card-content">
    <div class="content">
      This card contains a button.
    </div>
    <div class="buttons">
      <button class="button is-primary">Click Me</button>
    </div>
  </div>
</div>

এখানে:

• buttons: একাধিক বাটন রাখার জন্য কন্টেইনার।
• button is-primary: প্রাইমারি বাটন তৈরি করতে ব্যবহৃত ক্লাস।

৫. Card with Multiple Columns (একাধিক কলাম সহ কার্ড)

Bulma এর columns এবং column ক্লাস ব্যবহার করে আপনি একটি কার্ডের মধ্যে একাধিক কলাম তৈরি করতে পারেন।

উদাহরণ:

<div class="card">
  <div class="card-content">
    <div class="columns">
      <div class="column is-half">
        <div class="content">
          First column content.
        </div>
      </div>
      <div class="column is-half">
        <div class="content">
          Second column content.
        </div>
      </div>
    </div>
  </div>
</div>

এখানে columns এবং column is-half ব্যবহার করে দুইটি কলাম তৈরি করা হয়েছে, যেগুলি প্রতিটি ৫০% প্রস্থ নেবে।

৬. Card with Header, Footer and Links (কার্ডে হেডার, ফুটার এবং লিঙ্ক)

Bulma-তে আপনি card-footer-item ক্লাস ব্যবহার করে কার্ডের ফুটারে একাধিক লিঙ্ক যোগ করতে পারেন। এর মাধ্যমে আপনি কার্ডের নিচে অতিরিক্ত তথ্য যেমন লিঙ্ক, সেবা বা অন্য অ্যাকশন যোগ করতে পারেন।

উদাহরণ:

<div class="card">
  <div class="card-header">
    <p class="card-header-title">
      Card with Footer Links
    </p>
  </div>
  <div class="card-content">
    <div class="content">
      This card contains a footer with links.
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="card-footer-item">Link 1</a>
    <a href="#" class="card-footer-item">Link 2</a>
    <a href="#" class="card-footer-item">Link 3</a>
  </div>
</div>

এখানে:

• card-footer-item: ফুটারে প্রতিটি লিঙ্ককে সজ্জিত করার জন্য ব্যবহৃত ক্লাস।

৭. Card with Image, Content, and Footer

একটি সম্পূর্ণ কার্ড যাতে ইমেজ, কন্টেন্ট এবং ফুটার থাকে, সেজন্য নিচের উদাহরণটি দেখা যায়:

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://via.placeholder.com/400" alt="Image">
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
      This is a card with an image, content, and footer.
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="card-footer-item">More Info</a>
    <a href="#" class="card-footer-item">Share</a>
  </div>
</div>

এখানে:

• card-image: ইমেজের জন্য কন্টেইনার।
• card-content: কার্ডের মূল কন্টেন্ট।
• card-footer: লিঙ্ক বা অ্যাকশন বাটন প্রদর্শনের জন্য।

সারাংশ

Bulma এর Card কম্পোনেন্টটি একটি অত্যন্ত কাস্টমাইজযোগ্য এবং রেসপনসিভ উপাদান যা টেক্সট, ইমেজ, বাটন এবং লিঙ্ক সহ বিভিন্ন কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এটি Card Header, Card Content, এবং Card Footer এর মাধ্যমে তিনটি মূল অংশে বিভক্ত থাকে, এবং এই অংশগুলোকে বিভিন্নভাবে কাস্টমাইজ করা যায়। Card কম্পোনেন্টের মধ্যে ফ্লেক্সবক্স সিস্টেম, কলাম সিস্টেম এবং অন্যান্য স্টাইল ব্যবহার করে অত্যন্ত কার্যকরী এবং সুন্দর ডিজাইন তৈরি করা সম্ভব।

Bulma ফ্রেমওয়ার্কের Card component একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব উপাদান যা বিভিন্ন ধরণের কন্টেন্ট উপস্থাপন করার জন্য ডিজাইন করা হয়েছে। Card কম্পোনেন্টে আপনি সহজেই ছবি, টেক্সট কন্টেন্ট, ফুটার এবং আরও অনেক কিছু যুক্ত করতে পারেন। এটি সাধারণত একটি বক্সের মতো কাজ করে যা বিভিন্ন উপাদানকে সজ্জিত এবং প্রদর্শন করতে ব্যবহৃত হয়।

Bulma তে Card এর মধ্যে তিনটি মূল অংশ থাকে:

1. Card Image
2. Card Content
3. Card Footer

এগুলি একে অপরের সাথে সন্নিবেশিত হয়ে একটি সুন্দর এবং কার্যকরী লেআউট তৈরি করে।

১. Card Layout

Bulma এর Card কম্পোনেন্ট খুবই সহজে কাস্টমাইজ করা যায়। একটি কার্ড সাধারণত একটি card ক্লাসের মাধ্যমে তৈরি করা হয় এবং এর মধ্যে card-image, card-content, এবং card-footer ক্লাসগুলোর মাধ্যমে উপাদানগুলো সাজানো হয়।

উদাহরণ: Card Layout

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://via.placeholder.com/300" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4">Card Title</p>
        <p class="subtitle is-6">Card Subtitle</p>
      </div>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac erat sit amet urna scelerisque fermentum.
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="card-footer-item">Footer Item 1</a>
    <a href="#" class="card-footer-item">Footer Item 2</a>
    <a href="#" class="card-footer-item">Footer Item 3</a>
  </div>
</div>

এখানে:

• card: কার্ড কম্পোনেন্টের মূল কন্টেইনার।
• card-image: কার্ডের মধ্যে একটি ছবি যোগ করার জন্য।
• card-content: কার্ডের কন্টেন্ট যোগ করার জন্য।
• card-footer: কার্ডের নীচে ফুটার (যেখানে লিঙ্ক বা অন্যান্য উপাদান থাকতে পারে)।

২. Card Image

কার্ডের ছবি বা card-image অংশে সাধারণত একটি img ট্যাগ ব্যবহার করা হয়, যা কার্ডের শীর্ষে অবস্থান করে। Bulma তে আপনি figure এবং image ক্লাস ব্যবহার করে ছবির আকার নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: Card Image

<div class="card-image">
  <figure class="image is-4by3">
    <img src="https://via.placeholder.com/400x300" alt="Image">
  </figure>
</div>

এখানে:

• figure: Bulma তে ছবি সন্নিবেশ করতে ব্যবহৃত ক্লাস।
• image: ছবির আকার নির্ধারণ করতে ব্যবহৃত ক্লাস। is-4by3 ক্লাস ব্যবহার করে ছবির অদ্বিতীয় অনুপাত নির্ধারণ করা হয়েছে (4:3)।

৩. Card Content

card-content অংশে কার্ডের মূল কন্টেন্ট যেমন শিরোনাম, সাবটাইটেল, বর্ণনা ইত্যাদি থাকে। এখানে আপনি সাধারণ HTML ট্যাগ যেমন p, h1, h2 ব্যবহার করে কন্টেন্ট যোগ করতে পারেন।

উদাহরণ: Card Content

<div class="card-content">
  <div class="media">
    <div class="media-content">
      <p class="title is-4">Card Title</p>
      <p class="subtitle is-6">Card Subtitle</p>
    </div>
  </div>
  <div class="content">
    This is the content of the card. You can add text, images, or any other elements here. It will wrap nicely within the card.
  </div>
</div>

এখানে:

• media: একটি ক্লাস যা কলাম-ভিত্তিক স্ট্রাকচার তৈরি করে।
• title এবং subtitle: Bulma এর টেক্সট স্টাইলিং ক্লাস যা শিরোনাম এবং সাবটাইটেল তৈরির জন্য ব্যবহৃত হয়।
• content: সাধারণ টেক্সট বা অন্যান্য কন্টেন্ট উপাদান রাখার জন্য ব্যবহৃত ক্লাস।

৪. Card Footer

card-footer কার্ডের নিচের অংশে থাকে, যেখানে আপনি লিঙ্ক বা অন্যান্য ইন্টারেক্টিভ উপাদান রাখতে পারেন। এখানে সাধারণত card-footer-item ক্লাস ব্যবহার করা হয়।

উদাহরণ: Card Footer

<div class="card-footer">
  <a href="#" class="card-footer-item">Read More</a>
  <a href="#" class="card-footer-item">Share</a>
  <a href="#" class="card-footer-item">Comment</a>
</div>

এখানে:

• card-footer: কার্ডের ফুটার কন্টেইনার।
• card-footer-item: ফুটারের আইটেম, যা সাধারণত লিঙ্ক বা বোতাম হিসেবে কাজ করে।

৫. Card এর কাস্টমাইজেশন

Bulma এর Card component কাস্টমাইজযোগ্য। আপনি ফ্লেক্সবক্স, গ্রিড সিস্টেম, টেক্সট সাইজ, রঙ এবং বর্ডার কাস্টমাইজ করতে পারেন। Bulma এর ফ্লেক্সবক্স সিস্টেমের মাধ্যমে আপনি কার্ডের ভিতরের কন্টেন্টের অ্যালাইনমেন্ট এবং সাইজ নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: Card এর কাস্টম ডিজাইন

<div class="card">
  <div class="card-image">
    <figure class="image is-16by9">
      <img src="https://via.placeholder.com/600x400" alt="Image">
    </figure>
  </div>
  <div class="card-content">
    <p class="title is-5 has-text-centered">Centered Card Title</p>
    <p class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.
    </p>
  </div>
</div>

এখানে:

• has-text-centered: টেক্সট সেন্টার করার জন্য ব্যবহৃত ক্লাস।

সারাংশ

Bulma এর Card component খুবই শক্তিশালী এবং কাস্টমাইজযোগ্য, যা বিভিন্ন উপাদানকে সুন্দরভাবে উপস্থাপন করতে সাহায্য করে। আপনি card-image এর মাধ্যমে ছবি, card-content এর মাধ্যমে মূল কন্টেন্ট এবং card-footer এর মাধ্যমে ফুটার আইটেম যুক্ত করতে পারেন। এই উপাদানগুলির মাধ্যমে সহজেই ওয়েব পেজে আকর্ষণীয় এবং কার্যকরী ডিজাইন তৈরি করা সম্ভব। Bulma এর ফ্লেক্সবক্স এবং গ্রিড সিস্টেমের সাহায্যে কার্ডের কন্টেন্টের অ্যালাইনমেন্ট, সাইজ এবং স্টাইলিং সহজেই কাস্টমাইজ করা যায়।