Bulma এর Table এবং List Components

Bulma CSS ফ্রেমওয়ার্কে Table এবং List কম্পোনেন্ট দুটি খুবই ব্যবহারিক এবং সহজে কাস্টমাইজযোগ্য। এগুলোর সাহায্যে আপনি আপনার ওয়েবসাইটে ডেটা টেবিল এবং তালিকা (লিস্ট) খুব সহজে প্রদর্শন করতে পারেন। এই টপিকটিতে আমরা Bulma এর Table এবং List কম্পোনেন্টের ব্যবহার ও কাস্টমাইজেশন দেখব।

১. বুলমা টেবিল (Bulma Table)

Bulma ফ্রেমওয়ার্কের টেবিল কম্পোনেন্ট একটি স্টাইলড টেবিল তৈরি করতে সহায়তা করে। এটি সিম্পল, পরিষ্কার, এবং কাস্টমাইজযোগ্য, এবং সাধারণ HTML টেবিলের সাথে কাজ করে।

বেসিক টেবিল

Bulma এ table ক্লাস ব্যবহার করে একটি সাধারণ টেবিল তৈরি করা যায়।

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

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>+123456789</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>+987654321</td>
    </tr>
  </tbody>
</table>

এখানে table ক্লাসটি ব্যবহার করা হয়েছে যাতে টেবিলের স্টাইল সঠিকভাবে প্রদর্শিত হয়।

২. টেবিলের অন্যান্য অপশন

Bulma টেবিলের আরও কিছু কাস্টমাইজেশন অপশন রয়েছে যা আপনি ব্যবহার করতে পারেন।

টেবিলের রঙ এবং স্টাইল:

Bulma তে টেবিলের বিভিন্ন রঙ এবং স্টাইল কাস্টমাইজ করার জন্য কিছু ক্লাস রয়েছে। যেমন:

• is-bordered: টেবিলের সীমানা যোগ করে।
• is-striped: টেবিলের লাইনে স্ট্রাইপ ইফেক্ট অ্যাড করে।
• is-hoverable: টেবিলের উপর মাউস হভার করলে রঙ পরিবর্তন হয়।
• is-narrow: টেবিলের কলামগুলি সঙ্কীর্ণ করে।

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

<table class="table is-bordered is-striped is-hoverable is-narrow">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>+123456789</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>+987654321</td>
    </tr>
  </tbody>
</table>

এখানে is-bordered, is-striped, is-hoverable, এবং is-narrow ক্লাসগুলি টেবিলের বিভিন্ন ভিজ্যুয়াল স্টাইল যোগ করতে ব্যবহৃত হয়েছে।

৩. বুলমা লিস্ট (Bulma List)

Bulma এর list কম্পোনেন্ট সাধারণত unordered (unordered list) এবং ordered (ordered list) লিস্ট তৈরির জন্য ব্যবহৃত হয়। এই লিস্টগুলিকে আরো কাস্টমাইজ করা যেতে পারে এবং সেগুলোর জন্য বিভিন্ন স্টাইল এবং ক্লাস রয়েছে।

বেসিক লিস্ট

Bulma তে list তৈরি করতে ul (unordered list) বা ol (ordered list) ব্যবহার করা হয়, এবং is-ordered বা is-unordered ক্লাস যুক্ত করা হয়।

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

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

এখানে list ক্লাসটি ব্যবহৃত হয়েছে, যা লিস্টের জন্য Bulma এর ডিফল্ট স্টাইল প্রদান করে।

৪. লিস্টের কাস্টমাইজেশন

Bulma এর লিস্ট কম্পোনেন্টে বিভিন্ন কাস্টমাইজেশন ক্লাসও রয়েছে, যা আপনার লিস্টের স্টাইল পরিবর্তন করতে সহায়তা করে।

লিস্ট ক্লাস:

