Bulma এর Typography

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

১. টাইটেল (Title)

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

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

<h1 class="title">Main Title</h1>
<h2 class="subtitle">Subtitle goes here</h2>

এখানে:

• title ক্লাসটি মূল শিরোনাম বা টাইটেল তৈরি করতে ব্যবহৃত হয়।
• subtitle ক্লাসটি সাবটাইটেল তৈরি করতে ব্যবহৃত হয়।

এছাড়া, Bulma এর ক্লাসগুলো বিভিন্ন টাইটেল সাইজ ও স্টাইল প্রদান করে যেমন is-1, is-2, is-3, ... is-6। এগুলোর মাধ্যমে আপনি টাইটেলের আকার পরিবর্তন করতে পারেন।

উদাহরণ:

<h1 class="title is-1">Large Title</h1>
<h2 class="title is-2">Medium Title</h2>
<h3 class="title is-3">Small Title</h3>

২. প্যারাগ্রাফ (Paragraph)

Bulma তে প্যারাগ্রাফ তৈরির জন্য সাধারণ HTML p ট্যাগ ব্যবহার করা হয়। তবে, আপনি চাইলে has-text-centered, has-text-left, অথবা has-text-right ক্লাসগুলো ব্যবহার করে টেক্সটের অ্যালাইনমেন্ট কাস্টমাইজ করতে পারবেন।

উদাহরণ:

<p class="has-text-centered">This is a centered paragraph.</p>
<p class="has-text-left">This is a left-aligned paragraph.</p>
<p class="has-text-right">This is a right-aligned paragraph.</p>

৩. টেক্সট রঙ (Text Color)

Bulma বিভিন্ন ধরনের টেক্সট রঙ ক্লাস সরবরাহ করে, যা আপনাকে সহজে টেক্সটের রঙ পরিবর্তন করতে সহায়তা করে। টেক্সট রঙ পরিবর্তন করতে has-text- ক্লাস ব্যবহার করা হয়, এরপর রঙের নাম যেমন has-text-primary, has-text-success, has-text-danger ইত্যাদি ব্যবহার করা যায়।

উদাহরণ:

<p class="has-text-primary">This text is in the primary color.</p>
<p class="has-text-success">This text is green (success).</p>
<p class="has-text-danger">This text is red (danger).</p>

এছাড়া, আপনি টেক্সটের রঙ পরিবর্তন করতে অন্যান্য ক্লাসও ব্যবহার করতে পারেন যেমন:

• has-text-warning: হলুদ রঙ
• has-text-info: নীল রঙ
• has-text-dark: কালো রঙ
• has-text-light: সাদা রঙ

৪. টেক্সট সাইজ (Text Size)

Bulma টেক্সট সাইজ নিয়ন্ত্রণের জন্য is-size-1, is-size-2, is-size-3, ... is-size-6 ক্লাস প্রদান করে। এগুলো দিয়ে আপনি টেক্সটের আকার পরিবর্তন করতে পারেন।

উদাহরণ:

<p class="is-size-1">This is the largest text.</p>
<p class="is-size-2">This is a slightly smaller text.</p>
<p class="is-size-3">This is a medium text.</p>
<p class="is-size-6">This is the smallest text.</p>

এছাড়া, is-size-4 এবং is-size-5 টেক্সট সাইজের মাঝারি সাইজগুলো ব্যবহার করা যায়।

৫. টেক্সট স্টাইলিং (Text Styling)

Bulma কিছু টেক্সট স্টাইলিং ক্লাসও প্রদান করে, যেমন italic, bold, এবং underline। এগুলো ব্যবহার করে আপনি সহজেই টেক্সটের স্টাইল পরিবর্তন করতে পারেন।

উদাহরণ:

<p class="has-text-weight-bold">This is bold text.</p>
<p class="has-text-weight-light">This is light text.</p>
<p class="has-text-italic">This is italic text.</p>
<p class="has-text-underline">This text is underlined.</p>

এখানে:

• has-text-weight-bold: বোল্ড টেক্সট।
• has-text-weight-light: হালকা টেক্সট।
• has-text-italic: ইটালিক টেক্সট।
• has-text-underline: আন্ডারলাইন টেক্সট।

