ড্ৰপডাউনসমূহ

বুটষ্ট্ৰেপ ড্ৰপডাউন প্লাগইনৰ সৈতে সংযোগসমূহৰ তালিকাসমূহ আৰু অধিক প্ৰদৰ্শন কৰিবলে প্ৰসংগভিত্তিক অভাৰলেসমূহ টগল কৰক।

অভাৰভিউ

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

ড্ৰপডাউনসমূহ এটা তৃতীয় পক্ষৰ লাইব্ৰেৰী, Popper.js ত নিৰ্মিত , যি গতিশীল অৱস্থান আৰু দৰ্শনপৰ্ট চিনাক্তকৰণ প্ৰদান কৰে। Bootstrap ৰ JavaScript ৰ আগতে popper.min.js অন্তৰ্ভুক্ত কৰাটো নিশ্চিত কৰক বা bootstrap.bundle.min.js/ ব্যৱহাৰ কৰক bootstrap.bundle.jsযি Popper.js ধাৰণ কৰে । Popper.js navbars ত ড্ৰপডাউনসমূহ অৱস্থান কৰিবলৈ ব্যৱহাৰ কৰা নহয় যদিও গতিশীল অৱস্থান কৰাৰ প্ৰয়োজন নাই।

যদি আপুনি আমাৰ জাভাস্ক্রিপ্ট উৎসৰ পৰা নিৰ্মাণ কৰি আছে, ইয়াৰ বাবে প্ৰয়োজনutil.js ।

অভিগম্যতা

WAI ARIA প্ৰামাণিকে এটা প্ৰকৃত role="menu"ৱিজেট সংজ্ঞায়িত কৰে , কিন্তু এইটো এপ্লিকেচন-সদৃশ মেনুসমূহৰ বাবে নিৰ্দিষ্ট যি কাৰ্য্যসমূহ বা কাৰ্য্যসমূহ ট্ৰিগাৰ কৰে। ARIA মেনুসমূহত কেৱল মেনু বস্তুসমূহ, চেকবক্স মেনু বস্তুসমূহ, ৰেডিঅ' বুটাম মেনু বস্তুসমূহ, ৰেডিঅ' বুটাম গোটসমূহ, আৰু উপ-মেনুসমূহ থাকিব পাৰে।

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

কিন্তু, Bootstrap এ বেছিভাগ প্ৰামাণিক কিবৰ্ড তালিকা পাৰস্পৰিক ক্ৰিয়াৰ বাবে অন্তৰ্নিৰ্মিত সমৰ্থন যোগ কৰে, যেনে .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আমি এই অতিৰিক্ত শ্ৰেণী ব্যৱহাৰ কৰো কেৰেটৰ দুয়োকাষৰ অনুভূমিক ২৫% হ্ৰাস কৰিবলৈ আৰু 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>

অবিকল্পিতভাৱে, এটা ড্ৰপডাউন মেনু স্বয়ংক্ৰিয়ভাৱে ওপৰৰ পৰা আৰু ইয়াৰ মূলৰ বাওঁফালে ১০০% অৱস্থান কৰা হয়। .dropdown-menu-righta ৰ পৰা সোঁফালে যোগ কৰক .dropdown-menuড্ৰপডাউন মেনু প্ৰান্তিককৰণ কৰক।

মুৰ ডাঙি! ড্ৰপডাউনসমূহ Popper.js ৰ সহায়ত অৱস্থান কৰা হয় (যেতিয়া সিহত এটা navbar ত থাকে তাৰ বাহিৰে)।

<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) হেণ্ডলাৰসমূহ যোগ কৰে। এই স্বীকাৰ্য্যভাৱে কুৎসিত হেক iOS' ইভেন্ট প্ৰতিনিধি দল এটা quirk কাষে কাষে কাম কৰিবলৈ প্ৰয়োজনীয় , যি অন্যথা ড্ৰপডাউন বন্ধ যে ক'ড ট্ৰিগাৰ পৰা ড্ৰপডাউন বাহিৰৰ যিকোনো ঠাইত এটা টেপ বাধা দিব. এবাৰ ড্ৰপডাউন বন্ধ হ'লে, এই অতিৰিক্ত খালী হেণ্ডলাৰসমূহ আঁতৰোৱা হয়।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-api ব্যৱহাৰ কৰক, data-toggle="dropdown"ড্ৰপডাউনৰ ট্ৰিগাৰ উপাদানত সদায় উপস্থিত থকাটো প্ৰয়োজনীয়।

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-, যেনে data-offset="".

