কিভাবে বুটস্ট্র্যাপ 5 ড্রপডাউন তৈরি করবেন?

আমরা বুটস্ট্র্যাপ বোতামে আমাদের পূর্ববর্তী টিউটোরিয়ালে ড্রপডাউন উপাদানটি ইতিমধ্যে স্পর্শ করেছি । ড্রপডাউন একটি বোতাম (বা একটি লিঙ্ক) ছাড়া আর কিছুই নয় এবং একটি তালিকা দেখান যখন এটিতে ক্লিক করুন। এই টিউটোরিয়ালে আসুন আমরা উদাহরণ সহ বিভিন্ন ধরনের বুটস্ট্র্যাপ 5 ড্রপডাউন এক্সপ্লোর করি। ড্রপডাউন কাজ করার জন্য bootstrap.bundled.min.js অন্তর্ভুক্ত করতে ভুলবেন না। আপনি এখানে স্টার্টার টেমপ্লেট উল্লেখ করতে পারেন ।

বুটস্ট্র্যাপ 5 ড্রপডাউন টিউটোরিয়াল

1. ড্রপডাউনের মৌলিক বৈশিষ্ট্য
2. ডিফল্ট ড্রপডাউন বোতাম তৈরি করা হচ্ছে
3. ডিভাইডার যোগ করা
4. ড্রপডাউনে লিঙ্ক অক্ষম করা হচ্ছে
5. ডান মেনু সারিবদ্ধতার সাথে ড্রপডাউন
6. হেডার সহ ড্রপডাউন বোতাম
7. ড্রপডাউন বোতামের সাইজিং
8. স্প্লিট ড্রপডাউন বাটন
9. স্প্লিট ড্রপআপ বাটন
10. মনে রাখার মতো পয়েন্ট

1 বুটস্ট্র্যাপের মূল বিষয় 5 ড্রপডাউন

• ড্রপডাউনগুলি লিঙ্ক বা বোতাম উপাদানগুলির টগলযোগ্য তালিকা যা উপরে বা নীচের দিকে দেখানো হয়।
• এটি সাধারণত ড্রপডাউন বা ড্রপ আপ মেনু আইটেম এবং সাইডবার নেভিগেশন আইটেমগুলির জন্য ব্যবহৃত হয়।
• এটি Popper.js স্ক্রিপ্টের উপর ভিত্তি করে কাজ করে।
• আপনার একই ক্রমে popper.min.js এবং তারপর bootstrap.min.js অন্তর্ভুক্ত করা উচিত। আমাদের স্টার্টার টেমপ্লেট সহ এই টিউটোরিয়ালের সমস্ত উদাহরণ ব্যবহার করুন ।
• ডিফল্টরূপে ড্রপডাউন এলিমেন্টে কোন "ভূমিকা" বা "আরিয়া-" বৈশিষ্ট্য যোগ করা হবে না। যেখানে প্রয়োজন সেখানে আপনাকে ম্যানুয়ালি ertোকানো উচিত।
• ড্রপডাউন আইটেমগুলি বোতামটি ক্লিক করে বা বাইরে ক্লিক করে বন্ধ করা যেতে পারে। ড্রপডাউন আইটেমগুলি বন্ধ করতে আপনি "Esc" কী ব্যবহার করতে পারেন।

2 ডিফল্ট ড্রপডাউন বোতাম তৈরি করা

বুটস্ট্র্যাপ 5 এ একটি ডিফল্ট ড্রপডাউন তৈরির কোড নিচে দেওয়া হল:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে:

• মূলত আপনাকে। এটি বোতামটিকে ড্রপডাউন বাটন হিসেবে চিহ্নিত করবে। আপনি বোতামের পরিবর্তে ট্যাগ ব্যবহার করতে পারেন।
• বোতামটি (বা লিঙ্ক) ".dropdown-toggle" শ্রেণীর সাথে অন্তর্ভুক্ত করতে হবে। এই উদাহরণে, আমরা প্রাথমিক রঙ সহ বোতাম তৈরি করতে "বিটিএন-প্রাথমিক" শ্রেণী ব্যবহার করেছি। আপনি বিভিন্ন রঙের বোতাম রাখার জন্য যেকোনো রঙের ইউটিলিটি ক্লাস ব্যবহার করতে পারেন।
• বোতামের পরে আইটেম সহ একটি ড্রপডাউন মেনু তৈরি করুন।

3 ড্রপডাউনে ডিভাইডার যোগ করা

এখন আপনি কীভাবে বেসিক ড্রপডাউন বাটন তৈরি করবেন তা জানেন। আসুন মেনু আইটেম এবং হেডারের মধ্যে বিভাজক যুক্ত করার মতো কিছু আলংকারিক জিনিস যুক্ত করি।

<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<h6 class="dropdown-header">Dropdown Header</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown One</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown Two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

ড্রপডাউন মেনু নীচের মত দেখাবে:

4 ড্রপডাউন আইটেমে লিঙ্ক অক্ষম করা

ক্লিক করা রোধ করতে আপনি ড্রপডাউনে আইটেমটি নিষ্ক্রিয় করতে পারেন:

<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown Two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">Dropdown Three</a>
</div>
</div>

