বুটস্ট্র্যাপ | ব্যাজ এবং লেবেল

এই নিবন্ধটি বুটস্ট্র্যাপ ব্যাজগুলির ব্যবহার প্রদর্শনের জন্য নিম্নলিখিত দৃষ্টিকোণগুলিকে কভার করবে:

• অতিরিক্ত তথ্যের জন্য বুটস্ট্র্যাপ ব্যাজ কিভাবে ব্যবহার করবেন?
• প্রাসঙ্গিক তথ্যের জন্য বুটস্ট্র্যাপ ব্যাজ কিভাবে ব্যবহার করবেন?
• বুটস্ট্র্যাপ ব্যাজে কাস্টম স্টাইল কিভাবে যোগ করবেন?
• কিভাবে বুটস্ট্র্যাপ ব্যাজে আইকন যোগ করবেন?
• বুটস্ট্র্যাপ ব্যাজকে কীভাবে অন্য উত্সের সাথে লিঙ্ক করবেন?
• কিভাবে ব্যাজ বৃত্তাকার করা?
• একটি কাউন্টার হিসাবে বুটস্ট্র্যাপ ব্যাজ কিভাবে ব্যবহার করবেন?

বুটস্ট্র্যাপ ব্যাজ কি?

ব্যাজ হল মৌলিক উপাদান যা একটি সূচক দেখানোর জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, বিজ্ঞপ্তি বা বার্তার সংখ্যা দেখানোর জন্য তারা একটি সংখ্যাসূচক কাউন্টার হিসাবে ব্যবহার করা যেতে পারে:

এগুলি অতিরিক্ত তথ্য প্রদর্শন করতেও ব্যবহার করা যেতে পারে, যেমন প্রদত্ত ছবিতে দেখানো হয়েছে:

অতিরিক্ত তথ্যের জন্য বুটস্ট্র্যাপ ব্যাজ কিভাবে ব্যবহার করবেন?

বুটস্ট্র্যাপ ব্যাজগুলি অতিরিক্ত তথ্য হিসাবে ব্যবহার করার জন্য HTML উপাদানগুলির মধ্যে যোগ করা যেতে পারে। প্রদর্শনের জন্য নীচে উল্লিখিত উদাহরণটি দেখুন।

উদাহরণ

অতিরিক্ত তথ্যের জন্য বুটস্ট্র্যাপ ব্যাজ ব্যবহার করতে, প্রথমে:

• যোগ করুন '

  ' এবং '

  ' উপাদান।

• স্থানটি ' 'এর সাথে উপাদান' ব্যাজ ' এবং ' ব্যাজ-* ” ক্লাস। 'ব্যাজ-*' শ্রেণীটি নির্দিষ্ট রঙের ব্যাজকে বোঝায়:

এটি লক্ষ্য করা যায় যে দুটি ব্যাজ প্রাসঙ্গিক শিরোনামে যোগ করা হয়েছে:

প্রাসঙ্গিক তথ্যের জন্য বুটস্ট্র্যাপ ব্যাজ কিভাবে ব্যবহার করবেন?

বুটস্ট্র্যাপ ব্যাজগুলি প্রাসঙ্গিক তথ্য প্রদান করতেও ব্যবহার করা যেতে পারে যেমন ' ব্যাজ - বিপদ ” ব্যাজটিকে লাল রঙে প্রদর্শন করে এবং কিছু ব্যর্থ বার্তা যেমন বাতিল, অবৈধ বা আরও কিছু দেখাতে ব্যবহার করা যেতে পারে৷ দ্য ' ব্যাজ-সাফল্য ” ব্যবহার করা হয় যেখানে আমরা কিছু সাফল্যের বার্তা দেখাতে চাই।

উদাহরণ

আলোচিত দৃশ্যকল্প বুঝতে প্রদত্ত কোডটি দেখুন:

আউটপুট

বুটস্ট্র্যাপ ব্যাজে কাস্টম স্টাইল কিভাবে যোগ করবেন?

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

স্টাইল 'কাস্টম' ক্লাস

দ্য ' .কাস্টম 'এ অ্যাক্সেস করতে ব্যবহৃত হয়' কাস্টম 'শ্রেণী। নিম্নলিখিত বৈশিষ্ট্য এটি প্রয়োগ করা হয়:

• ' অক্ষরের আকার ” ফন্টের আকার সামঞ্জস্য করে।
• ' ফন্ট-ওজন ” ফন্টের পুরুত্ব উল্লেখ করে।
• ' অক্ষর-ব্যবধান ” অক্ষরগুলির মধ্যে স্থান যোগ করে।
• ' প্যাডিং ” উপাদানের বিষয়বস্তুর চারপাশে স্থান প্রদান করে।

আউটপুট

কিভাবে বুটস্ট্র্যাপ ব্যাজে আইকন যোগ করবেন?

আমরা ব্যাজে বিভিন্ন আইকন যোগ করতে পারি। এটি করার জন্য, এই কারণের জন্য ব্যবহার করা যেতে পারে যে বিভিন্ন ক্লাস আছে. আরো তথ্যের জন্য, দেখুন অসাধারন ফন্ট ওয়েবসাইট

উদাহরণ

HTML-এ, একটি যোগ করুন ' ' উপাদান। এই উপাদানের মধ্যে, আইকন ক্লাস সন্নিবেশ করতে ইনলাইন উপাদান “ ” বা “” রাখুন: