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

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

এই পৃষ্ঠাত

অভাৰভিউ

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

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

অভিগম্যতা

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

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

কিন্তু, Bootstrap এ বেছিভাগ প্ৰামাণিক কিবৰ্ড তালিকা পাৰস্পৰিক ক্ৰিয়াৰ বাবে অন্তৰ্নিৰ্মিত সমৰ্থন যোগ কৰে, যেনে .dropdown-itemকাৰ্ছৰ কি'সমূহ ব্যৱহাৰ কৰি ব্যক্তিগত উপাদানসমূহৰ মাজেৰে যোৱাৰ ক্ষমতা আৰু কি'ৰ সৈতে মেনু বন্ধ কৰা ESC।

উদাহৰণ

ড্ৰপডাউনৰ টগল (আপোনাৰ বুটাম বা সংযোগ) আৰু ড্ৰপডাউন মেনু ৰ ভিতৰত ৰেপ কৰক .dropdown, বা অন্য উপাদান যি ঘোষণা কৰে position: relative;। ড্ৰপডাউনসমূহ আপোনাৰ সম্ভাৱ্য প্ৰয়োজনীয়তাসমূহৰ সৈতে ভালদৰে খাপ খুৱাবলৈ <a>বা উপাদানসমূহৰ পৰা ট্ৰিগাৰ কৰিব পাৰি । <button>ইয়াত দেখুওৱা উদাহৰণসমূহে <ul>য'ত উপযুক্ত তাত অৰ্থগত উপাদানসমূহ ব্যৱহাৰ কৰে, কিন্তু স্বনিৰ্বাচিত মাৰ্কআপ সমৰ্থিত।

একক বুটাম

যিকোনো .btnএককক কিছুমান মাৰ্কআপ পৰিবৰ্তনৰ সৈতে এটা ড্ৰপডাউন টগললৈ ৰূপান্তৰ কৰিব পাৰি। <button>ইয়াত আপুনি সিহতক যিকোনো এটা উপাদানৰ সৈতে কেনেকৈ কামত লগাব পাৰে :

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

আৰু <a>উপাদানসমূহৰ সৈতে:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

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

সৰ্বোত্তম অংশটো হ'ল আপুনি যিকোনো বুটামৰ ভিন্নতাৰ সৈতেও এইটো কৰিব পাৰে:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

আকাৰ নিৰ্ধাৰণ

বুটাম ড্ৰপডাউনসমূহে সকলো আকাৰৰ বুটামসমূহৰ সৈতে কাম কৰে, অবিকল্পিত আৰু বিভক্ত ড্ৰপডাউন বুটামসমূহ অন্তৰ্ভুক্ত কৰি।

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ডাৰ্ক ড্ৰপডাউন

.dropdown-menu-darkএটা বৰ্ত্তমানৰ ওপৰত যোগ কৰি এটা গাঢ় navbar বা স্বনিৰ্বাচিত শৈলী মিলাবলৈ গাঢ় ড্ৰপডাউনসমূহত বিকল্প কৰক .dropdown-menu। ড্ৰপডাউন বস্তুসমূহত কোনো পৰিৱৰ্তন কৰাৰ প্ৰয়োজন নাই।

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

আৰু ইয়াক এটা নৱবাৰত ব্যৱহাৰ কৰিবলৈ ৰাখিলে:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

নিৰ্দেশনা

আৰ টি এল

RTL ত Bootstrap ব্যৱহাৰ কৰাৰ সময়ত নিৰ্দেশনাসমূহ প্ৰতিফলিত কৰা হয়, অৰ্থাৎ .dropstartসোঁফালে ওলাব ।

কেন্দ্ৰীভূত

.dropdown-centerড্ৰপডাউন মেনুক মূল উপাদানটোৰ ওপৰত টগলৰ তলত কেন্দ্ৰ কৰি কৰক ।

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ড্ৰপআপ

.dropupমূল উপাদানত যোগ কৰি উপাদানসমূহৰ ওপৰৰ ড্ৰপডাউন মেনুসমূহ ট্ৰিগাৰ কৰক ।

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ড্ৰপআপ কেন্দ্ৰীভূত

ড্ৰপআপ মেনুক .dropup-centerমূল উপাদানৰ ওপৰত টগলৰ ওপৰত কেন্দ্ৰ কৰি কৰক।

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ড্ৰপপেণ্ড

.dropendমূল উপাদানত যোগ কৰি উপাদানসমূহৰ সোঁফালে থকা ড্ৰপডাউন মেনুসমূহ ট্ৰিগাৰ কৰক ।

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ড্ৰপষ্টাৰ্ট