৬. লাইন হাইট (Line Height)

Bulma তে লাইন হাইট নিয়ন্ত্রণ করার জন্য is-line-height-1, is-line-height-2 ইত্যাদি ক্লাস প্রদান করা হয়েছে। এর মাধ্যমে আপনি টেক্সটের লাইন স্পেসিং কাস্টমাইজ করতে পারেন।

উদাহরণ:

<p class="is-line-height-1">This is text with normal line-height.</p>
<p class="is-line-height-2">This is text with increased line-height.</p>

৭. টেক্সট টান (Text Transform)

Bulma কিছু টেক্সট ট্রান্সফর্মেশন ক্লাস সরবরাহ করে যেমন uppercase, lowercase, এবং capitalize। এগুলো ব্যবহার করে টেক্সটের কেস পরিবর্তন করা যায়।

উদাহরণ:

<p class="has-text-transform-uppercase">This text is uppercase.</p>
<p class="has-text-transform-lowercase">This text is lowercase.</p>
<p class="has-text-transform-capitalize">This text is capitalized.</p>

সারাংশ

Bulma এর Typography আপনাকে টেক্সটের স্টাইল, সাইজ, রঙ এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে অনেক সহায়তা করে। এটি সহজ এবং শক্তিশালী CSS ক্লাসের মাধ্যমে বিভিন্ন ধরনের টেক্সট স্টাইল তৈরি করা সম্ভব। Bulma এর টাইটেল, প্যারাগ্রাফ, টেক্সট সাইজ, রঙ, স্টাইলিং এবং অন্যান্য ফিচারের মাধ্যমে আপনি একটি সুন্দর এবং ব্যবহারবান্ধব ডিজাইন তৈরি করতে পারেন।

Bulma CSS ফ্রেমওয়ার্কটি ব্যবহারের ক্ষেত্রে টেক্সট এবং টাইপোগ্রাফি স্টাইলিংয়ের জন্য বেশ কিছু ডিফল্ট ক্লাস প্রদান করে। Bulma এর Typography স্টাইলিং সহজ, পরিষ্কার এবং রেসপনসিভ। এখানে Bulma এর প্রাথমিক টাইপোগ্রাফি স্টাইলিংয়ের কিছু মূল বৈশিষ্ট্য এবং উদাহরণ আলোচনা করা হলো।

১. টাইটেল এবং সাবটাইটেল স্টাইলিং

Bulma একটি সহজ এবং সুন্দর হেডিং সিস্টেম প্রদান করে, যা বিভিন্ন স্তরের টাইটেল (Heading) তৈরি করতে ব্যবহৃত হয়। title এবং subtitle ক্লাসগুলোর মাধ্যমে আপনি টেক্সটের আকার ও স্টাইল নিয়ন্ত্রণ করতে পারেন।

টাইটেল (Title) ক্লাস

Bulma এর title ক্লাসটি প্রধান হেডিং (H1) এর জন্য ব্যবহৃত হয়, এবং এটি বিভিন্ন আকারে উপস্থিত থাকে। আপনি এটি বিভিন্ন আকারে ব্যবহার করতে পারেন:

<h1 class="title">Main Heading</h1>
<h2 class="title is-2">Secondary Heading</h2>
<h3 class="title is-3">Tertiary Heading</h3>
<h4 class="title is-4">Fourth Level Heading</h4>
<h5 class="title is-5">Fifth Level Heading</h5>
<h6 class="title is-6">Sixth Level Heading</h6>

এখানে is-2, is-3 ইত্যাদি ক্লাস ব্যবহার করে টাইটেলের আকারের পরিবর্তন করা হয়েছে। Bulma হেডিং ক্লাসে সর্বাধিক ৬টি স্তরের শিরোনাম প্রদান করে।

সাবটাইটেল (Subtitle) ক্লাস

subtitle ক্লাসটি মূল টাইটেলের নিচে একটি উপশিরোনাম তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত একটি ছোট এবং সাবলীল টেক্সট হিসেবে প্রদর্শিত হয়।

