ড্রপডাউন

বুটস্ট্র্যাপ ড্রপডাউন প্লাগইন সহ লিঙ্কগুলির তালিকা এবং আরও অনেক কিছু প্রদর্শনের জন্য প্রাসঙ্গিক ওভারলেগুলি টগল করুন।

ওভারভিউ

ড্রপডাউনগুলি টগলযোগ্য, লিঙ্কগুলির তালিকা এবং আরও অনেক কিছু প্রদর্শনের জন্য প্রাসঙ্গিক ওভারলে। তারা অন্তর্ভুক্ত বুটস্ট্র্যাপ ড্রপডাউন জাভাস্ক্রিপ্ট প্লাগইন দিয়ে ইন্টারেক্টিভ করা হয়েছে। এগুলি ক্লিক করে টগল করা হয়, হোভার করে নয়; এটি একটি ইচ্ছাকৃত নকশা সিদ্ধান্ত.

ড্রপডাউনগুলি একটি তৃতীয় পক্ষের লাইব্রেরিতে তৈরি করা হয়েছে, Popper.js , যা গতিশীল অবস্থান এবং ভিউপোর্ট সনাক্তকরণ প্রদান করে। Bootstrap এর JavaScript বা ব্যবহার করার আগে popper.min.js অন্তর্ভুক্ত করতে ভুলবেন না যেটিতে bootstrap.bundle.min.jsPopper.js bootstrap.bundle.jsরয়েছে। Popper.js নেভিবারে ড্রপডাউনের অবস্থানের জন্য ব্যবহার করা হয় না যদিও গতিশীল অবস্থানের প্রয়োজন হয় না।

আপনি যদি উৎস থেকে আমাদের জাভাস্ক্রিপ্ট তৈরি করেন, তাহলে এটির প্রয়োজনutil.js ।

অ্যাক্সেসযোগ্যতা

WAI ARIA স্ট্যান্ডার্ড একটি প্রকৃত role="menu"উইজেটকে সংজ্ঞায়িত করে , তবে এটি অ্যাপ্লিকেশনের মতো মেনুগুলির জন্য নির্দিষ্ট যা ক্রিয়া বা ফাংশনগুলিকে ট্রিগার করে৷ ARIA মেনুতে শুধুমাত্র মেনু আইটেম, চেকবক্স মেনু আইটেম, রেডিও বোতাম মেনু আইটেম, রেডিও বোতাম গ্রুপ এবং সাব-মেনু থাকতে পারে।

অন্য দিকে, বুটস্ট্র্যাপের ড্রপডাউনগুলি জেনেরিক এবং বিভিন্ন পরিস্থিতিতে এবং মার্কআপ কাঠামোর জন্য প্রযোজ্য হওয়ার জন্য ডিজাইন করা হয়েছে। উদাহরণস্বরূপ, ড্রপডাউন তৈরি করা সম্ভব যাতে অতিরিক্ত ইনপুট এবং ফর্ম নিয়ন্ত্রণ থাকে, যেমন অনুসন্ধান ক্ষেত্র বা লগইন ফর্ম। এই কারণে, বুটস্ট্র্যাপ সত্যিকারের ARIA মেনুগুলির জন্য প্রয়োজনীয় roleএবং বৈশিষ্ট্যগুলির কোনোটিই আশা করে না (বা স্বয়ংক্রিয়ভাবে যোগ) করে না। লেখকদের এই আরও নির্দিষ্ট গুণাবলী নিজেদের অন্তর্ভুক্ত করতে হবে।aria-

যাইহোক, বুটস্ট্র্যাপ বেশিরভাগ স্ট্যান্ডার্ড কীবোর্ড মেনু ইন্টারঅ্যাকশনের জন্য অন্তর্নির্মিত সমর্থন যোগ করে, যেমন .dropdown-itemকার্সার কী ব্যবহার করে পৃথক উপাদানগুলির মধ্য দিয়ে যাওয়ার ক্ষমতা এবং ESCকী দিয়ে মেনু বন্ধ করার ক্ষমতা।

উদাহরণ

ড্রপডাউনের টগল (আপনার বোতাম বা লিঙ্ক) এবং ড্রপডাউন মেনু এর মধ্যে মোড়ানো .dropdown, বা অন্য একটি উপাদান যা ঘোষণা করে position: relative;। ড্রপডাউনগুলি আপনার সম্ভাব্য চাহিদাগুলিকে আরও ভালভাবে ফিট করার জন্য উপাদানগুলি <a>থেকে ট্রিগার করা যেতে পারে।<button>

একক বোতাম ড্রপডাউন

যেকোনো একক .btnকিছু মার্কআপ পরিবর্তনের সাথে ড্রপডাউন টগলে পরিণত করা যেতে পারে। এখানে আপনি কিভাবে তাদের উভয় <button>উপাদানের সাথে কাজ করতে পারেন:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

এবং <a>উপাদানগুলির সাথে:

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