.dropstartমূল উপাদানত যোগ কৰি উপাদানসমূহৰ বাওঁফালে থকা ড্ৰপডাউন মেনুসমূহ ট্ৰিগাৰ কৰক ।

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

আপুনি <a>বা <button>উপাদানসমূহক ড্ৰপডাউন বস্তু হিচাপে ব্যৱহাৰ কৰিব পাৰে।

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

আপুনি ৰ সৈতে অ-পাৰস্পৰিক ড্ৰপডাউন বস্তুও সৃষ্টি কৰিব পাৰে .dropdown-item-text। স্বনিৰ্বাচিত CSS বা লিখনী সঁজুলিসমূহৰ সৈতে অধিক শৈলী কৰিবলৈ নিঃসংকোচে অনুভৱ কৰক।

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

সক্ৰিয়

.activeড্ৰপডাউনত বস্তুসমূহত যোগ কৰক সিহতক সক্ৰিয় হিচাপে শৈলী কৰিবলে । সহায়ক প্ৰযুক্তিসমূহলে সক্ৰিয় অৱস্থা প্ৰেৰণ কৰিবলে, aria-currentবৈশিষ্ট্য ব্যৱহাৰ কৰক — pageবৰ্তমান পৃষ্ঠাৰ বাবে মান ব্যৱহাৰ কৰি, বা trueএটা গোটত বৰ্তমান বস্তুৰ বাবে।

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

অক্ষম হোৱা

.disabledড্ৰপডাউনত বস্তুসমূহত যোগ কৰক সিহতক নিষ্ক্ৰিয় হিচাপে শৈলী কৰিবলে ।

html

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

অবিকল্পিতভাৱে, এটা ড্ৰপডাউন মেনু স্বয়ংক্ৰিয়ভাৱে ওপৰৰ পৰা আৰু ইয়াৰ মূলৰ বাওঁফালে ১০০% অৱস্থান কৰা হয়। আপুনি ইয়াক দিশগত শ্ৰেণীসমূহৰ সৈতে সলনি কৰিব পাৰে .drop*, কিন্তু আপুনি অতিৰিক্ত পৰিবৰ্তক শ্ৰেণীসমূহৰ সৈতেও নিয়ন্ত্ৰণ কৰিব পাৰে।

.dropdown-menu-enda ৰ পৰা সোঁফালে যোগ কৰক .dropdown-menuড্ৰপডাউন মেনু প্ৰান্তিককৰণ কৰক। RTL ত Bootstrap ব্যৱহাৰ কৰাৰ সময়ত নিৰ্দেশনাসমূহ প্ৰতিফলিত কৰা হয়, অৰ্থাৎ .dropdown-menu-endবাওঁফালে ওলাব ।

মুৰ ডাঙি! ড্ৰপডাউনসমূহ পপাৰৰ সহায়ত স্থাপন কৰা হয়, কেৱল যেতিয়া সেইবোৰ এটা navbar ত থাকে।

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

প্ৰতিক্ৰিয়াশীল প্ৰান্তিককৰণ

যদি আপুনি প্ৰতিক্ৰিয়াশীল প্ৰান্তিককৰণ ব্যৱহাৰ কৰিব বিচাৰে, data-bs-display="static"বৈশিষ্ট্য যোগ কৰি গতিশীল অৱস্থান নিষ্ক্ৰিয় কৰক আৰু প্ৰতিক্ৰিয়াশীল ভিন্নতা শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।

প্ৰদত্ত ব্ৰেকপইন্ট বা ডাঙৰৰ সৈতে ড্ৰপডাউন মেনুক সোঁফালে প্ৰান্তিককৰণ কৰিবলে , যোগ কৰক .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end।

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

বাওঁফালৰ ড্ৰপডাউন মেনুক প্ৰদত্ত ব্ৰেকপইন্ট বা ডাঙৰৰ সৈতে প্ৰান্তিককৰণ কৰিবলে , যোগ কৰক .dropdown-menu-endআৰু .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start।

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

মন কৰিব যে আপুনি navbars ত ড্ৰপডাউন বুটামসমূহত এটা বৈশিষ্ট্য যোগ কৰাৰ প্ৰয়োজন নাই data-bs-display="static", যিহেতু Popper navbars ত ব্যৱহাৰ কৰা নহয়।

প্ৰান্তিককৰণ বিকল্পসমূহ