<h2 class="subtitle">This is a subtitle</h2>

এটি মূল টাইটেলটির সাথে সম্পর্কিত কোনো অতিরিক্ত তথ্য বা ব্যাখ্যা প্রদান করতে ব্যবহৃত হয়।

২. প্যারাগ্রাফ এবং টেক্সট স্টাইলিং

Bulma এর content ক্লাস ব্যবহার করে প্যারাগ্রাফ এবং অন্যান্য টেক্সট উপাদান স্টাইল করা যায়। এটি সাদামাটা টেক্সট উপাদান তৈরি করার জন্য ব্যবহার করা হয়।

প্যারাগ্রাফ (Paragraph)

<p class="content">This is a simple paragraph in Bulma. It is styled using the content class.</p>

এই ক্লাসটি সাধারণ টেক্সটের জন্য ব্যবহৃত হয়, যা HTML পেজে প্যারাগ্রাফ আকারে প্রদর্শিত হয়।

ব্লককোট (Blockquote)

Blquote ক্লাসটি উদ্ধৃতি বা কোটের জন্য ব্যবহৃত হয়।

<blockquote class="blockquote">
  "This is a blockquote. It can be used to highlight text that is quoted from another source."
</blockquote>

এটি সাধারণত বক্সের মধ্যে সেন্ট্রালাইজড এবং আলাদা রঙে প্রদর্শিত হয়।

৩. টেক্সট সাইজ এবং ফন্ট

Bulma এর টাইপোগ্রাফি স্টাইলিংয়ের মধ্যে টেক্সট সাইজ এবং ফন্ট স্টাইল পরিবর্তন করার জন্য কিছু বিশেষ ক্লাস রয়েছে।

টেক্সট সাইজ (Text Size)

is-size-1 থেকে is-size-7 পর্যন্ত ক্লাস ব্যবহার করে টেক্সটের আকার পরিবর্তন করা যায়। এখানে is-size-1 সবচেয়ে বড় এবং is-size-7 সবচেয়ে ছোট।

<p class="is-size-1">This is size 1 text</p>
<p class="is-size-3">This is size 3 text</p>
<p class="is-size-6">This is size 6 text</p>

এটি টেক্সটের আকার নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়।

ফন্ট ওজন (Font Weight)

Bulma has-text-weight-bold, has-text-weight-normal, এবং has-text-weight-light ক্লাস ব্যবহার করে টেক্সটের ফন্ট ওজন (weight) পরিবর্তন করতে সহায়তা করে।

<p class="has-text-weight-bold">This is bold text</p>
<p class="has-text-weight-normal">This is normal text</p>
<p class="has-text-weight-light">This is light text</p>

৪. টেক্সট অ্যালাইনমেন্ট (Text Alignment)

Bulma এ টেক্সট সেন্টার, ডান এবং বাম দিকে সঠিকভাবে অবস্থান করতে সহায়তা করে। এটি has-text-centered, has-text-right, has-text-left ক্লাস দিয়ে করা যায়।

<p class="has-text-centered">This text is centered.</p>
<p class="has-text-right">This text is right aligned.</p>
<p class="has-text-left">This text is left aligned.</p>

এই ক্লাসগুলোর মাধ্যমে আপনি সহজেই টেক্সটের অ্যালাইনমেন্ট নিয়ন্ত্রণ করতে পারবেন।

৫. টেক্সট কালার

Bulma আপনাকে বিভিন্ন প্রি-ডিফাইন্ড টেক্সট কালার ক্লাস দেয়, যেমন has-text-primary, has-text-link, has-text-info, has-text-success, has-text-danger, ইত্যাদি। আপনি এই ক্লাসগুলো ব্যবহার করে টেক্সটের রঙ পরিবর্তন করতে পারেন।

<p class="has-text-primary">This is primary colored text.</p>
<p class="has-text-success">This is success colored text.</p>
<p class="has-text-danger">This is danger colored text.</p>

এটি আপনাকে বিভিন্ন ধরনের টেক্সট রঙ অ্যাপ্লাই করার সুযোগ দেয়।