• is-unstyled: লিস্টের ডিফল্ট স্টাইল (বুলেট পয়েন্ট বা নম্বর) সরিয়ে ফেলে।
• is-bordered: লিস্টের আইটেমের চারপাশে সীমানা যোগ করে।
• is-hoverable: লিস্ট আইটেমের উপর হভার করলে রঙ পরিবর্তন হয়।
• is-size-5: লিস্টের ফন্ট সাইজ পরিবর্তন করে।

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

<ul class="list is-unstyled is-hoverable is-bordered">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

এখানে is-unstyled, is-hoverable, এবং is-bordered ক্লাসগুলি ব্যবহার করে লিস্টের স্টাইল পরিবর্তন করা হয়েছে।

৫. অর্ডার্ড লিস্ট (Ordered List)

Bulma তে অর্ডারড লিস্ট তৈরি করার জন্য আপনি ol ট্যাগ ব্যবহার করতে পারেন এবং একইভাবে স্টাইল প্রয়োগ করতে পারেন।

উদাহরণ: অর্ডারড লিস্ট

<ol class="list is-size-5 is-hoverable">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

এখানে is-size-5 ক্লাস ব্যবহার করা হয়েছে যাতে লিস্টের ফন্ট সাইজ বড় হয় এবং is-hoverable ক্লাস হোভার ইফেক্ট যোগ করেছে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Table এবং List কম্পোনেন্টগুলি খুবই সহজ এবং ফ্লেক্সিবল, যা আপনাকে টেবিল এবং লিস্ট সজ্জিত এবং কাস্টমাইজ করতে সহায়তা করে। Table কম্পোনেন্টে আপনি বিভিন্ন স্টাইল যেমন is-bordered, is-striped, এবং is-hoverable ব্যবহার করতে পারেন। অপরদিকে List কম্পোনেন্টে আপনি is-unstyled, is-hoverable, এবং is-bordered ক্লাসগুলো ব্যবহার করে লিস্টের স্টাইল কাস্টমাইজ করতে পারেন। এগুলোর মাধ্যমে আপনি খুব সহজেই ডেটা প্রদর্শন করতে এবং লিস্ট তৈরি করতে পারবেন।

Bulma CSS ফ্রেমওয়ার্কের Table Component টেবিল তৈরি করার জন্য সহজ ও সজ্জিত উপায় প্রদান করে। এটি একটি ব্যবহারযোগ্য এবং সুন্দর ডিজাইন সহ টেবিল তৈরি করতে সহায়তা করে, যা ডেটা প্রদর্শন করার জন্য আদর্শ। Bulma এর টেবিল বিভিন্ন ধরনের স্টাইলিং এবং কাস্টমাইজেশন সমর্থন করে, যেমন striped, bordered, hoverable, এবং responsive টেবিল।

১. বেসিক টেবিল (Basic Table)

Bulma-এ একটি সাধারণ টেবিল তৈরি করতে, table ক্লাসটি ব্যবহার করতে হবে। এটি একটি সাধারণ, সাদা ব্যাকগ্রাউন্ডসহ টেবিল তৈরি করবে।

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

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে table ক্লাস ব্যবহার করা হয়েছে একটি সাধারণ টেবিল তৈরি করার জন্য। thead এবং tbody ট্যাগগুলি টেবিলের হেডিং এবং বডি তৈরি করতে ব্যবহৃত হয়।

২. Striped Table

Striped টেবিলটি ব্যবহার করলে টেবিলের সিটগুলোর ব্যাকগ্রাউন্ড পরিবর্তিত হয়, অর্থাৎ সিটগুলোর মধ্যে সাদা এবং হালকা রঙের প্যাটার্ন তৈরি হয়, যা টেবিলকে আরও স্পষ্ট এবং পড়তে সহজ করে।

উদাহরণ: Striped Table

<table class="table is-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
    <tr>
      <td>Mark Taylor</td>
      <td>marktaylor@example.com</td>
      <td>Editor</td>
    </tr>
  </tbody>
</table>

