Source

ড্রপডাউন

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

ওভারভিউ

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

ড্রপডাউনগুলি একটি তৃতীয় পক্ষের লাইব্রেরিতে তৈরি করা হয়েছে, 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">
  <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>

আপনি এর সাথে অ-ইন্টারেক্টিভ ড্রপডাউন আইটেমও তৈরি করতে পারেন .dropdown-item-text৷ কাস্টম CSS বা টেক্সট ইউটিলিটিগুলির সাথে আরও স্টাইল করতে নির্দ্বিধায়৷

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

সক্রিয়

.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>

ডিফল্টরূপে, একটি ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে 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 p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</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>

ড্রপডাউনের অবস্থান পরিবর্তন করতে data-offsetবা ব্যবহার করুন ।data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</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 এর প্রতিরোধ ওভারফ্লো ডক্স দেখুন ।
রেফারেন্স স্ট্রিং | উপাদান 'টগল' ড্রপডাউন মেনুর রেফারেন্স উপাদান। 'toggle', 'parent', বা একটি HTMLElement রেফারেন্স এর মান গ্রহণ করে । আরও তথ্যের জন্য Popper.js এর রেফারেন্স অবজেক্ট ডক্স দেখুন ।
প্রদর্শন স্ট্রিং 'গতিশীল' ডিফল্টরূপে, আমরা গতিশীল অবস্থানের জন্য Popper.js ব্যবহার করি। এটি দিয়ে অক্ষম করুন static

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

পদ্ধতি

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

ঘটনা

.dropdown-menuসমস্ত ড্রপডাউন ইভেন্টগুলি এর মূল উপাদানে চালিত হয় এবং একটি relatedTargetসম্পত্তি থাকে, যার মান হল টগল করা অ্যাঙ্কর উপাদান৷ hide.bs.dropdownএবং hidden.bs.dropdownইভেন্টগুলির একটি clickEventসম্পত্তি থাকে (শুধুমাত্র যখন মূল ইভেন্টের ধরন হয় click) যাতে ক্লিক ইভেন্টের জন্য একটি ইভেন্ট অবজেক্ট থাকে।

ঘটনা বর্ণনা
show.bs.dropdown শো ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে চালু হয়।
shown.bs.dropdown ড্রপডাউনটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
hide.bs.dropdown হাইড ইনস্ট্যান্স পদ্ধতি কল করা হলে এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয়।
hidden.bs.dropdown ড্রপডাউনটি ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})