৬. লিস্ট এবং আইটেম

Bulma প্রাথমিকভাবে unordered list এবং ordered list সাপোর্ট করে। এগুলির জন্য কিছু নির্দিষ্ট ক্লাস রয়েছে।

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

<ol class="has-text-centered">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

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

<ul class="has-text-left">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

এগুলো পেইজে লিস্ট আইটেম সঠিকভাবে সাজিয়ে দেখাতে সহায়তা করে।

সারাংশ

Bulma এর টাইপোগ্রাফি স্টাইলিং ব্যবহার করে আপনি সহজেই বিভিন্ন ধরনের টেক্সট এবং টেক্সট উপাদান সাজাতে পারেন। Bulma এর title, subtitle, content, text alignment, font weight, text size, এবং text color ক্লাসগুলো আপনাকে দ্রুত সুন্দর, পরিষ্কার, এবং রেসপনসিভ টাইপোগ্রাফি তৈরি করতে সাহায্য করে। এই সব স্টাইলিং ক্লাসগুলির সাহায্যে আপনি আপনার ওয়েবসাইটে পঠিত এবং সহজবোধ্য কন্টেন্ট ডিজাইন করতে পারবেন।

Bulma CSS ফ্রেমওয়ার্কে টেক্সট স্টাইলিংয়ের জন্য বিভিন্ন ক্লাস রয়েছে, যা সহজে টেক্সট এলাইনমেন্ট, ফন্ট ওয়েট এবং ট্রান্সফর্ম প্রপার্টি কাস্টমাইজ করতে সহায়তা করে। এই টপিকটিতে আমরা Text Alignment, Font Weight, এবং Text Transform এর সাথে সম্পর্কিত Bulma ক্লাসগুলো দেখবো।

১. টেক্সট এলাইনমেন্ট (Text Alignment)

Bulma ফ্রেমওয়ার্কে টেক্সটের alignment কাস্টমাইজ করতে text-align প্রপার্টির জন্য কয়েকটি ক্লাস রয়েছে। আপনি সহজেই টেক্সটকে left, center, বা right অ্যালাইন করতে পারবেন।

টেক্সট এলাইনমেন্ট ক্লাস:

• has-text-left: টেক্সটকে বামদিকে অ্যালাইন করে।
• has-text-centered: টেক্সটকে কেন্দ্রস্থলে অ্যালাইন করে।
• has-text-right: টেক্সটকে ডানদিকে অ্যালাইন করে।

উদাহরণ:

<div class="container">
  <h1 class="title has-text-left">Left Aligned Text</h1>
  <h1 class="title has-text-centered">Centered Text</h1>
  <h1 class="title has-text-right">Right Aligned Text</h1>
</div>

এখানে has-text-left, has-text-centered, এবং has-text-right ক্লাসগুলো ব্যবহার করা হয়েছে টেক্সটের এলাইনমেন্ট পরিবর্তন করতে।

২. ফন্ট ওয়েট (Font Weight)

Bulma ফ্রেমওয়ার্কে টেক্সটের ফন্ট ওয়েট (যেমন বোল্ড, লাইট, বা নরমাল) কাস্টমাইজ করার জন্য has-text-weight- প্রিফিক্স ব্যবহার করা হয়। আপনি বিভিন্ন ফন্ট ওয়েট কাস্টমাইজ করতে পারেন।

ফন্ট ওয়েট ক্লাস:

• has-text-weight-light: লাইট ওয়েট ফন্ট।
• has-text-weight-normal: সাধারণ ওয়েট ফন্ট (ডিফল্ট ফন্ট ওয়েট)।
• has-text-weight-semibold: সেমি-বোল্ড ফন্ট।
• has-text-weight-bold: বোল্ড ফন্ট।

উদাহরণ:

<div class="container">
  <h1 class="title has-text-weight-light">Light Weight Text</h1>
  <h1 class="title has-text-weight-normal">Normal Weight Text</h1>
  <h1 class="title has-text-weight-semibold">Semi-Bold Text</h1>
  <h1 class="title has-text-weight-bold">Bold Text</h1>
</div>

