বুটস্ট্রাপ বাটন স্টাইল
বুটস্ট্রাপে সাত ধরনের বাটন স্টাইল রয়েছে।
বুটস্ট্রাপ বাটন স্টাইল করার জন্য নিচের বুটস্ট্রাপ ক্লাসগুলো ব্যবহার করা হয়ঃ
.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
নিচের উদাহরনে বিভিন্ন বাটন স্টাইলের কোড দেখানো হয়েছেঃ
kt_satt_skill_example_id=914
< a >, < button >, অথবা <input > এলিমেন্টে বাটন ক্লাসগুলো ব্যবহার করা যায়ঃ
kt_satt_skill_example_id=915
বাটনের আকার
বুটস্ট্রাপে চার আকারের বাটন রয়েছে। নিচের উদাহরণে বিভিন্ন আকারের বাটন দেখানো হলোঃ
নিচের ক্লাসগুলো দ্বারা ভিন্ন ভিন্ন আকারের বাটন বুঝায়ঃ
.btn-lg.btn-md.btn-sm.btn-xs
নিচের উদাহরনে বিভিন্ন আকারের বাটনের কোড দেখানো হয়েছেঃ
kt_satt_skill_example_id=917
ব্লক লেভেল বাটন
ব্লক লেভেল বাটন প্যারেন্ট এলিমেন্টের সমগ্র অংশ জুড়ে থাকে।
ব্লক লেভেল বাটন তৈরি করার জন্য .btn ক্লাসের সাথে .btn-block ক্লাস ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=919
সক্রিয়/নিষ্ক্রিয় বাটন
বাটনকে সক্রিয় বা নিষ্ক্রিয় ভাবে সেট করা যায়। এখানে নিষ্ক্রিয় বলতে বুঝানো হয়েছে যেই বাটনে ক্লিক করা যায় না।
.active ক্লাস ব্যবহার করে বাটনকে সক্রিয় ভাবে সেট করা হয় এবং .disabled ক্লাস ব্যবহার করে নিষ্ক্রিয় ভাবে বাটন সেট করা হয়ঃ
kt_satt_skill_example_id=921
একনজরে বাটন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
নিচের ক্লাসগুলো যেকোন <a>, <button>, অথবা <input> এলিমেন্টে ব্যবহার করা যায়ঃ
| ক্লাস | বর্ণনা |
|---|---|
.btn | যেকোন বাটনে বেসিক স্টাইল যুক্ত করে। |
.btn-default | ডিফল্ট/স্ট্যান্ডার্ড বাটন তৈরি করে। |
.btn-primary | প্রাইমারি একশন নির্দেশ করে। |
.btn-success | একটি সফল বা হ্যাঁ-বোধক কাজকে নির্দেশ করে। |
.btn-info | তথ্য সরবরাহকৃত ম্যাসেজ দেখানোর জন্য ব্যবহার করা হয়। |
.btn-warning | বিপদজনক কিছু হতে পারে, এরকম বুঝায়। |
.btn-danger | বিপদজনক অথবা না-বোধক কিছু বুঝায়। |
.btn-link | একটি বাটনকে লিঙ্কের মত দেখাবে (কিন্তু আচরন বাটনের মতই হবে)। |
.btn-lg | বড় আকৃতির বাটন তৈরি করার জন্য ব্যবহার করা হয়। |
.btn-sm | ছোট আকৃতির বাটন তৈরি করার জন্য ব্যবহার করা হয়। |
.btn-xs | অতিরিক্ত ছোট আকারের বাটন তৈরি করার জন্য ব্যবহার করা হয়। |
.btn-block | একটি ব্লক-লেবেল বাটন তৈরি করে (প্যারেন্ট এলিমেন্টের সম্পূর্ন প্রস্থ নিয়ে নেয়)। |
.active | বাটনটি প্রেস করা অবস্থায় রয়েছে দেখাবে। |
.disabled | বাটনকে ডিজেবল করে রাখবে। |
Read more
