বুটস্ট্রাপ বেসিক ড্রপডাউন
বুটস্ট্রাপ ড্রপডাউন মেনু হলো একটি টোগল মেনু যেটি পূর্বনির্ধারিত লিষ্ট থেকে একটি ভ্যালু পছন্দ/সিলেক্ট করতে সাহায্য করে।
নিচের উদাহরণে একটি বেসিক ড্রপডাউন তৈরি করে দেখানো হলোঃ
kt_satt_skill_example_id=1100
উদাহরণের ব্যাখ্যা
.dropdown ক্লাসের মাধ্যমে ড্রপডাউন মেনুকে বুঝায়।
ড্রপডাউন মেনুকে অপেন করতে বাটন অথবা লিংক এর সাথে .dropdown-toggle ক্লাস এবং data-toggle="dropdown" এট্রিবিউট ব্যবহার করুন।
.caret ক্লাসের দ্বারা একটি ক্যারেট চিহ্ন তৈরি হয় (), যেটি দ্বারা বুঝা যায় যে এটি একটি ড্রপডাউন বাটন।
প্রকৃত ড্রপডাউন মেনু তৈরি করতে <ul> এলিমেন্টে .dropdown-menu ক্লাস যুক্ত করুন।
বুটস্ট্রাপ ড্রপডাউন ডিভাইডার
ড্রপডাউন মেনুর মধ্যে লিংকগুলোকে আলাদা করার জন্য .divider ক্লাস ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1101
বুটস্ট্রাপ ড্রপডাউন হেডার
ড্রপডাউন মেনুর মধ্যে হেডার যুক্ত করার জন্য .dropdown-header ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1102
বুটস্ট্রাপ ডিসেবল আইটেম
ড্রপডাউন মেনুর কোনো একটি আইটেমকে ডিসেবল করার জন্য .disabled ক্লাস ব্যবহার করুন।
বুটস্ট্রাপ ড্রপডাউনের অবস্থান নির্ধারণ
ড্রপডাউন মেনুকে ডান পাশে নেওয়ার জন্য .dropdown-menu ক্লাসের সাথে .dropdown-menu-right ক্লাস ব্যবহার করুন।
যদি আপনি ড্রপডাউন মেনুকে নিচের দিকে প্রদর্শনের পরিবর্তে উপরের দিকে প্রদর্শন করতে চান, তাহলে <div> এলিমেন্টের মধ্যে "dropdown" ক্লাসের পরিবর্তে "dropup" ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1103
বুটস্ট্রাপ ড্রপডাউন এক্সেসিবিলিটি
যখন ড্রপডাউন মেনু তৈরি করবেন তখন role এবং aria-* এট্রিবিউট ব্যবহার করবেন, এতে স্ক্রিন রিডারদের ব্যবহারে সুবিধা হবেঃ
kt_satt_skill_example_id=1104
একনজরে ড্রপডাউন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
| ক্লাস | বর্ণনা |
|---|---|
.dropdown | একটি ড্রপডাউন মেনুকে নির্দেশ করে। |
.dropdown-menu | একটি ড্রপডাউন মেনু তৈরী করে। |
.dropdown-menu-right | ড্রপডাউন মেনুকে ডানে এ্যালাইন করে। |
.dropdown-header | ড্রপডাউন মেনুর মধ্যে একটি হেডার যুক্ত করে। |
.dropup | একটি ড্রপআপ মেনুকে নির্দেশ করে। |
.disabled | ড্রপডাউন মেনুর একটি আইটেমকে ডিজেবল করে রাখার জন্য ব্যবহার করা হয়। |
.divider | ড্রপডাউন মেনুর আইটেমগুলোকে হরিজন্টাল লাইনের মাধ্যমে আলাদা করার জন্য ব্যবহার করা হয়। |
Read more