ওপৰত দেখুওৱা বেছিভাগ বিকল্প লৈ, ইয়াত বিভিন্ন ড্ৰপডাউন এলাইনমেণ্ট বিকল্পৰ এটা সৰু পাকঘৰৰ চিংক ডেমো এটা ঠাইত দিয়া হৈছে।

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

হেডাৰসমূহ

যিকোনো ড্ৰপডাউন মেনুত কাৰ্য্যসমূহৰ অংশসমূহ লেবেল কৰিবলে এটা হেডাৰ যোগ কৰক।

html

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

ডিভাইডাৰ

এটা বিভাজকৰ সৈতে সম্পৰ্কীয় মেনু বস্তুসমূহৰ গোটসমূহ পৃথক কৰক।

html

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

পাঠ্য

লিখনীৰ সৈতে এটা ড্ৰপডাউন মেনুৰ ভিতৰত যিকোনো মুক্তৰূপ লিখনী ৰাখক আৰু ব্যৱধান সঁজুলিসমূহ ব্যৱহাৰ কৰক । মন কৰিব যে আপুনি সম্ভৱতঃ মেনু প্ৰস্থ বাধাগ্ৰস্ত কৰিবলে অতিৰিক্ত আকাৰ শৈলীৰ প্ৰয়োজন হ'ব।

html

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

প্ৰপত্ৰসমূহ

এটা ড্ৰপডাউন মেনুৰ ভিতৰত এটা প্ৰপত্ৰ ৰাখক, বা ইয়াক এটা ড্ৰপডাউন মেনুলৈ কৰক, আৰু ইয়াক আপুনি প্ৰয়োজনীয় ঋণাত্মক স্থান দিবলৈ মাৰ্জিন বা পেডিং সঁজুলিসমূহ ব্যৱহাৰ কৰক।

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

ড্ৰপডাউনৰ অৱস্থান সলনি কৰিবলৈ data-bs-offsetবা ব্যৱহাৰ কৰক ।data-bs-reference

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

স্বয়ংক্ৰিয় বন্ধ আচৰণ

অবিকল্পিতভাৱে, ড্ৰপডাউন মেনুৰ ভিতৰত বা বাহিৰত ক্লিক কৰাৰ সময়ত ড্ৰপডাউন মেনু বন্ধ কৰা হয়। আপুনি autoCloseড্ৰপডাউনৰ এই আচৰণ সলনি কৰিবলে বিকল্প ব্যৱহাৰ কৰিব পাৰে।

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

চি এছ এছ

চলকসমূহ

v5.2.0 ত যোগ কৰা হৈছে

Bootstrap ৰ বিকাশশীল CSS চলকসমূহ পদ্ধতিৰ অংশ হিচাপে, ড্ৰপডাউনসমূহে এতিয়া .dropdown-menuউন্নত বাস্তৱ-সময় স্বনিৰ্বাচনৰ বাবে স্থানীয় CSS চলকসমূহ অন ব্যৱহাৰ কৰে। CSS চলকসমূহৰ বাবে মানসমূহ Sass ৰ যোগেদি সংহতি কৰা হয়, গতিকে Sass স্বনিৰ্বাচন এতিয়াও সমৰ্থিত,ও।

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

CSS ভেৰিয়েবলসমূহৰ যোগেদি কাষ্টমাইজেচন .dropdown-menu-darkক্লাছত দেখা যায় য'ত আমি ডুপ্লিকেট CSS নিৰ্বাচকসমূহ যোগ নকৰাকৈ নিৰ্দিষ্ট মানসমূহ অভাৰৰাইড কৰোঁ।

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass চলকসমূহ

সকলো ড্ৰপডাউনৰ বাবে চলকসমূহ:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

ডাৰ্ক ড্ৰপডাউনৰ বাবে চলকসমূহ :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

CSS-ভিত্তিয় কেৰেটসমূহৰ বাবে চলকসমূহ যি এটা ড্ৰপডাউনৰ পাৰস্পৰিক কাৰ্য্যকলাপ সূচায়:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

মিক্সিন

মিক্সিনসমূহ CSS-ভিত্তিয় কেৰেটসমূহ সৃষ্টি কৰিবলে ব্যৱহাৰ কৰা হয় আৰু ইয়াক scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

ব্যৱহাৰ