এখানে is-striped ক্লাস ব্যবহার করা হয়েছে, যা টেবিলের সিটগুলোর মধ্যে হালকা সাদা এবং রঙের প্যাটার্ন তৈরি করবে।

৩. Bordered Table

Bordered টেবিলের সমস্ত সেল এবং রোকে বর্ডার দেওয়ার জন্য is-bordered ক্লাস ব্যবহার করা হয়। এটি টেবিলের প্রতিটি সেলের চারপাশে বর্ডার যুক্ত করবে।

উদাহরণ: Bordered Table

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে is-bordered ক্লাস টেবিলের প্রতিটি সেলের চারপাশে একটি বর্ডার যোগ করেছে।

৪. Hoverable Table

Hoverable টেবিলের জন্য is-hoverable ক্লাস ব্যবহার করা হয়, যা টেবিলের প্রতিটি সেলে হোভার করলে ব্যাকগ্রাউন্ড পরিবর্তন হবে। এটি ইউজারকে টেবিলের উপাদানগুলির প্রতি মনোযোগ আকর্ষণ করতে সহায়তা করে।

উদাহরণ: Hoverable Table

<table class="table is-hoverable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে is-hoverable ক্লাস যোগ করা হয়েছে, যার ফলে টেবিলের রোতে মাউস হোভার করলে সেটির ব্যাকগ্রাউন্ড পরিবর্তিত হবে।

৫. Responsive Table

Bulma-তে টেবিলটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করতে responsive বানানো যেতে পারে। is-responsive ক্লাসটি ব্যবহার করলে টেবিলটি ছোট স্ক্রীনে স্ক্রোলেবল হয়ে যাবে, যাতে সমস্ত কলামগুলি দেখা যায়।

উদাহরণ: Responsive Table

<div class="table-container">
  <table class="table is-striped is-bordered is-hoverable is-fullwidth">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
        <td>Admin</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
        <td>User</td>
      </tr>
    </tbody>
  </table>
</div>

এখানে, is-responsive ক্লাস দিয়ে টেবিলের জন্য একটি কনটেইনার তৈরি করা হয়েছে, যাতে টেবিলটি মোবাইল স্ক্রীনে স্ক্রোলেবল হয়। এটি ব্যবহারকারীকে স্ক্রিনের আকার অনুযায়ী টেবিলটি দেখার সুবিধা দেয়।

৬. Full Width Table

যখন আপনি টেবিলকে সম্পূর্ণ প্রস্থে (full width) চান, তখন is-fullwidth ক্লাস ব্যবহার করতে পারেন। এটি টেবিলকে পেজের সম্পূর্ণ প্রস্থে প্রসারিত করবে।

উদাহরণ: Full Width Table

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>User</td>
    </tr>
  </tbody>
</table>

এখানে is-fullwidth ক্লাসটি টেবিলকে সম্পূর্ণ প্রস্থে প্রসারিত করেছে।

সারাংশ

Bulma এর Table Component ব্যবহার করে সহজেই সুন্দর এবং কার্যকরী টেবিল তৈরি করা সম্ভব। আপনি striped, bordered, hoverable, responsive, এবং fullwidth ক্লাসের মাধ্যমে টেবিলকে কাস্টমাইজ করতে পারেন। এছাড়াও, responsive টেবিল মোবাইল ফ্রেন্ডলি এবং স্ক্রোলেবল হতে সহায়ক, যা ছোট স্ক্রীনে টেবিলের ডেটা দেখতে সুবিধা দেয়। Bulma টেবিলটি সহজ, সজ্জিত এবং কাস্টমাইজেবল।

Bulma CSS ফ্রেমওয়ার্কে Table তৈরি করা এবং স্টাইলিং করা খুবই সহজ। এটি আপনাকে বিভিন্ন ধরনের টেবিল তৈরির জন্য বিভিন্ন ক্লাস সরবরাহ করে, যেমন টেবিলের সীমান্ত (bordering), পংক্তির স্ট্রিপিং (striping), টেবিলের আকার এবং অন্যান্য কাস্টমাইজেশন। এখানে আমরা Bulma এর টেবিল স্টাইলিং, বর্ডারিং এবং স্ট্রিপিং নিয়ে আলোচনা করবো।

