বুটস্ট্রাপ ৫ এ বাটন সাইজ এবং ডিজেবল বাটন কাস্টমাইজ করা খুবই সহজ। বুটস্ট্রাপের Button Size এবং Disabled Buttons ব্যবহার করে আপনি আপনার ওয়েবসাইটের বাটনগুলোর আকার এবং কার্যক্ষমতা নিয়ন্ত্রণ করতে পারবেন। এগুলো ডিজাইন কাস্টমাইজেশনের জন্য খুবই গুরুত্বপূর্ণ।
বুটস্ট্রাপ ৫ বিভিন্ন আকারের বাটন প্রোভাইড করে যা আপনি আপনার প্রোজেক্টে ব্যবহার করতে পারেন। বাটন সাইজ কাস্টমাইজ করতে মূলত 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 (নিষ্ক্রিয়) বাটন তৈরি করতে পারেন, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে প্রতিরোধ করে। বাটনটিকে ডিজেবল করতে disabled
অ্যাট্রিবিউট বা btn-disabled
ক্লাস ব্যবহার করা হয়। ডিজেবল বাটন টিপলে কোনো অ্যাকশন হবে না এবং বাটনের স্টাইলও পরিবর্তিত হবে।
<button class="btn btn-primary" disabled>নিষ্ক্রিয় বাটন</button>
<button class="btn btn-secondary" disabled>আরেকটি নিষ্ক্রিয় বাটন</button>
এখানে:
disabled
অ্যাট্রিবিউট ব্যবহার করে বাটনটিকে নিষ্ক্রিয় করা হয়েছে।যদি আপনি ডিজেবল বাটনের স্টাইল কাস্টমাইজ করতে চান, তাহলে CSS ব্যবহার করে আপনি বাটনের রঙ এবং স্টাইল পরিবর্তন করতে পারেন। যেমন:
<style>
.btn-disabled {
background-color: #d6d6d6;
border-color: #d6d6d6;
color: #a0a0a0;
}
</style>
<button class="btn btn-primary btn-disabled" disabled>কাস্টম ডিজেবল বাটন</button>
এখানে:
btn-disabled
ক্লাস ব্যবহার করে ডিজেবল বাটনের জন্য কাস্টম রঙ এবং স্টাইল সেট করা হয়েছে।btn-lg
, btn-sm
, এবং btn
ক্লাস ব্যবহার করা হয়। এতে আপনি সহজেই বাটনের আকার কাস্টমাইজ করতে পারেন।disabled
অ্যাট্রিবিউট বা btn-disabled
ক্লাস ব্যবহার করা হয়। ডিজেবল বাটন ব্যবহারকারীকে কোনো ইনপুট বা অ্যাকশন নেয়ার অনুমতি দেয় না।Read more