Button Size এবং Disabled Buttons

Web Development - বুটস্ট্রাপ (Bootstrap 5) - Bootstrap 5 এর Buttons এবং Button Groups |

বুটস্ট্রাপ ৫ এ বাটন সাইজ এবং ডিজেবল বাটন কাস্টমাইজ করা খুবই সহজ। বুটস্ট্রাপের Button Size এবং Disabled Buttons ব্যবহার করে আপনি আপনার ওয়েবসাইটের বাটনগুলোর আকার এবং কার্যক্ষমতা নিয়ন্ত্রণ করতে পারবেন। এগুলো ডিজাইন কাস্টমাইজেশনের জন্য খুবই গুরুত্বপূর্ণ।


Button Size (বাটন সাইজ)

বুটস্ট্রাপ ৫ বিভিন্ন আকারের বাটন প্রোভাইড করে যা আপনি আপনার প্রোজেক্টে ব্যবহার করতে পারেন। বাটন সাইজ কাস্টমাইজ করতে মূলত btn-lg, btn-sm, এবং btn (ডিফল্ট আকার) ক্লাস ব্যবহার করা হয়।

বাটন সাইজের ক্লাস:

  • btn: ডিফল্ট সাইজের বাটন।
  • btn-lg: বড় আকারের বাটন।
  • btn-sm: ছোট আকারের বাটন।

উদাহরণ: বাটন সাইজ

<button class="btn btn-primary">ডিফল্ট সাইজ বাটন</button>
<button class="btn btn-primary btn-lg">বড় আকারের বাটন</button>
<button class="btn btn-primary btn-sm">ছোট আকারের বাটন</button>

এখানে:

  • btn-primary: প্রাইমারি রঙের বাটন।
  • btn-lg: বড় আকারের বাটন।
  • btn-sm: ছোট আকারের বাটন।

Disabled Buttons (ডিজেবল বাটন)

বুটস্ট্রাপ ৫ এ আপনি সহজেই disabled (নিষ্ক্রিয়) বাটন তৈরি করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে প্রতিরোধ করে। বাটনটিকে ডিজেবল করতে disabled অ্যাট্রিবিউট বা btn-disabled ক্লাস ব্যবহার করা হয়। ডিজেবল বাটন টিপলে কোনো অ্যাকশন হবে না এবং বাটনের স্টাইলও পরিবর্তিত হবে।

উদাহরণ: ডিজেবল বাটন

<button class="btn btn-primary" disabled>নিষ্ক্রিয় বাটন</button>
<button class="btn btn-secondary" disabled>আরেকটি নিষ্ক্রিয় বাটন</button>

এখানে:

  • disabled অ্যাট্রিবিউট ব্যবহার করে বাটনটিকে নিষ্ক্রিয় করা হয়েছে।

Custom Disabled Button Styling (কাস্টম ডিজেবল বাটন স্টাইল)

যদি আপনি ডিজেবল বাটনের স্টাইল কাস্টমাইজ করতে চান, তাহলে CSS ব্যবহার করে আপনি বাটনের রঙ এবং স্টাইল পরিবর্তন করতে পারেন। যেমন:

<style>
    .btn-disabled {
        background-color: #d6d6d6;
        border-color: #d6d6d6;
        color: #a0a0a0;
    }
</style>

<button class="btn btn-primary btn-disabled" disabled>কাস্টম ডিজেবল বাটন</button>

এখানে:

  • btn-disabled ক্লাস ব্যবহার করে ডিজেবল বাটনের জন্য কাস্টম রঙ এবং স্টাইল সেট করা হয়েছে।

Summary

  • Button Size: বুটস্ট্রাপ ৫ এ বাটনের আকারের জন্য btn-lg, btn-sm, এবং btn ক্লাস ব্যবহার করা হয়। এতে আপনি সহজেই বাটনের আকার কাস্টমাইজ করতে পারেন।
  • Disabled Buttons: বাটনকে ডিজেবল করতে disabled অ্যাট্রিবিউট বা btn-disabled ক্লাস ব্যবহার করা হয়। ডিজেবল বাটন ব্যবহারকারীকে কোনো ইনপুট বা অ্যাকশন নেয়ার অনুমতি দেয় না।
Content added By
Promotion