সর্বোত্তম অংশটি হল আপনি যে কোনও বোতাম বৈকল্পিক দিয়েও এটি করতে পারেন:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

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

একইভাবে, একক বোতাম ড্রপডাউনের মতো কার্যত একই মার্কআপের সাথে স্প্লিট বোতাম ড্রপডাউন তৈরি করুন, কিন্তু .dropdown-toggle-splitড্রপডাউন ক্যারেটের চারপাশে যথাযথ ব্যবধানের জন্য যোগ করুন।

paddingআমরা ক্যারেটের উভয় পাশের অনুভূমিক 25% কমাতে margin-leftএবং নিয়মিত বোতাম ড্রপডাউনের জন্য যোগ করা অপসারণ করতে এই অতিরিক্ত শ্রেণীটি ব্যবহার করি । এই অতিরিক্ত পরিবর্তনগুলি ক্যারেটকে স্প্লিট বোতামে কেন্দ্রীভূত রাখে এবং প্রধান বোতামের পাশে আরও উপযুক্ত আকারের হিট এলাকা প্রদান করে।

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</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">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

সাইজিং

বোতাম ড্রপডাউনগুলি ডিফল্ট এবং স্প্লিট ড্রপডাউন বোতাম সহ সমস্ত আকারের বোতামগুলির সাথে কাজ করে৷

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

ড্রপআপ বৈচিত্র

.dropupমূল উপাদান যোগ করে উপাদানের উপরে ড্রপডাউন মেনু ট্রিগার করুন।

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ড্রপরাইট প্রকরণ

মূল উপাদান যোগ করে উপাদানের ডানদিকে ড্রপডাউন মেনু ট্রিগার করুন .dropright।

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ফোঁটা প্রকরণ

মূল উপাদান যোগ করে উপাদানের বাম দিকে ড্রপডাউন মেনু ট্রিগার করুন .dropleft।

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

ঐতিহাসিকভাবে ড্রপডাউন মেনু বিষয়বস্তু লিঙ্ক হতে হবে, কিন্তু এটি আর v4 এর ক্ষেত্রে নয়। এখন আপনি শুধুমাত্র s এর <button>পরিবর্তে ঐচ্ছিকভাবে আপনার ড্রপডাউনে উপাদান ব্যবহার করতে পারেন ।<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

ডিফল্টরূপে, একটি ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে 100% উপরে থেকে এবং তার পিতামাতার বাম পাশে অবস্থান করে। ড্রপডাউন মেনুটি ডানদিকে সারিবদ্ধ করুন এ যোগ করুন .dropdown-menu-right।.dropdown-menu

মাথা আপ! ড্রপডাউনগুলি Popper.js-এর জন্য ধন্যবাদ (এগুলি একটি নেভিবারে থাকা ছাড়া)।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

যেকোন ড্রপডাউন মেনুতে কর্মের লেবেল বিভাগের জন্য একটি শিরোনাম যোগ করুন।

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

একটি বিভাজক সহ সম্পর্কিত মেনু আইটেমগুলির পৃথক গোষ্ঠী।

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

একটি ড্রপডাউন মেনুর মধ্যে একটি ফর্ম রাখুন, অথবা এটিকে একটি ড্রপডাউন মেনুতে পরিণত করুন এবং আপনার প্রয়োজনীয় নেতিবাচক স্থান দিতে মার্জিন বা প্যাডিং ইউটিলিটিগুলি ব্যবহার করুন৷

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

.activeড্রপডাউনে আইটেমগুলিকে সক্রিয় হিসাবে স্টাইল করতে যোগ করুন ।

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

অক্ষম হিসাবে স্টাইল করতে.disabled ড্রপডাউনে আইটেমগুলিতে যোগ করুন ।

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ব্যবহার

.showডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে, ড্রপডাউন প্লাগইনটি অভিভাবক তালিকা আইটেমে ক্লাস টগল করে লুকানো সামগ্রী (ড্রপডাউন মেনু) টগল করে । অ্যাট্রিবিউটটি data-toggle="dropdown"একটি অ্যাপ্লিকেশন স্তরে ড্রপডাউন মেনু বন্ধ করার জন্য নির্ভর করা হয়, তাই এটি সর্বদা ব্যবহার করা একটি ভাল ধারণা।

স্পর্শ-সক্ষম ডিভাইসগুলিতে, একটি ড্রপডাউন খোলার ফলে উপাদানটির অবিলম্বে শিশুদের জন্য খালি ( $.noop) হ্যান্ডলার যোগ করা হয়। আইওএস-এর ইভেন্ট ডেলিগেশনে একটি ব্যঙ্গের চারপাশে কাজ করার জন্য এই স্বীকার্যভাবে কুৎসিত হ্যাকটি প্রয়োজনীয় , যা অন্যথায় ড্রপডাউন বন্ধ করে এমন কোডটিকে ট্রিগার করতে ড্রপডাউনের বাইরে কোথাও একটি ট্যাপকে বাধা দেবে। ড্রপডাউন বন্ধ হয়ে গেলে, এই অতিরিক্ত খালি হ্যান্ডলারগুলি সরানো হয়।mouseover<body>mouseover

