Responsive Tables এবং Other Components

Bulma ফ্রেমওয়ার্কে Responsive Tables এবং অন্যান্য কম্পোনেন্টগুলো ওয়েব ডিজাইনের জন্য অত্যন্ত উপযোগী। Responsive Tables বিশেষভাবে গুরুত্বপূর্ণ কারণ এগুলো ব্যবহারকারীকে ছোট স্ক্রীনে ভালোভাবে টেবিল দেখার সুযোগ দেয়। এছাড়া Bulma আরও অনেক উপাদান সরবরাহ করে যা আপনাকে ওয়েবসাইটের ইউজার ইন্টারফেস উন্নত করতে সহায়তা করবে।

১. Responsive Tables

Bulma তে টেবিল তৈরির জন্য table ক্লাস ব্যবহার করা হয়। টেবিল সাধারণত বড় স্ক্রীনে ঠিকভাবে প্রদর্শিত হয়, কিন্তু ছোট স্ক্রীনে টেবিলের কন্টেন্ট খুব বেশি সংকুচিত হয়ে যেতে পারে। এই সমস্যা সমাধান করতে, Bulma responsive টেবিলের জন্য is-fullwidth এবং is-responsive ক্লাস সরবরাহ করে।

বেসিক টেবিল উদাহরণ:

<table class="table is-bordered is-striped is-narrow is-hoverable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Peter Johnson</td>
      <td>45</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

Responsive টেবিল:

Bulma এর is-responsive ক্লাস ব্যবহারের মাধ্যমে আপনি টেবিলটি মোবাইল স্ক্রীনে সহজে স্ক্রলযোগ্য করে তুলতে পারেন, যাতে ছোট স্ক্রীনে টেবিলের কন্টেন্ট পড়া সহজ হয়।

<div class="table-container">
  <table class="table is-responsive is-fullwidth">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>28</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>34</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <td>Peter Johnson</td>
        <td>45</td>
        <td>Chicago</td>
      </tr>
    </tbody>
  </table>
</div>

এখানে:

• is-responsive: টেবিলকে রেসপনসিভ (স্ক্রলযোগ্য) করে তোলে।
• is-fullwidth: টেবিলের প্রস্থ পুরো ডিভাইসের প্রস্থে প্রস্থিত হবে।

২. Other Components

Bulma ফ্রেমওয়ার্কে বেশ কিছু দরকারি কম্পোনেন্ট আছে যেগুলো আপনার ওয়েবসাইটের ডিজাইন উন্নত করতে সহায়তা করে। এসব কম্পোনেন্টগুলি ব্যবহার করে আপনি ওয়েব পেজে দ্রুত এবং সুন্দর ইউজার ইন্টারফেস তৈরি করতে পারেন।

Card Component

Bulma তে Card কম্পোনেন্ট ব্যবহার করে আপনি একাধিক কনটেন্ট বা ইনফরমেশন প্রদর্শন করতে পারেন। এটি সাধারণত ছবির সাথে একটি শিরোনাম, বিবরণ এবং অন্যান্য তথ্য প্রদর্শন করতে ব্যবহৃত হয়।

<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">
    <p class="title">Card Title</p>
    <p class="subtitle">Card Subtitle</p>
    <p>This is the content of the card. You can place any content here.</p>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Read More</a>
    <a href="#" class="card-footer-item">Share</a>
  </footer>
</div>

এখানে:

• card-image: ছবির জন্য একটি জায়গা।
• card-footer: ফুওটার অংশ যেখানে আপনি লিঙ্ক বা অন্য অ্যাকশন বাটন রাখতে পারেন।

Navbar (নেভিগেশন বার)

Bulma তে একটি সহজ এবং সুন্দর Navbar তৈরি করা যায়। এটি রেসপনসিভ এবং বিভিন্ন ধরণের লিঙ্ক অথবা মেনু আইটেম ধারণ করতে পারে।

<nav class="navbar is-primary">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="https://via.placeholder.com/112x28" alt="Logo">
    </a>
    <span class="navbar-burger" data-target="navbarMenu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </div>
  <div id="navbarMenu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

এখানে:

• navbar: নেভিগেশন বার।
• navbar-burger: একটি মোবাইল ফ্রেন্ডলি বাটন যা ক্লিক করলে মেনু দেখা যায়।
• navbar-menu: নেভিগেশন মেনু।

Modal (মোডাল)

Bulma তে Modal কম্পোনেন্ট ব্যবহার করে আপনি পপ-আপ উইন্ডো তৈরি করতে পারেন, যা ব্যবহারকারীর দৃষ্টি আকর্ষণ করে। এটি সাধারণত ব্যবহারকারীর এক্সট্রা কনফারমেশন অথবা ইনপুট নেয়া জন্য ব্যবহৃত হয়।

<button class="button is-primary" id="openModal">Open Modal</button>

<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Modal Title</h1>
      <p>This is the modal content. You can put anything here.</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close" id="closeModal"></button>
</div>

<script>
  document.getElementById('openModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.add('is-active');
  });

  document.getElementById('closeModal').addEventListener('click', function() {
    document.getElementById('myModal').classList.remove('is-active');
  });
</script>

এখানে:

• modal: মোডাল উইন্ডো।
• modal-background: মোডালের ব্যাকগ্রাউন্ড, যা ওপেন করা হলে ব্যবহারকারীর পেছনে অন্ধকার দেখায়।
• modal-content: মোডালের মূল কনটেন্ট।
• is-active: মোডালকে একটিভ করে দেখায়।

৩. অন্যান্য কম্পোনেন্টস

Bulma আরও অনেক গুরুত্বপূর্ণ কম্পোনেন্ট প্রদান করে, যেমন:

• Progress Bar: প্রোগ্রেস বার দেখানোর জন্য progress ক্লাস।
• Notification: টেক্সট বা সতর্কবার্তা প্রদর্শন করতে notification ক্লাস।
• Tabs: ট্যাব সিস্টেম তৈরি করতে tabs ক্লাস।
• Form Elements: ইনপুট, সিলেক্ট, চেকবক্স এবং রেডিও বাটন তৈরি করতে।

সারাংশ

Bulma ফ্রেমওয়ার্কের Responsive Tables এবং অন্যান্য কম্পোনেন্টগুলো ওয়েব ডিজাইনের জন্য খুবই উপযোগী এবং শক্তিশালী। Responsive Tables মোবাইল ডিভাইসে টেবিলের কন্টেন্ট স্ক্রলযোগ্য করে তুলে, যা ব্যবহারকারীকে সহজে টেবিলের ডেটা পড়তে সহায়তা করে। এছাড়া, Card, Navbar, Modal এবং অন্যান্য কম্পোনেন্টগুলো ডিজাইন এবং ফাংশনালিটি উভয়ই উন্নত করতে সাহায্য করে। Bulma এর এসব কম্পোনেন্টগুলো আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও কার্যকর এবং আকর্ষণীয় করে তোলে।