এখানে বিভিন্ন ফন্ট ওয়েট ক্লাস যেমন has-text-weight-light, has-text-weight-normal, has-text-weight-semibold, এবং has-text-weight-bold ব্যবহার করা হয়েছে।

৩. টেক্সট ট্রান্সফর্ম (Text Transform)

Bulma ফ্রেমওয়ার্কে টেক্সটের কেস পরিবর্তন করতে text-transform প্রপার্টির জন্য কিছু ক্লাস রয়েছে। এর মাধ্যমে আপনি টেক্সটের কেস uppercase, lowercase, বা capitalize করতে পারেন।

টেক্সট ট্রান্সফর্ম ক্লাস:

• has-text-transform-uppercase: টেক্সটের সকল অক্ষরকে বড় হরফে রূপান্তর করে।
• has-text-transform-lowercase: টেক্সটের সকল অক্ষরকে ছোট হরফে রূপান্তর করে।
• has-text-transform-capitalized: প্রথম অক্ষর বড় হরফে এবং বাকি অক্ষর ছোট হরফে রূপান্তর করে।

উদাহরণ:

<div class="container">
  <h1 class="title has-text-transform-uppercase">Uppercase Text</h1>
  <h1 class="title has-text-transform-lowercase">Lowercase Text</h1>
  <h1 class="title has-text-transform-capitalized">Capitalized Text</h1>
</div>

এখানে has-text-transform-uppercase, has-text-transform-lowercase, এবং has-text-transform-capitalized ক্লাসগুলো ব্যবহার করা হয়েছে টেক্সটের কেস পরিবর্তন করতে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Text Alignment, Font Weight, এবং Text Transform ক্লাসগুলো ব্যবহার করে টেক্সট স্টাইলিং করা খুবই সহজ। আপনি টেক্সটকে সহজেই এলাইন করতে পারেন, ফন্ট ওয়েট কাস্টমাইজ করতে পারেন এবং টেক্সটের কেস পরিবর্তন করতে পারেন। এগুলো সবই Bulma এর প্রস্তুতকৃত ক্লাসের মাধ্যমে দ্রুত এবং কার্যকরভাবে করা সম্ভব।

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

১. টেক্সট সাইজ কন্ট্রোল

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

• is-size-1 থেকে is-size-6: এই ক্লাসগুলো টেক্সট সাইজ নির্ধারণ করে। সাধারণত, is-size-1 সবচেয়ে বড় সাইজ, এবং is-size-6 সবচেয়ে ছোট সাইজ।

উদাহরণ:

<h1 class="title is-size-1">This is a large heading (is-size-1)</h1>
<h2 class="title is-size-3">This is a medium heading (is-size-3)</h2>
<h3 class="title is-size-5">This is a small heading (is-size-5)</h3>

২. রেসপনসিভ টেক্সট সাইজ

Bulma এ responsive typography সিস্টেম রয়েছে, যেখানে আপনি বিভিন্ন স্ক্রিন সাইজের জন্য আলাদা টেক্সট সাইজ নির্ধারণ করতে পারেন। এই কাজটি করা হয় is-size-{breakpoint}-{size} ক্লাস ব্যবহার করে। যেখানে {breakpoint} হচ্ছে স্ক্রিন সাইজ এবং {size} হচ্ছে টেক্সট সাইজ।

Bulma এ নিচের ব্রেকপয়েন্টগুলোর জন্য রেসপনসিভ টেক্সট সাইজ নির্ধারণ করা যায়:

• mobile: মোবাইল ডিভাইস
• tablet: ট্যাবলেট ডিভাইস
• desktop: ডেস্কটপ ডিভাইস
• widescreen: বড় স্ক্রীন
• fullhd: ফুল HD স্ক্রীন

উদাহরণ:

<h1 class="title is-size-4-mobile is-size-2-tablet is-size-1-desktop">Responsive Heading</h1>

এখানে:

• is-size-4-mobile: মোবাইল স্ক্রীনে সাইজ ৪ হবে।
• is-size-2-tablet: ট্যাবলেট স্ক্রীনে সাইজ ২ হবে।
• is-size-1-desktop: ডেস্কটপ স্ক্রীনে সাইজ ১ হবে।