১. বুলমা টেবিলের মৌলিক গঠন

Bulma তে টেবিল তৈরি করার জন্য table ক্লাস ব্যবহার করা হয়। এটি টেবিলের মৌলিক কাঠামো তৈরি করে এবং স্বাভাবিকভাবে একটি সাধারণ টেবিল তৈরি করে।

উদাহরণ:

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

এখানে, table ক্লাস ব্যবহার করে একটি মৌলিক টেবিল তৈরি করা হয়েছে, যেখানে thead এবং tbody এর মাধ্যমে শিরোনাম এবং ডেটা বিভাগ আলাদা করা হয়েছে।

২. টেবিলের বর্ডারিং (Bordering)

Bulma এ টেবিলের সীমান্ত বা বর্ডার যোগ করতে is-bordered ক্লাস ব্যবহার করা হয়। এটি টেবিলের সমস্ত সেল এবং সারির চারপাশে বর্ডার যোগ করে।

উদাহরণ:

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

এখানে, is-bordered ক্লাসটি টেবিলের সেলগুলোর চারপাশে সীমানা তৈরি করেছে। আপনি চাইলে শুধু সারি বা কলামের সীমান্তও করতে পারেন, তবে Bulma ফ্রেমওয়ার্কে মূলত is-bordered ক্লাসটি সব সেলে বর্ডার তৈরি করতে ব্যবহৃত হয়।

৩. টেবিল স্ট্রিপিং (Striping)

Striping টেবিলের পংক্তিগুলির মধ্যে আলাদা আলাদা রং ব্যবহার করে একে আরেকটি থেকে পার্থক্য করা হয়। Bulma এর is-striped ক্লাসের মাধ্যমে আপনি টেবিলের পংক্তিগুলোতে স্ট্রিপিং (alternating row colors) যোগ করতে পারেন।

উদাহরণ:

<table class="table is-bordered is-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>34</td>
    </tr>
    <tr>
      <td>Sam Wilson</td>
      <td>samwilson@example.com</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

এখানে, is-striped ক্লাসটি টেবিলের পংক্তিগুলোতে স্ট্রিপিং যুক্ত করেছে, অর্থাৎ পরপর পংক্তিগুলির মধ্যে পার্থক্য দেখা যাবে, যা ব্যবহারকারীকে টেবিলটি পড়তে সহজ করে।

৪. টেবিলের আকার এবং অন্যান্য কাস্টমাইজেশন

Bulma আপনাকে টেবিলের আকার এবং অন্যান্য স্টাইলিং কাস্টমাইজ করতে দেয়। টেবিলের আকার নিয়ন্ত্রণ করতে is-fullwidth এবং is-narrow ক্লাস ব্যবহার করা যেতে পারে।

৪.১. পূর্ণ প্রস্থ টেবিল (Full-width Table)

যদি আপনি টেবিলটিকে পুরো প্রস্থে (100%) চাইছেন, তবে is-fullwidth ক্লাস ব্যবহার করতে পারেন।

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

এখানে, is-fullwidth ক্লাসটি টেবিলকে তার প্যারেন্ট কন্টেইনারের পুরো প্রস্থে প্রসারিত করেছে।

৪.২. সংকীর্ণ টেবিল (Narrow Table)

যদি আপনি টেবিলের প্রস্থ সংকীর্ণ রাখতে চান, তবে is-narrow ক্লাস ব্যবহার করুন।

<table class="table is-narrow">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

এখানে, is-narrow ক্লাসটি টেবিলের সেলগুলোর মধ্যে ব্যবধান কমিয়ে দিয়ে এটি সংকীর্ণ করেছে।

৫. টেবিলের সজ্জা এবং কাস্টমাইজেশন