ডাটা বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি, ড্ৰপডাউন প্লাগ-ইনে মূলত .showশ্ৰেণী টগল কৰি লুকাই থকা বিষয়বস্তু (ড্ৰপডাউন মেনুসমূহ) টগল কৰে .dropdown-menu। data-bs-toggle="dropdown"এটা এপ্লিকেচন স্তৰত ড্ৰপডাউন মেনুসমূহ বন্ধ কৰাৰ বাবে বৈশিষ্ট্যটোৰ ওপৰত নিৰ্ভৰ কৰা হয়, গতিকে ইয়াক সদায় ব্যৱহাৰ কৰাটো এটা ভাল ধাৰণা ।

স্পৰ্শ-সামৰ্থবান ডিভাইচসমূহত, এটা ড্ৰপডাউন খোলে উপাদানৰ mouseoverতাৎক্ষণিক সন্তানসমূহত খালী হেণ্ডলাৰসমূহ যোগ কৰে। <body>এই স্বীকাৰ্য্যভাৱে কুৎসিত হেক iOS' ইভেন্ট প্ৰতিনিধি দল এটা quirk কাষে কাষে কাম কৰিবলৈ প্ৰয়োজনীয় , যি অন্যথা ড্ৰপডাউন বন্ধ যে ক'ড ট্ৰিগাৰ পৰা ড্ৰপডাউন বাহিৰৰ যিকোনো ঠাইত এটা টেপ বাধা দিব. এবাৰ ড্ৰপডাউন বন্ধ হ'লে, এই অতিৰিক্ত খালী mouseoverহেণ্ডলাৰসমূহ আঁতৰোৱা হয়।

ডাটা এট্ৰিবিউটৰ জৰিয়তে

data-bs-toggle="dropdown"এটা ড্ৰপডাউন টগল কৰিবলৈ এটা লিংক বা বুটামত যোগ কৰক ।

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

জাভাস্ক্রিপ্টৰ জৰিয়তে