ডেটা অ্যাট্রিবিউটের মাধ্যমে

data-toggle="dropdown"একটি ড্রপডাউন টগল করতে একটি লিঙ্ক বা বোতামে যোগ করুন ।

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

জাভাস্ক্রিপ্টের মাধ্যমে

জাভাস্ক্রিপ্টের মাধ্যমে ড্রপডাউনগুলি কল করুন:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`এখনও প্রয়োজন

আপনি JavaScript এর মাধ্যমে আপনার ড্রপডাউন কল করুন বা ডাটা-এপিআই ব্যবহার করুন না কেন data-toggle="dropdown", ড্রপডাউনের ট্রিগার উপাদানে সবসময় উপস্থিত থাকা প্রয়োজন।

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-offset=""।

নাম	টাইপ	ডিফল্ট	বর্ণনা
অফসেট	সংখ্যা \| স্ট্রিং \| ফাংশন	0	ড্রপডাউন অফসেট এর টার্গেট আপেক্ষিক. আরও তথ্যের জন্য Popper.js এর অফসেট ডক্স দেখুন ।
উল্টানো	বুলিয়ান	সত্য	রেফারেন্স এলিমেন্টে ওভারল্যাপিংয়ের ক্ষেত্রে ড্রপডাউনকে ফ্লিপ করার অনুমতি দিন। আরও তথ্যের জন্য Popper.js এর ফ্লিপ ডক্স দেখুন ।
সীমানা	স্ট্রিং \| উপাদান	'স্ক্রোল প্যারেন্ট'	ড্রপডাউন মেনুর ওভারফ্লো সীমাবদ্ধতা। `'viewport'`, `'window'`, `'scrollParent'`, বা একটি HTMLElement রেফারেন্স (শুধুমাত্র জাভাস্ক্রিপ্ট) এর মান গ্রহণ করে । আরও তথ্যের জন্য Popper.js এর প্রতিরোধ ওভারফ্লো ডক্স দেখুন ।

নোট করুন যখন boundaryব্যতীত অন্য কোনো মান সেট করা হয় 'scrollParent', স্টাইলটি পাত্রে position: staticপ্রয়োগ করা হয় ।.dropdown

পদ্ধতি

পদ্ধতি	বর্ণনা
`$().dropdown('toggle')`	একটি প্রদত্ত নেভিবার বা ট্যাবড নেভিগেশনের ড্রপডাউন মেনু টগল করে।
`$().dropdown('update')`	একটি উপাদানের ড্রপডাউন অবস্থান আপডেট করে।
`$().dropdown('dispose')`	একটি উপাদান এর ড্রপডাউন ধ্বংস.

ঘটনা

.dropdown-menuসমস্ত ড্রপডাউন ইভেন্টগুলি এর মূল উপাদানে চালিত হয় এবং একটি relatedTargetসম্পত্তি থাকে, যার মান হল টগল করা অ্যাঙ্কর উপাদান৷

ঘটনা	বর্ণনা
`show.bs.dropdown`	শো ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে চালু হয়।
`shown.bs.dropdown`	ড্রপডাউনটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
`hide.bs.dropdown`	হাইড ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয়।
`hidden.bs.dropdown`	ড্রপডাউনটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ড্রপডাউন

ওভারভিউ

অ্যাক্সেসযোগ্যতা

উদাহরণ

একক বোতাম ড্রপডাউন

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

সাইজিং

ড্রপআপ বৈচিত্র

ড্রপরাইট প্রকরণ

ফোঁটা প্রকরণ

মেনু আইটেম

মেনু প্রান্তিককরণ

মেনু হেডার

মেনু বিভাজক

মেনু ফর্ম

সক্রিয় মেনু আইটেম

অক্ষম মেনু আইটেম

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

জাভাস্ক্রিপ্টের মাধ্যমে

`data-toggle="dropdown"`এখনও প্রয়োজন

অপশন

পদ্ধতি

ঘটনা

ড্রপডাউন

ওভারভিউ

অ্যাক্সেসযোগ্যতা

উদাহরণ

একক বোতাম ড্রপডাউন

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

সাইজিং

ড্রপআপ বৈচিত্র

ড্রপরাইট প্রকরণ

ফোঁটা প্রকরণ

মেনু আইটেম

মেনু প্রান্তিককরণ

মেনু হেডার

ড্রপডাউন হেডার

মেনু বিভাজক

মেনু ফর্ম

সক্রিয় মেনু আইটেম

অক্ষম মেনু আইটেম

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

জাভাস্ক্রিপ্টের মাধ্যমে

data-toggle="dropdown"এখনও প্রয়োজন

অপশন

পদ্ধতি

ঘটনা

`data-toggle="dropdown"`এখনও প্রয়োজন