Bootstrap 5 ড্রপডাউন তালিকা
- পূর্ববর্তী পৃষ্ঠা BS5 কার্ড
- পরবর্তী পৃষ্ঠা BS5 ফোল্ডার
মৌলিক ড্রপডাউন তালিকা
নিচের ড্রপডাউন মেনু একটি সাবসিট মেনু, যা ব্যবহারকারীকে প্রিডিফাইনড তালিকা থেকে বাছাই করতে অনুমতি দেয়:
ইনস্ট্রাকশন
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
ড্রপডাউন বাটন
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">লিঙ্ক 1</a></li>
<li><a class="dropdown-item" href="#">লিঙ্ক 2</a></li>
<li><a class="dropdown-item" href="#">লিঙ্ক 3</a></li>
</ul>
</div>
উদাহরণসূত্র
.dropdown শ্রেণীর পড়ানো করুন
নিচের ড্রপডাউন মেনু খুলতে, আপনাকে সেট করা হওয়া .dropdown-toggle {} শ্রেণী যোগ করুন এবং
এর .dropdown-menu শ্রেণী যোগ করুন <div> উপাদান, যাতে ড্রপডাউন মেনু তৈরি করা যায়। তারপর, .dropdown-item শ্রেণী যোগ করুন ড্রপডাউন মেনুর প্রত্যেক উপাদান (লিঙ্ক বা বটন) যোগ করার জন্য:
ড্রপডাউন মেনুর হরিজন
.dropdown-divider শ্রেণী যোগ করুন ড্রপডাউন মেনুর লিঙ্কগুলিকে হলকা হরিজন্য:
ইনস্ট্রাকশন
<li><hr class="dropdown-divider"></hr></li>
ড্রপডাউন মেনুর শিরোনাম
.dropdown-header শ্রেণী যোগ করুন ড্রপডাউন মেনুতে শিরোনাম যোগ করার জন্য:
ইনস্ট্রাকশন
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
যোগ করুন
অপসারণ ও সক্রিয় উপাদান .active শ্রেণী যোগ করুন যাতে নির্দিষ্ট ড্রপডাউন উপাদানকে উপস্থাপিত করা যায় (ব্লু পটলা যোগ করা হয়)。
ড্রপডাউন মেনুর কোনও উপাদানকে নিষ্ক্রিয় করতে, .disabled শ্রেণী (হবার সময় ক্লাইন গ্রে লিঙ্ক এবং "no-parking-sign" আইকন) যোগ করুন。
ইনস্ট্রাকশন
<li><a class="dropdown-item" href="#">সাধারণ</a></li> <li><a class="dropdown-item active" href="#">সক্রিয়</a></li> <li><a class="dropdown-item disabled" href="#">সক্রিয় নয়</a></li>
ড্রপডাউন মেনুর স্থান
আপনি এছাড়াও .dropend বা .dropstart শ্রেণী যোগ করুন ড্রপ ইলেকট্রনমে, যাতে "dropend" বা "dropstart" মেনু তৈরি করা যায়। লক্ষ্য করুন, ইনসার্ট সিগন/তীর স্বয়ংক্রিয়ভাবে যোগ করা হয়:
Dropright
<div class="dropdown dropend">
Dropleft
<div class="dropdown dropstart">
ড্রপডাউন মেনু ডানদিকে সমান্তরাল
ড্রপডাউন মেনু ডানদিকে সমান্তরাল করতে, .dropdown-menu-end শ্রেণী যোগ করুন যারা .dropdown-menu এর উপাদান:
ইনস্ট্রাকশন
<div class="dropdown-menu dropdown-menu-end">
ড্রপআপ
আপনি যদি ড্রপডাউন মেনু নিচের দিকে না বরঞ্চিত করে উপরের দিকে খুলতে চান, তবে class="dropdown" এর <div> ইলেকট্রনম পরিবর্তন করুন "dropup"：
ইনস্ট্রাকশন
<div class="dropup">
ড্রপডাউন টেক্সট
.dropdown-item-text ড্রপডাউন আইটেমে স্বতন্ত্র টেক্সট যোগ করার জন্য ব্যবহৃত হয়, বা লিঙ্কের ডিফল্ট লিঙ্ক শৈলী যোগ করার জন্য ব্যবহৃত হয়。
ইনস্ট্রাকশন
<ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">লিঙ্ক 1</a></li> <li><a class="dropdown-item" href="#">লিঙ্ক 2</a></li> <li><a class="dropdown-item" href="#">লিঙ্ক 3</a></li> <li><a class="dropdown-item-text" href="#">টেক্সট লিঙ্ক</a></li> <li><span class="dropdown-item-text">স্বতন্ত্র টেক্সট</span></li> </ul>
কম্বোবটন এবং ড্রপডাউন লিস্ট
ইনস্ট্রাকশন
<div class="btn-group">
<button type="button" class="btn btn-primary">হয়ওয়াই</button>
<button type="button" class="btn btn-primary">ডজন</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">কিউইন</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">মোবাইল</a></li>
<li><a class="dropdown-item" href="#">ট্যাবলেট</a></li>
</ul>
</div>
</div>
ভিক্টিকল কম্বোবটন এবং ড্রপডাউন লিস্ট
ইনস্ট্রাকশন
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">হয়ওয়াই</button>
<button type="button" class="btn btn-primary">ডজন</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">কিউইন</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">মোবাইল</a></li>
<li><a class="dropdown-item" href="#">ট্যাবলেট</a></li>
</ul>
</div>
</div>
- পূর্ববর্তী পৃষ্ঠা BS5 কার্ড
- পরবর্তী পৃষ্ঠা BS5 ফোল্ডার
