বুটস্ট্রাপ ৫ এর টাইপোগ্রাফি এবং ফন্ট স্টাইলিং ওয়েবসাইটের পাঠযোগ্যতা এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে সাহায্য করে। সঠিক টাইপোগ্রাফি ব্যবহার করলে আপনার কন্টেন্ট আরও প্রফেশনাল এবং আকর্ষণীয় দেখাবে। বুটস্ট্রাপ ৫ বিভিন্ন প্রি-ডিফাইন্ড ক্লাস সরবরাহ করে, যার মাধ্যমে আপনি সহজে ফন্ট, আকার, ইন্টারলাইনে (line height), লেটারস্পেসিং (letter spacing) এবং অন্যান্য টাইপোগ্রাফিক্যাল স্টাইল অ্যাপ্লাই করতে পারেন।
বুটস্ট্রাপ ৫ এ টাইপোগ্রাফি
বুটস্ট্রাপ ৫ এ টাইপোগ্রাফি সংশ্লিষ্ট কিছু সাধারণ ক্লাস এবং প্রপার্টি সরবরাহ করা হয়েছে, যার মাধ্যমে আপনি আপনার ওয়েবসাইটের ফন্ট এবং লেখার স্টাইল সহজে কাস্টমাইজ করতে পারেন।
ফন্ট সাইজ (Font Size)
বুটস্ট্রাপ ৫ এ কয়েকটি প্রি-ডিফাইন্ড ক্লাস রয়েছে যা দিয়ে আপনি সহজে ফন্ট সাইজ নিয়ন্ত্রণ করতে পারেন।
fs-1থেকেfs-6: এই ক্লাসগুলো দিয়ে আপনি সহজেই ফন্ট সাইজ নিয়ন্ত্রণ করতে পারবেন।fs-1সবচেয়ে বড় ফন্ট সাইজ এবংfs-6সবচেয়ে ছোট।
<p class="fs-1">এটি বড় ফন্ট সাইজ</p>
<p class="fs-5">এটি মাঝারি ফন্ট সাইজ</p>
<p class="fs-6">এটি ছোট ফন্ট সাইজ</p>
ফন্ট ওয়েট (Font Weight)
ফন্টের ভারীতা বা ফন্ট ওয়েট পরিবর্তন করতে বুটস্ট্রাপ ৫ এর বিভিন্ন ক্লাস ব্যবহার করা যেতে পারে।
fw-bold: বোল্ড ফন্টfw-light: লাইট ফন্টfw-normal: স্বাভাবিক ফন্ট
<p class="fw-bold">এটি বোল্ড ফন্ট</p>
<p class="fw-light">এটি লাইট ফন্ট</p>
<p class="fw-normal">এটি স্বাভাবিক ফন্ট</p>
ফন্ট ফ্যামিলি (Font Family)
বুটস্ট্রাপ ৫ এর টাইপোগ্রাফি ক্লাসের মাধ্যমে আপনি ফন্ট ফ্যামিলি সেট করতে পারেন। বুটস্ট্রাপের ডিফল্ট ফন্ট ফ্যামিলি হলো Helvetica Neue।
<p class="font-monospace">এটি মনোস্পেস ফন্ট</p>
<p class="font-italic">এটি ইটালিক ফন্ট</p>
এছাড়াও, আপনি কাস্টম ফন্ট ফ্যামিলি ব্যবহার করতে পারেন।
লাইন হাইট (Line Height)
লাইন হাইট এর মাধ্যমে আপনি টেক্সটের মধ্যে যথাযথ স্থান তৈরি করতে পারেন, যা পড়ার অভিজ্ঞতা উন্নত করে। বুটস্ট্রাপ ৫ এ lh-1 থেকে lh-lg পর্যন্ত বিভিন্ন ক্লাস রয়েছে।
lh-1: কম লাইন হাইটlh-sm: ছোট লাইন হাইটlh-base: স্বাভাবিক লাইন হাইটlh-lg: বড় লাইন হাইট
<p class="lh-sm">এটি ছোট লাইন হাইট</p>
<p class="lh-base">এটি স্বাভাবিক লাইন হাইট</p>
<p class="lh-lg">এটি বড় লাইন হাইট</p>
টেক্সট অ্যালাইনমেন্ট (Text Alignment)
বুটস্ট্রাপ ৫ এ টেক্সটের অ্যালাইনমেন্ট পরিবর্তন করতে বিভিন্ন ক্লাস রয়েছে, যেমন:
text-start: বামদিকে টেক্সট অ্যালাইন করুনtext-center: কেন্দ্রে টেক্সট অ্যালাইন করুনtext-end: ডানদিকে টেক্সট অ্যালাইন করুন
<p class="text-start">এটি বাম দিকে অ্যালাইনড টেক্সট</p>
<p class="text-center">এটি কেন্দ্রে অ্যালাইনড টেক্সট</p>
<p class="text-end">এটি ডান দিকে অ্যালাইনড টেক্সট</p>
টেক্সট কালার (Text Color)
বুটস্ট্রাপ ৫ টেক্সটের রঙ পরিবর্তন করতে text-* ক্লাস প্রদান করেছে, যেমন:
text-primary: প্রাইমারি রঙ (যেমন নীল)text-secondary: সেকেন্ডারি রঙtext-success: সফলতার রঙ (সবুজ)text-danger: বিপদ সংকেত (লাল)text-warning: সতর্কতা সংকেত (হলুদ)text-info: তথ্য রঙ (হালকা নীল)text-light: হালকা রঙtext-dark: গা dark ় রঙtext-muted: উজ্জ্বল কম রঙ
<p class="text-primary">এটি প্রাইমারি রঙের টেক্সট</p>
<p class="text-danger">এটি বিপদের রঙের টেক্সট</p>
<p class="text-muted">এটি ফিকে রঙের টেক্সট</p>
সারাংশ
বুটস্ট্রাপ ৫ এর টাইপোগ্রাফি এবং ফন্ট স্টাইলিং ক্লাসগুলির মাধ্যমে আপনি ওয়েব পেজের ফন্ট এবং টেক্সটের আকার, ওজন, রঙ, অবস্থান এবং লাইনে উচ্চতা সহজেই কাস্টমাইজ করতে পারবেন। এর ফলে, আপনার ওয়েবসাইটের পাঠযোগ্যতা এবং ডিজাইন আরও আকর্ষণীয় এবং পেশাদারী হয়ে উঠবে, যা বিভিন্ন স্ক্রীনে (মোবাইল, ট্যাবলেট, ডেস্কটপ) ভালভাবে প্রদর্শিত হবে।
Read more
