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 যোগ করে আরো নির্দিষ্ট ডিজাইন তৈরি করতে পারেন।
Read more