টেবিলের সেলগুলোতে আরও উন্নত সজ্জা করতে, যেমন টেক্সট এলাইনমেন্ট বা সেল প্যাডিং পরিবর্তন করতে, আপনি Bulma এর বিভিন্ন ক্লাস ব্যবহার করতে পারেন। যেমন:

• has-text-centered: টেক্সট কেন্দ্রভিত্তিক করা।
• is-hoverable: সেলগুলোতে hover করার সময় রঙ পরিবর্তন করা।

উদাহরণ:

<table class="table is-bordered is-striped is-hoverable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>janesmith@example.com</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

এখানে, is-hoverable ক্লাসটি টেবিলের সেলগুলোর উপর হভার করলে একটি হালকা রঙের পরিবর্তন করবে, যা ব্যবহারকারীকে ইন্টারঅ্যাকটিভ অনুভূতি দেয়।

সারাংশ

Bulma CSS ফ্রেমওয়ার্কের Table কম্পোনেন্টে সহজে বিভিন্ন স্টাইলিং, বর্ডারিং এবং স্ট্রিপিং অ্যাপ্লাই করা যায়। is-bordered ক্লাস ব্যবহার করে টেবিলের সীমান্ত যোগ করা যায়, is-striped ক্লাস দিয়ে পংক্তির মধ্যে স্ট্রিপিং (alternating row colors) তৈরি করা যায়, এবং is-hoverable ক্লাস ব্যবহার করে সেলে হভার ইফেক্ট যোগ করা যায়। এছাড়া is-fullwidth এবং is-narrow ক্লাস ব্যবহার করে টেবিলের আকার কাস্টমাইজ করা যায়। Bulma এর টেবিল স্টাইলিং খুবই ফ্লেক্সিবল এবং ব্যবহারকারী বান্ধব।

Bulma CSS ফ্রেমওয়ার্কে টেবিল তৈরি করা অত্যন্ত সহজ, এবং এটি Responsive Tables এবং Scrollable Tables তৈরি করার জন্য বেশ কিছু সুবিধা প্রদান করে। এই ধরনের টেবিল সাধারণত মোবাইল এবং ডেস্কটপ ভিউতে ভালোভাবে কাজ করে এবং বড় ডেটা টেবিলকে স্ক্রলযোগ্য বা রেসপন্সিভ করে তোলে।

এখানে Bulma ব্যবহার করে Responsive Tables এবং Scrollable Tables তৈরি করার পদ্ধতি আলোচনা করা হচ্ছে।

১. Responsive Tables

Responsive tables এমন টেবিল যা ছোট স্ক্রীনে (যেমন মোবাইল ডিভাইসে) নিজেকে স্কেল করে ফেলে বা horizontal scrolling ব্যবহার করে টেবিলের কন্টেন্ট দেখায়। Bulma এর table-container ক্লাস ব্যবহার করে এটি সহজে তৈরি করা যায়।

Responsive Table এর উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Table</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>

  <div class="container">
    <h1 class="title">Responsive Table</h1>

    <div class="table-container">
      <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
            <th>Occupation</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>28</td>
            <td>New York</td>
            <td>Software Developer</td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>34</td>
            <td>San Francisco</td>
            <td>Designer</td>
          </tr>
          <tr>
            <td>George Brown</td>
            <td>45</td>
            <td>Los Angeles</td>
            <td>Project Manager</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>
</html>

ব্যাখ্যা:

• table-container ক্লাস: এটি টেবিলের চারপাশে একটি কনটেইনার তৈরি করে, যা মোবাইল ডিভাইসে স্ক্রলিং সক্ষম করে।
• is-bordered, is-striped, is-narrow, is-hoverable, is-fullwidth: এগুলি Bulma টেবিলের ভিন্ন ভিন্ন স্টাইলিং ক্লাস। এগুলোর মাধ্যমে টেবিলের সীমা, স্ট্রাইপড রো, হোভার স্টাইল, এবং পুরো প্রস্থ ব্যবহার করা হয়।

