Bulma এর Simple List এবং List Item Styling

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 এর লিস্ট কম্পোনেন্টগুলি ওয়েব ডিজাইনে সিম্পল এবং সুন্দর লিস্ট তৈরি করতে অত্যন্ত উপযোগী।