৩. টেক্সট স্টাইল কন্ট্রোল

Bulma টেক্সটের স্টাইল নিয়ন্ত্রণের জন্য আরও অনেক ক্লাস প্রদান করে, যা রেসপনসিভ টেক্সটের পাশাপাশি টেক্সটের আকৃতি, বোল্ডনেস, এবং রঙ নিয়ন্ত্রণ করতে সহায়তা করে।

• has-text-centered: টেক্সট কেন্দ্রিকভাবে সাজাতে
• has-text-left: টেক্সট বাম দিকে সজ্জিত করতে
• has-text-right: টেক্সট ডান দিকে সজ্জিত করতে
• has-text-weight-bold: টেক্সট বোল্ড করতে
• has-text-weight-light: টেক্সট লাইট করতে
• has-text-primary: টেক্সট প্রাইমারি রঙে পরিণত করতে
• has-text-link: টেক্সট লিংক রঙে পরিণত করতে

উদাহরণ:

<h1 class="title has-text-centered has-text-weight-bold">Centered and Bold Text</h1>
<p class="has-text-primary">This is a paragraph with primary color text.</p>

৪. টেক্সট রেসপনসিভ ক্লাস

Bulma রেসপনসিভ টেক্সট ক্লাসের মাধ্যমে বিভিন্ন স্ক্রীনে আরও নিখুঁতভাবে টেক্সট স্টাইল নিয়ন্ত্রণ করা যায়। যেমন:

• is-size-1-mobile থেকে is-size-1-fullhd পর্যন্ত, আপনি নির্ধারণ করতে পারবেন কীভাবে টেক্সট সাইজ প্রতিটি স্ক্রীনে প্রভাব ফেলবে।
• has-text-left, has-text-centered, has-text-right ক্লাসগুলো ব্যবহার করে বিভিন্ন স্ক্রীনে টেক্সটের alignment পরিবর্তন করা যায়।

সারাংশ

Bulma ফ্রেমওয়ার্কে রেসপনসিভ টেক্সট তৈরি করা খুবই সহজ। is-size-{breakpoint}-{size} ক্লাস ব্যবহার করে আপনি স্ক্রীনের সাইজ অনুযায়ী টেক্সট সাইজ অ্যাডজাস্ট করতে পারেন। এর পাশাপাশি has-text-* ক্লাস ব্যবহার করে টেক্সটের স্টাইল এবং alignment নিয়ন্ত্রণ করা যায়। Bulma এর রেসপনসিভ টেক্সট সিস্টেম আপনাকে মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসে সুন্দর ও উপযোগী টেক্সট ডিসপ্লে করতে সহায়তা করে।

Bulma ফ্রেমওয়ার্কে Title এবং Subtitle কম্পোনেন্টগুলি সহজেই ব্যবহার করা যায় এবং এগুলি সাধারণত হেডিং বা টেক্সটের আকার ও স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। এই কম্পোনেন্টগুলো একটি ক্লিন এবং সুন্দর লেআউট তৈরি করতে সহায়তা করে। Bulma এর title এবং subtitle ক্লাসগুলো অত্যন্ত উপযোগী, বিশেষত ওয়েব পেজে হেডিং ও টেক্সট প্রদর্শন করার জন্য।

১. Bulma Title Component

Bulma এর title কম্পোনেন্টটি সাধারণত বড় সাইজের হেডিং তৈরি করতে ব্যবহৃত হয়। এটি সাধারণ HTML হেডিং (<h1>, <h2>, ইত্যাদি) এর সাথে তুলনীয়, তবে এটি Bulma এর ডিফল্ট স্টাইলের মাধ্যমে আরও আকর্ষণীয় ও সুন্দর দেখায়। Bulma আপনাকে বিভিন্ন সাইজের টাইটেল দিতে সাহায্য করে, যেমন is-1, is-2, ইত্যাদি।

Title Component উদাহরণ:

<h1 class="title is-1">This is a Large Title</h1>
<h2 class="title is-2">This is a Medium Title</h2>
<h3 class="title is-3">This is a Small Title</h3>