নাম	প্ৰকাৰ	ডিফল্ট	বিৱৰণ
অফছেট	সংখ্যা \| ষ্ট্ৰিং \| অনুষ্ঠান	০	ইয়াৰ লক্ষ্যৰ সাপেক্ষে ড্ৰপডাউনৰ অফছেট। অধিক তথ্যৰ বাবে Popper.js ৰ অফছেট নথিপত্ৰ চাওক ।
ওলোটা কৰা	বুলিয়ান	সঁচা	প্ৰসংগ উপাদানত এটা ওভাৰলেপিংৰ ক্ষেত্ৰত ড্ৰপডাউনক ফ্লিপ কৰাৰ অনুমতি দিয়ক। অধিক তথ্যৰ বাবে Popper.js ৰ flip docs চাওক ।
সীমা	ষ্ট্ৰিং \| উপাদান	'scrollParent'	ড্ৰপডাউন মেনুৰ অভাৰফ্ল' বাধা সীমা। `'viewport'`, `'window'`, `'scrollParent'`, বা এটা HTMLElement প্ৰসংগ (কেৱল জাভাস্ক্রিপ্ট) ৰ মানসমূহ গ্ৰহণ কৰে । অধিক তথ্যৰ বাবে Popper.js ৰ preventOverflow docs চাওক ।
সন্দৰ্ভ	ষ্ট্ৰিং \| উপাদান	'টগল'	ড্ৰপডাউন মেনুৰ প্ৰসংগ উপাদান। `'toggle'`, `'parent'`, বা এটা HTMLElement প্ৰসংগ ৰ মানসমূহ গ্ৰহণ কৰে । অধিক তথ্যৰ বাবে Popper.js ৰ referenceObject docs চাওক ।
প্ৰদৰ্শন	তাঁৰ	'গতিশীল'	অবিকল্পিতভাৱে, আমি গতিশীল অৱস্থানৰ বাবে Popper.js ব্যৱহাৰ কৰো। এইটো নিষ্ক্ৰিয় কৰক `static`.

মন কৰিব যেতিয়া boundaryৰ বাহিৰে অন্য কোনো মানলে সংহতি কৰা হয় 'scrollParent', শৈলী ধাৰকত position: staticপ্ৰয়োগ কৰা হয় ।.dropdown

পদ্ধতিসমূহ

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

ইভেন্টসমূহ

.dropdown-menuসকলো ড্ৰপডাউন ইভেন্ট 's মূল উপাদানত গুলী কৰা হয় আৰু এটা relatedTargetবৈশিষ্ট্য আছে, যাৰ মান টগলিং এংকৰ উপাদান। hide.bs.dropdownআৰু hidden.bs.dropdownইভেন্টসমূহৰ এটা clickEventবৈশিষ্ট্য আছে (কেৱল যেতিয়া মূল ইভেন্ট ধৰণ click) যি ক্লিক ইভেন্টৰ বাবে এটা ইভেন্ট বস্তু ধাৰণ কৰে।

কাৰ্যক্ৰম	বিৱৰণ
`show.bs.dropdown`	এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া show instance পদ্ধতি কল কৰা হয়।
`shown.bs.dropdown`	এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া ড্ৰপডাউন ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (CSS পৰিৱৰ্তনসমূহৰ বাবে অপেক্ষা কৰিব, সম্পূৰ্ণ হ'বলৈ)।
`hide.bs.dropdown`	এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hide instance পদ্ধতি কল কৰা হয়।
`hidden.bs.dropdown`	এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া ড্ৰপডাউন ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় (CSS পৰিৱৰ্তনসমূহৰ বাবে অপেক্ষা কৰিব, সম্পূৰ্ণ হ'বলৈ)।

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