জাভাস্ক্রিপ্টৰ জৰিয়তে ড্ৰপডাউনসমূহ কল কৰক:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`এতিয়াও প্ৰয়োজনীয়

আপুনি আপোনাৰ ড্ৰপডাউনক JavaScript ৰ যোগেদি কল কৰক বা ইয়াৰ পৰিবৰ্তে data-api ব্যৱহাৰ কৰক, data-bs-toggle="dropdown"ড্ৰপডাউনৰ ট্ৰিগাৰ উপাদানত সদায় উপস্থিত থকাটো প্ৰয়োজনীয়।

বিকল্পসমূহ

যিহেতু বিকল্পসমূহক তথ্য বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি, আপুনি এটা বিকল্পৰ নাম যোগ কৰিব পাৰে data-bs-, যেনে data-bs-animation="{value}". ডাটা বৈশিষ্ট্যসমূহৰ জৰিয়তে বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্পৰ নামৰ কেছৰ ধৰণ “ camelCase ” ৰ পৰা “ kebab-case ” লৈ সলনি কৰাটো নিশ্চিত কৰক । উদাহৰণস্বৰূপে, data-bs-custom-class="beautifier"ৰ পৰিবৰ্তে ব্যৱহাৰ কৰক data-bs-customClass="beautifier"।

Bootstrap 5.2.0 ৰ পৰা, সকলো উপাদানে এটা পৰীক্ষামূলক সংৰক্ষিত তথ্য বৈশিষ্ট্য সমৰ্থন কৰে data-bs-configযি এটা JSON স্ট্ৰিং হিচাপে সৰল অংশ বিন্যাস ৰাখিব পাৰে । যেতিয়া এটা উপাদানৰ data-bs-config='{"delay":0, "title":123}'আৰু data-bs-title="456"বৈশিষ্ট্যসমূহ থাকে, চূড়ান্ত titleমান হ'ব 456আৰু পৃথক তথ্য বৈশিষ্ট্যসমূহে ত দিয়া মানসমূহ অভাৰৰাইড কৰিব data-bs-config। ইয়াৰ উপৰিও, বৰ্ত্তমানৰ তথ্য বৈশিষ্ট্যসমূহে JSON মানসমূহ ৰ দৰে ৰাখিবলৈ সক্ষম data-bs-delay='{"show":0,"hide":150}'।

নাম	প্ৰকাৰ	ডিফল্ট	বিৱৰণ
`autoClose`	বুলিয়ান, ষ্ট্ৰিং	`true`	ড্ৰপডাউনৰ স্বয়ংক্ৰিয় বন্ধ আচৰণ বিন্যাস কৰক: `true`- ড্ৰপডাউন মেনুৰ বাহিৰত বা ভিতৰত ক্লিক কৰি ড্ৰপডাউন বন্ধ কৰা হ'ব। `false`- ড্ৰপডাউনটো টগল বুটাম ক্লিক কৰি আৰু হস্তচালিতভাৱে `hide`বা `toggle`পদ্ধতি কল কৰি বন্ধ কৰা হ'ব। (লগতে কি টিপিলে বন্ধ কৰা নহ'ব `esc`) `'inside'`- ড্ৰপডাউন মেনুৰ ভিতৰত ক্লিক কৰি ড্ৰপডাউন বন্ধ কৰা হ'ব (কেৱল)। `'outside'`- ড্ৰপডাউন মেনুৰ বাহিৰত ক্লিক কৰি ড্ৰপডাউন বন্ধ কৰা হ'ব (কেৱল)। টোকা: ড্ৰপডাউন সদায় `ESC`কি'ৰ সহায়ত বন্ধ কৰিব পাৰি।
`boundary`	ষ্ট্ৰিং, উপাদান	`'clippingParents'`	ড্ৰপডাউন মেনুৰ অভাৰফ্ল' বাধা সীমা (কেৱল Popper ৰ preventOverflow পৰিবৰ্তকৰ বাবে প্ৰযোজ্য)। অবিকল্পিতভাৱে ই `clippingParents`এটা HTMLElement প্ৰসংগ গ্ৰহণ কৰিব পাৰে (কেৱল JavaScript ৰ যোগেদি)। অধিক তথ্যৰ বাবে Popper ৰ detectOverflow নথিপত্ৰ চাওক ।
`display`	তাঁৰ	`'dynamic'`	অবিকল্পিতভাৱে, আমি গতিশীল অৱস্থানৰ বাবে Popper ব্যৱহাৰ কৰো। এইটো নিষ্ক্ৰিয় কৰক `static`.
`offset`	এৰে, ষ্ট্ৰিং, ফাংচন	`[0, 2]`	ইয়াৰ লক্ষ্যৰ সাপেক্ষে ড্ৰপডাউনৰ অফছেট। আপুনি তথ্য বৈশিষ্ট্যসমূহত এটা ষ্ট্ৰিং কমা পৃথক কৰা মানসমূহৰ সৈতে পাছ কৰিব পাৰে যেনে: `data-bs-offset="10,20"`। যেতিয়া এটা ফাংচন অফছেট নিৰ্ধাৰণ কৰিবলৈ ব্যৱহাৰ কৰা হয়, ইয়াক এটা বস্তুৰ সৈতে কল কৰা হয় য'ত পপাৰ প্লেচমেণ্ট, ৰেফাৰেন্স, আৰু পপাৰ ৰেক্টসমূহ ইয়াৰ প্ৰথম আৰ্গুমেণ্ট হিচাপে থাকে। ট্ৰিগাৰিং উপাদান DOM ন'ডক দ্বিতীয় যুক্তি হিচাপে পাছ কৰা হয়। ফাংচনে দুটা সংখ্যাৰ সৈতে এটা এৰে ঘূৰাই দিব লাগিব: skidding , distance । অধিক তথ্যৰ বাবে Popper's offset docs চাওক ।
`popperConfig`	শূন্য, বস্তু, ফাংচন	`null`	Bootstrap ৰ অবিকল্পিত Popper বিন্যাস সলনি কৰিবলে, Popper ৰ বিন্যাস চাওক । যেতিয়া এটা ফলন Popper বিন্যাস সৃষ্টি কৰিবলে ব্যৱহাৰ কৰা হয়, ইয়াক এটা বস্তুৰ সৈতে কল কৰা হয় যি Bootstrap ৰ অবিকল্পিত Popper বিন্যাস ধাৰণ কৰে । ই আপোনাক অবিকল্পিতক আপোনাৰ নিজৰ বিন্যাসৰ সৈতে ব্যৱহাৰ আৰু একত্ৰিত কৰাত সহায় কৰে । ফাংচনে Popper ৰ বাবে এটা বিন্যাস বস্তু ঘূৰাই দিব লাগিব।
`reference`	ষ্ট্ৰিং, উপাদান, বস্তু	`'toggle'`	ড্ৰপডাউন মেনুৰ প্ৰসংগ উপাদান। `'toggle'`, `'parent'`, এটা HTMLElement প্ৰসংগ বা এটা বস্তু প্ৰদান কৰা মানসমূহ গ্ৰহণ কৰে `getBoundingClientRect`। অধিক তথ্যৰ বাবে Popper ৰ নিৰ্মাতা নথিপত্ৰসমূহ আৰু ভাৰ্চুৱেল উপাদান নথিপত্ৰসমূহ চাওক ।

ৰ সৈতে ফাংচন ব্যৱহাৰ কৰা`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