এখানে:

• is-1: সবচেয়ে বড় টাইটেল সাইজ।
• is-2: মাঝারি আকারের টাইটেল সাইজ।
• is-3: ছোট টাইটেল সাইজ।

এই ক্লাসগুলো টাইটেল এর আকার নির্ধারণ করে এবং এগুলি সিএসএস স্টাইল শীটের মাধ্যমে অটো অ্যাপ্লাই হয়।

২. Bulma Subtitle Component

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

Subtitle Component উদাহরণ:

<h1 class="title is-1">Main Title</h1>
<h2 class="subtitle is-4">This is a Subtitle providing more information</h2>

এখানে:

• is-4: ছোট আকারের সাবটাইটেল, যা টাইটেল এর নিচে অবস্থান করে এবং সাধারণত স্নিগ্ধভাবে পাঠকের দৃষ্টি আকর্ষণ করে।

৩. Title এবং Subtitle এর ব্যবহার

title এবং subtitle কম্পোনেন্টগুলি সাধারণত একটি সেকশনের হেডিং এবং উপশিরোনাম হিসেবে ব্যবহার করা হয়। এগুলি একত্রে ব্যবহৃত হলে, ওয়েব পেজে পরিষ্কার এবং শ্রেণিবদ্ধ তথ্য প্রদর্শিত হয়, যা ব্যবহারকারীর জন্য সহজবোধ্য হয়ে ওঠে।

একত্রে Title এবং Subtitle ব্যবহার:

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title is-1">Welcome to Our Website</h1>
      <h2 class="subtitle is-3">A simple and elegant solution for your needs</h2>
    </div>
  </div>
</section>

এখানে:

• h1 ট্যাগটি Main Title হিসেবে ব্যবহৃত হয়েছে, যা ওয়েবসাইটের প্রধান বিষয়বস্তু বা বার্তা প্রকাশ করে।
• h2 ট্যাগটি Subtitle হিসেবে ব্যবহৃত হয়েছে, যা অতিরিক্ত তথ্য বা বর্ণনা প্রদান করছে।

৪. Title এবং Subtitle এর কাস্টমাইজেশন

Bulma এর title এবং subtitle ক্লাসগুলোর সাথে আপনি সহজেই কাস্টম স্টাইল যোগ করতে পারেন। আপনি চাইলে ফন্ট সাইজ, রঙ, মার্জিন ইত্যাদি পরিবর্তন করতে পারেন।

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

.custom-title {
  color: #3498db; /* Custom blue color */
  font-family: 'Arial', sans-serif;
}

.custom-subtitle {
  color: #7f8c8d; /* Custom gray color */
  font-size: 1.25rem; /* Slightly larger subtitle */
}

এখন HTML ফাইলে এই কাস্টম ক্লাসগুলো প্রয়োগ করতে হবে:

<h1 class="title custom-title">Custom Styled Title</h1>
<h2 class="subtitle custom-subtitle">Custom Styled Subtitle</h2>

এইভাবে, আপনি Bulma এর ডিফল্ট স্টাইলের বাইরে গিয়ে আপনার পছন্দ অনুযায়ী টাইটেল এবং সাবটাইটেল কাস্টমাইজ করতে পারেন।

সারাংশ

Bulma এর Title এবং Subtitle কম্পোনেন্টগুলি সহজে ব্যবহারযোগ্য এবং ওয়েব পেজে পরিচ্ছন্নভাবে টেক্সট প্রদর্শন করার জন্য খুবই উপযোগী। title কম্পোনেন্টটি বিভিন্ন সাইজের টাইটেল প্রদান করে, যা is-1, is-2, is-3 ইত্যাদি ক্লাসের মাধ্যমে নিয়ন্ত্রণ করা যায়। subtitle কম্পোনেন্টটি ছোট আকারের সাপোর্টিং টেক্সট প্রদর্শন করতে ব্যবহৃত হয়। আপনি চাইলে এগুলোর সাথে কাস্টম CSS যোগ করে আরো নির্দিষ্ট ডিজাইন তৈরি করতে পারেন।