এটি একটি রেসপন্সিভ টেবিল তৈরি করবে, যেখানে বড় স্ক্রীনে টেবিল সাধারণভাবে প্রদর্শিত হবে, এবং ছোট স্ক্রীনে স্ক্রলযোগ্য হয়ে যাবে।

২. Scrollable Tables

Scrollable tables ব্যবহার করা হয় যখন টেবিলের কন্টেন্ট খুব বড় হয় এবং আপনি চাইছেন যে টেবিলের কলামগুলো স্ক্রল না হয়ে শুধু রো (লাইন) গুলো স্ক্রল করুক। Bulma তে স্ক্রলেবল টেবিল তৈরি করার জন্য সাধারণত overflow-x: auto; ব্যবহার করা হয়।

Scrollable Table এর উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Table</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <style>
    .scrollable-table {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1 class="title">Scrollable Table</h1>

    <div class="scrollable-table">
      <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
            <th>Occupation</th>
            <th>Country</th>
            <th>Salary</th>
            <th>Experience</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>28</td>
            <td>New York</td>
            <td>Software Developer</td>
            <td>USA</td>
            <td>$80,000</td>
            <td>5 years</td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>34</td>
            <td>San Francisco</td>
            <td>Designer</td>
            <td>USA</td>
            <td>$70,000</td>
            <td>6 years</td>
          </tr>
          <tr>
            <td>George Brown</td>
            <td>45</td>
            <td>Los Angeles</td>
            <td>Project Manager</td>
            <td>USA</td>
            <td>$90,000</td>
            <td>10 years</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>
</html>

ব্যাখ্যা:

• scrollable-table ক্লাস: এই ক্লাসে overflow-x: auto; ব্যবহার করা হয়েছে, যা টেবিলের কন্টেন্টটি যদি খুব বড় হয় তবে টেবিলের নিচে স্ক্রলবার প্রদর্শিত হবে।
• max-width: 100%;: এটি নিশ্চিত করে যে টেবিলটি পেজের প্রস্থে যতটুকু জায়গা রয়েছে ততটুকু জায়গা দখল করবে।
• -webkit-overflow-scrolling: touch;: এই প্রপার্টিটি মোবাইল ডিভাইসে স্ক্রলিংকে স্মুথ করে তোলে।

এটি একটি স্ক্রলেবল টেবিল তৈরি করবে, যেখানে আপনি বড় টেবিলের কন্টেন্ট হরিজন্টালি স্ক্রল করতে পারবেন।

৩. রেসপন্সিভ টেবিলের জন্য অতিরিক্ত কাস্টমাইজেশন

যখন টেবিলের কন্টেন্ট খুব বড় হয় এবং রেসপন্সিভ ডিজাইনে আনা প্রয়োজন হয়, তখন নিচের কিছু অতিরিক্ত কাস্টমাইজেশন ব্যবহার করতে পারেন:

৩.১. টেবিলের কলামগুলি রেসপন্সিভ বানানো

আপনি যদি টেবিলের কলামগুলির সংখ্যা কমাতে চান মোবাইল ডিভাইসে, তবে আপনি media queries ব্যবহার করে টেবিলের কিছু কলাম hidden করে দিতে পারেন।

@media screen and (max-width: 768px) {
  .table td:nth-child(n+4) {
    display: none;
  }
}

এটি মোবাইল ডিভাইসে টেবিলের প্রথম ৩টি কলাম দেখাবে এবং বাকি কলামগুলো গোপন করবে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Responsive Tables এবং Scrollable Tables তৈরি করা বেশ সহজ। Responsive Tables টেবিলের কন্টেন্টকে ছোট স্ক্রীনে হরিজন্টালি স্ক্রলযোগ্য করে তোলে এবং Scrollable Tables ব্যবহার করে বড় টেবিলের কন্টেন্টের জন্য স্ক্রলিং সক্ষম করা যায়। Bulma এর table-container ক্লাস এবং CSS overflow-x: auto; এর মাধ্যমে আপনি সহজেই এই ধরনের টেবিল তৈরি করতে পারেন। এই ফিচারগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইটে বড় ডেটা টেবিলগুলোকে মোবাইল ফ্রেন্ডলি এবং ইউজার-বান্ধব করতে পারবেন।

Bulma ফ্রেমওয়ার্কে Simple List এবং List Item Styling ব্যবহার করে আপনি ওয়েব পেজের মধ্যে লিস্ট তৈরি করতে পারেন যা দেখতে সুন্দর এবং ব্যবহারকারী-বান্ধব হয়। Bulma এর লিস্ট স্টাইলিং অনেক সহজ এবং ইন্টিউটিভ, যার মাধ্যমে আপনি সহজেই অর্ডারড (Ordered) অথবা আনঅর্ডারড (Unordered) লিস্ট তৈরি করতে পারবেন। এছাড়া, প্রতিটি লিস্ট আইটেমের স্টাইলিং কাস্টমাইজ করা খুব সহজ।

এই গাইডে, আমরা Bulma এর লিস্ট স্টাইলিং এবং লিস্ট আইটেমের স্টাইলিং নিয়ে আলোচনা করব।

১. Unordered List (আনঅর্ডারড লিস্ট)

Bulma তে Unordered List তৈরি করতে সহজেই ul এবং li ট্যাগ ব্যবহার করা যায়। সাধারনত, আনঅর্ডারড লিস্টের আইটেমগুলো পয়েন্ট বা ডট (•) দ্বারা চিহ্নিত হয়। Bulma এই লিস্টের জন্য কিছু ডিফল্ট স্টাইল প্রদান করে যা লিস্ট আইটেমগুলোকে সুন্দরভাবে প্রদর্শন করে।

উদাহরণ: Unordered List (আনঅর্ডারড লিস্ট)

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

এখানে সাধারণত Bulma ডিফল্টভাবে ডট (•) ব্যবহার করে প্রতিটি আইটেমের জন্য।

কাস্টম স্টাইল: Unordered List Styling

Bulma তে আপনি is-size-4, has-text-centered, is-uppercase ইত্যাদি ক্লাস ব্যবহার করে লিস্টকে কাস্টমাইজ করতে পারেন।

<ul class="is-size-4 has-text-centered is-uppercase">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

এখানে:

• is-size-4: লিস্ট আইটেমের ফন্ট সাইজ বাড়ানো হয়েছে।
• has-text-centered: আইটেমগুলোকে কেন্দ্রিত করা হয়েছে।
• is-uppercase: টেক্সটটিকে বড় হাতের অক্ষরে পরিবর্তন করা হয়েছে।

২. Ordered List (অর্ডারড লিস্ট)

Ordered List তৈরি করতে আপনি ol এবং li ট্যাগ ব্যবহার করবেন। অর্ডারড লিস্টে আইটেমগুলো সংখ্যার মাধ্যমে সাজানো থাকে, যা নির্দিষ্ট একটি অর্ডারে উপস্থাপিত হয়।

উদাহরণ: Ordered List (অর্ডারড লিস্ট)

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

এখানে প্রতিটি আইটেম স্বয়ংক্রিয়ভাবে সংখ্যার মাধ্যমে সাজানো হবে।

কাস্টম স্টাইল: Ordered List Styling

আপনি অর্ডারড লিস্টের জন্যও Bulma এর বিভিন্ন ক্লাস ব্যবহার করে কাস্টমাইজেশন করতে পারেন।

<ol class="is-size-4 has-text-danger">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

এখানে:

• is-size-4: ফন্ট সাইজ বড় করা হয়েছে।
• has-text-danger: টেক্সটের রঙ পরিবর্তন করে রেড করা হয়েছে।

৩. List Item (লিস্ট আইটেম) Styling

Bulma এ লিস্ট আইটেমগুলোকে আরও স্টাইলিশ এবং ইন্টারেকটিভ করতে কিছু অতিরিক্ত ক্লাস ব্যবহার করা যায়। আপনি লিস্ট আইটেমের মধ্যে ডিস্ক, স্কয়ার, লাইন থ্রু ইত্যাদি ব্যবহার করে আইটেমের চেহারা পরিবর্তন করতে পারেন।

উদাহরণ: List Item Styling

<ul>
  <li class="has-text-success">Item 1 (Success)</li>
  <li class="has-text-warning">Item 2 (Warning)</li>
  <li class="has-text-danger">Item 3 (Danger)</li>
</ul>

এখানে:

• has-text-success: আইটেমের রঙ সবুজ (success) করা হয়েছে।
• has-text-warning: আইটেমের রঙ হলুদ (warning) করা হয়েছে।
• has-text-danger: আইটেমের রঙ লাল (danger) করা হয়েছে।

উদাহরণ: List Item with Icons

আপনি Bulma এর icons ব্যবহার করে লিস্ট আইটেমের সামনে আইকন যোগ করতে পারেন।

<ul>
  <li><span class="icon is-small"><i class="fas fa-check-circle"></i></span> Item 1</li>
  <li><span class="icon is-small"><i class="fas fa-times-circle"></i></span> Item 2</li>
  <li><span class="icon is-small"><i class="fas fa-exclamation-circle"></i></span> Item 3</li>
</ul>

এখানে:

• icon is-small: আইকনের আকার ছোট করা হয়েছে।
• Font Awesome icons ব্যবহার করা হয়েছে আইটেমের সামনে।

৪. Nested List (নেস্টেড লিস্ট)

Bulma এ আপনি লিস্ট আইটেমের মধ্যে লিস্ট যুক্ত করে Nested List তৈরি করতে পারেন, যা আরও সিস্টেমেটিক এবং লজিক্যালভাবে সাজানো থাকে।

উদাহরণ: Nested List

<ul>
  <li>Item 1
    <ul>
      <li>Nested Item 1</li>
      <li>Nested Item 2</li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

এখানে:

• প্রথম লিস্ট আইটেমের মধ্যে একটি নতুন আনঅর্ডারড লিস্ট তৈরি করা হয়েছে।
• নেস্টেড লিস্টের আইটেমগুলো স্বয়ংক্রিয়ভাবে বুলেট পয়েন্টের মাধ্যমে চিহ্নিত হবে।

৫. Bulma এর লিস্টের বিশেষ ক্লাস

Bulma তে লিস্ট স্টাইলিংয়ের জন্য কিছু বিশেষ ক্লাসও রয়েছে, যা আপনাকে লিস্টের চেহারা কাস্টমাইজ করতে সাহায্য করবে।

• is-hoverable: এই ক্লাসটি ব্যবহার করলে লিস্ট আইটেমে হোভার ইফেক্ট যোগ হয়, অর্থাৎ মাউস হোভার করলে আইটেমটি হাইলাইট হবে।

  <ul class="is-hoverable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  

• is-small: লিস্ট আইটেমের আকার ছোট করতে ব্যবহার করা হয়।

  <ul class="is-small">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  

সারাংশ

Bulma এর Simple List এবং List Item Styling খুবই সহজ এবং কার্যকরীভাবে লিস্ট আইটেমগুলোকে স্টাইল করতে সহায়তা করে। আপনি ul, ol, এবং li ট্যাগ ব্যবহার করে লিস্ট তৈরি করতে পারেন এবং বিভিন্ন ক্লাস যেমন is-size-4, has-text-centered, is-uppercase ইত্যাদি দিয়ে কাস্টমাইজেশন করতে পারেন। এছাড়া, is-hoverable এবং is-small ক্লাস ব্যবহার করে লিস্ট আইটেমের উপর হোভার ইফেক্ট এবং আকার পরিবর্তন করতে পারেন। Bulma এর লিস্ট কম্পোনেন্টগুলি ওয়েব ডিজাইনে সিম্পল এবং সুন্দর লিস্ট তৈরি করতে অত্যন্ত উপযোগী।