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 ক্লাসগুলো আপনাকে দ্রুত সুন্দর, পরিষ্কার, এবং রেসপনসিভ টাইপোগ্রাফি তৈরি করতে সাহায্য করে। এই সব স্টাইলিং ক্লাসগুলির সাহায্যে আপনি আপনার ওয়েবসাইটে পঠিত এবং সহজবোধ্য কন্টেন্ট ডিজাইন করতে পারবেন।
Read more