পদ্ধতিসমূহ

প্রণালী	বিৱৰণ
`dispose`	এটা উপাদানৰ ড্ৰপডাউন ধ্বংস কৰে। (DOM উপাদানত সংৰক্ষিত তথ্য আঁতৰায়)
`getInstance`	স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত ড্ৰপডাউন উদাহৰণ পাবলৈ অনুমতি দিয়ে, আপুনি ইয়াক এনেদৰে ব্যৱহাৰ কৰিব পাৰে: `bootstrap.Dropdown.getInstance(element)`।
`getOrCreateInstance`	ষ্টেটিক পদ্ধতি যি এটা DOM উপাদানৰ সৈতে জড়িত এটা ড্ৰপডাউন উদাহৰণ ঘূৰাই দিয়ে বা এটা নতুন সৃষ্টি কৰে যদি ইয়াক আৰম্ভ কৰা হোৱা নাছিল। আপুনি ইয়াক এনেদৰে ব্যৱহাৰ কৰিব পাৰে: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	এটা প্ৰদত্ত নেভবাৰ বা টেব কৰা নেভিগেচনৰ ড্ৰপডাউন মেনু লুকুৱাই ৰাখে।
`show`	এটা প্ৰদত্ত নেভবাৰ বা টেব কৰা নেভিগেচনৰ ড্ৰপডাউন মেনু দেখুৱায়।
`toggle`	এটা প্ৰদত্ত নেভবাৰ বা টেব কৰা নেভিগেচনৰ ড্ৰপডাউন মেনু টগল কৰে।
`update`	এটা উপাদানৰ ড্ৰপডাউনৰ অৱস্থান আপডেইট কৰে।

ইভেন্টসমূহ

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

ইভেন্টৰ ধৰণ	বিৱৰণ
`hide.bs.dropdown`	`hide`ইনষ্টেন্স মেথড কল কৰাৰ পিছত তৎক্ষণাত ফায়াৰ কৰে ।
`hidden.bs.dropdown`	যেতিয়া ড্ৰপডাউন ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা শেষ হয় আৰু CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হয় তেতিয়া ফায়াৰ কৰা হয়।
`show.bs.dropdown`	`show`ইনষ্টেন্স মেথড কল কৰিলে তৎক্ষণাত ফায়াৰ কৰে ।
`shown.bs.dropdown`	যেতিয়া ড্ৰপডাউন ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় আৰু CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হয় তেতিয়া ফায়াৰ কৰা হয়।

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

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

অভাৰভিউ

অভিগম্যতা

উদাহৰণ

একক বুটাম

বিভাজন বুটাম

আকাৰ নিৰ্ধাৰণ

ডাৰ্ক ড্ৰপডাউন

নিৰ্দেশনা

আৰ টি এল

কেন্দ্ৰীভূত

ড্ৰপআপ

ড্ৰপআপ কেন্দ্ৰীভূত

ড্ৰপপেণ্ড

ড্ৰপষ্টাৰ্ট

মেনু বস্তুসমূহ

সক্ৰিয়

অক্ষম হোৱা

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

প্ৰতিক্ৰিয়াশীল প্ৰান্তিককৰণ

প্ৰান্তিককৰণ বিকল্পসমূহ

মেনুৰ বিষয়বস্তু

হেডাৰসমূহ

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

ডিভাইডাৰ

পাঠ্য

প্ৰপত্ৰসমূহ

ড্ৰপডাউন বিকল্পসমূহ

স্বয়ংক্ৰিয় বন্ধ আচৰণ

চি এছ এছ

চলকসমূহ

Sass চলকসমূহ

মিক্সিন

ব্যৱহাৰ

ডাটা এট্ৰিবিউটৰ জৰিয়তে

জাভাস্ক্রিপ্টৰ জৰিয়তে

data-bs-toggle="dropdown"এতিয়াও প্ৰয়োজনীয়

বিকল্পসমূহ

ৰ সৈতে ফাংচন ব্যৱহাৰ কৰাpopperConfig

পদ্ধতিসমূহ

ইভেন্টসমূহ

`data-bs-toggle="dropdown"`এতিয়াও প্ৰয়োজনীয়

ৰ সৈতে ফাংচন ব্যৱহাৰ কৰা`popperConfig`