আমরা তথ্য বাটন ব্যবহার করেছি এবং তৃতীয় লিঙ্কটি নিষ্ক্রিয় করেছি। অক্ষম লিঙ্কের উপর মাউস সরানো স্টপ কার্সার প্রতীক দেখাবে এবং আপনি এটিতে ক্লিক করতে পারবেন না।

5 ডান মেনু সারিবদ্ধতার সাথে ড্রপডাউন

আপনি উপরের উদাহরণগুলিতে লক্ষ্য করেছেন, ডিফল্টরূপে মেনু বাম সারিবদ্ধতার সাথে দেখানো হবে। আপনি ".dropdown-menu-right" ক্লাসের সাথে ".dropdown-menu" ক্লাস যোগ করে এটিকে ডান সারিবদ্ধতায় পরিবর্তন করতে পারেন। মনে রাখবেন, এটি সম্পূর্ণ মেনু বাক্সটিকে পাত্রের ডানদিকে সরিয়ে দেবে। ড্রপডাউন বাটন এলিমেন্টের অধীনে মেনুটি সঠিকভাবে রাখার জন্য আপনার অতিরিক্ত CSS স্টাইল ব্যবহার করা উচিত।

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button Alignment Right
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

ডান সারিবদ্ধ মেনু আইটেমগুলি নীচের মত দেখাবে:

6 হেডার সহ ড্রপডাউন বোতাম

আপনি H1-H6 ট্যাগের যে কোন একটি দিয়ে ".dropdown-header" ক্লাস ব্যবহার করে মেনু আইটেমের ভিতরে একটি হেডার টেক্সট যোগ করতে পারেন। সাধারণত মেনুর উপরে হেডার যোগ করা হয় এবং ক্লিক করা যায় না।

<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<h5 class="dropdown-header" href="#">Dropdown Header</h5>
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
</div>
</div>

হেডার সহ ড্রপডাউন নিম্নলিখিত ফলাফল দেবে:

7 ড্রপডাউন বাটন সাইজিং

নীচের মত ".btn-lg" এবং ".btn-sm" ক্লাস ব্যবহার করে ড্রপডাউন বোতামটি বড় বা ছোট করুন:

<div class="btn-group">
<button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

দ্রষ্টব্য, আমরা দুটি বাটন গ্রুপ ব্যবহার করেছি  দুটি বোতাম ইনলাইন দেখানোর জন্য, যদি আপনি শুধুমাত্র একটি বোতাম দেখাতে চান (বড় বলে) তাহলে আপনি ডিফল্ট “.dropdown" ক্লাস ব্যবহার করতে পারেন।

বড় এবং ছোট ড্রপডাউন বোতামগুলি নীচে দেখানো হয়েছে:

8 স্প্লিট ড্রপডাউন বোতাম

এখন পর্যন্ত আমরা একক বোতাম হিসাবে বিভিন্ন ধরণের ড্রপডাউন দেখেছি। স্প্লিট বোতামে এর দুটি বোতাম অংশ রয়েছে, তাই আপনার বাটন গ্রুপ ব্যবহার করা উচিত যাতে সেগুলি ফাঁক ছাড়াই ইনলাইন দেখায়। দুটি বোতামের বিভাজন CSS clas ".dropdown-toggle-split" ব্যবহার করে সক্ষম করা হয়েছে।

<div class="btn-group">
<button type="button" class="btn btn-secondary">Split Button</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown Button Group</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

স্প্লিট ড্রপডাউন বোতামটি নীচের মত দেখাবে:

9 স্প্লিট ড্রপআপ বাটন

এটি ".dropup" ক্লাস ব্যবহার করে ডিফল্ট ড্রপডাউনের পরিবর্তে একটি ড্রপআপ স্টাইল।

<div class="btn-group dropup">
<button type="button" class="btn btn-warning">Split Dropup Button</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown Button Group</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown One</a>
<a class="dropdown-item" href="#">Dropdown Two</a>
<a class="dropdown-item" href="#">Dropdown Three</a>
</div>
</div>

ড্রপআপ বিভক্ত বোতামটি নীচের মত দেখাবে:

10 গুরুত্বপূর্ণ পয়েন্ট মনে রাখা

ব্রাউজারের ভিউপোর্টের উপর নির্ভর করে ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে নিচে বা উপরে দেখানো হবে। উদাহরণস্বরূপ, যখন আপনি পৃষ্ঠার শেষে থাকবেন তখন ড্রপডাউন মেনু আইটেমগুলি ড্রপ আপ মেনুর মত উপরে দেখানো হবে।

ড্রপডাউনের বোতাম উপাদানটি ডিফল্ট বাটন কম্পোনেন্টের মতো সব ব্যাকগ্রাউন্ড কালার ইউটিলিটি ক্লাস সমর্থন করে। বুটস্ট্র্যাপ 3 শুধুমাত্র মেনু আইটেমগুলির জন্য লিঙ্ক সমর্থন করে। কিন্তু বুটস্ট্র্যাপ 4 এবং 5 এ প্রতিটি মেনু আইটেম একটি লিঙ্ক বা বোতাম উপাদান হতে পারে।

বুটস্ট্র্যাপ 5 শিখুন (সূচক )