TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

বুটস্ট্র্যাপ 5 এ কীভাবে বোতাম তৈরি করবেন?

2

বোতামগুলি যে কোনও UI কাঠামোর মৌলিক উপাদানগুলির মধ্যে একটি। আমাদের অন্যান্য নিবন্ধে আমরা বুটস্ট্র্যাপ 3 বোতামের অনেক উদাহরণ দেখেছি । বুটস্ট্র্যাপ 4 এ, ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য বোতাম ক্লাসগুলিতে ছোটখাটো পরিবর্তন রয়েছে। উদাহরণস্বরূপ, ডিফল্ট বোতাম ক্লাস ".btn-dafault" কে ".btn-Secondary" ক্লাসের সাথে একটি সেকেন্ডারি বাটনে পরিবর্তন করা হচ্ছে এবং অতিরিক্ত ছোট বোতাম ক্লাস ".btn-xs" বাদ দেওয়া হচ্ছে। খুব বেশি পরিবর্তন নেই। বুটস্ট্র্যাপ 5 -এ বোতামগুলি ।

বুটস্ট্র্যাপ বোতামের মূল বিষয়গুলি

বোতাম তৈরির আগে নিম্নলিখিত বিষয়গুলি মনে রাখবেন:

  • কোন উপাদানকে বোতাম হিসাবে চিহ্নিত করার জন্য, আপনাকে সর্বনিম্ন ".btn" শ্রেণী অন্তর্ভুক্ত করতে হবে।
  • অতিরিক্ত ক্লাসগুলি ".btn" ক্লাস ছাড়াও বোতামের আরও স্টাইলিং নির্ধারণ করবে।
  • ".Btn" ক্লাস HTML উপাদানের মত যোগ করা যেতে পারে
  • টগল ইফেক্ট তৈরির জন্য আপনার কেবল "বুটস্ট্র্যাপ প্লাগইন" বিভাগের জন্য বুটস্ট্র্যাপ স্ক্রিপ্ট ফাইলগুলির প্রয়োজন, অন্যান্য বোতামগুলি কেবল সিএসএসের সাথে কাজ করবে। আরো বিস্তারিত জানার জন্য বুটস্ট্র্যাপ 5 স্টার্টার টেমপ্লেট দেখুন।

বেসিক ডিফল্ট বাটন

আপনি ".btn" ক্লাসে ব্যাকগ্রাউন্ড ইউটিলিটি ক্লাস ব্যবহার করে বিভিন্ন রঙের বোতাম তৈরি করতে পারেন।

  • প্রাথমিক – এটি প্রাথমিক বা প্রধান বোতাম যা নীল রঙের সাথে ব্যবহৃত হয়।
  • মাধ্যমিক – সাদা রঙের বোতাম একটি গৌণ বা বিকল্প বোতাম।
  • সাফল্য – ইতিবাচক কর্মের জন্য ব্যবহৃত সবুজ বোতাম।
  • তথ্য – হালকা নীল বোতাম তথ্য দেখানোর জন্য ব্যবহৃত।
  • সতর্কীকরণ – সতর্কীকরণ কর্মের জন্য ব্যবহৃত হলুদ বোতাম।
  • বিপদ – ত্রুটি কর্মের জন্য ব্যবহৃত লাল বোতাম।
  • হালকাহালকা রঙের বোতাম।
  • গা ark – গা dark় পটভূমি সহ বোতাম।
  • লিঙ্ক – পটভূমির রং ছাড়াও, আপনি পটভূমি ছাড়া একটি লিঙ্ক বোতামও তৈরি করতে পারেন।

প্রাথমিক বোতাম কোডটি দেখতে হবে

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button --> <button type="button" class="btn btn-primary">Primary</button> <!-- End of Button --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

যেমন ব্যাখ্যা করা হয়েছে, ".btn" শ্রেণী উপাদানটিকে একটি বোতাম হিসাবে চিহ্নিত করে এবং ".btn-primary" বর্গটি প্রাথমিক (নীল) রঙের বোতাম তৈরি করতে ব্যবহৃত হয়। একইভাবে অন্যান্য বোতাম কোড নিচে দেওয়া হল:

<button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-light">Light Button</button> <button type="button" class="btn btn-dark">Dark Button</button> <button type="button" class="btn btn-link">Link</button>

শেষ আইটেমটি একটি লিঙ্ক বাটন যা প্রদর্শনে একটি টেক্সট লিংকের মত দেখাবে কিন্তু ক্লিক করলে বা ওপরে ঘুরলে বাটনের মতো কাজ করবে। ডিফল্ট বোতামগুলি ব্রাউজারে নীচের মত দেখাবে:

বুটস্ট্র্যাপ 5 এ কীভাবে বোতাম তৈরি করবেন?

বাটন ট্যাগ – বিভিন্ন ট্যাগ সহ বাটন ক্লাস ব্যবহার করা

বোতাম ক্লাসগুলি সমর্থিত

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত