ਡ੍ਰੌਪਡਾਊਨ

ਬੂਟਸਟਰੈਪ ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ ਨਾਲ ਲਿੰਕਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਅਤੇ ਹੋਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਪ੍ਰਸੰਗਿਕ ਓਵਰਲੇ ਨੂੰ ਟੌਗਲ ਕਰੋ।

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਡ੍ਰੌਪਡਾਊਨ ਟੌਗਲ ਕਰਨ ਯੋਗ ਹਨ, ਲਿੰਕਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਪ੍ਰਸੰਗਿਕ ਓਵਰਲੇਅ ਅਤੇ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ। ਉਹਨਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬੂਟਸਟਰੈਪ ਡ੍ਰੌਪਡਾਉਨ JavaScript ਪਲੱਗਇਨ ਨਾਲ ਇੰਟਰਐਕਟਿਵ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਉਹ ਕਲਿੱਕ ਕਰਕੇ ਟੌਗਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਨਾ ਕਿ ਹੋਵਰ ਕਰਕੇ; ਇਹ ਇੱਕ ਜਾਣਬੁੱਝ ਕੇ ਡਿਜ਼ਾਇਨ ਦਾ ਫੈਸਲਾ ਹੈ।

ਡ੍ਰੌਪਡਾਉਨ ਇੱਕ ਤੀਜੀ ਧਿਰ ਦੀ ਲਾਇਬ੍ਰੇਰੀ, Popper.js 'ਤੇ ਬਣਾਏ ਗਏ ਹਨ , ਜੋ ਗਤੀਸ਼ੀਲ ਸਥਿਤੀ ਅਤੇ ਵਿਊਪੋਰਟ ਖੋਜ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। Bootstrap ਦੀ JavaScript ਤੋਂ ਪਹਿਲਾਂ popper.min.js ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ਜਾਂ bootstrap.bundle.min.js/ bootstrap.bundle.jsਜਿਸ ਵਿੱਚ Popper.js ਸ਼ਾਮਲ ਹੋਵੇ। Popper.js ਦੀ ਵਰਤੋਂ navbars ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਦੀ ਸਥਿਤੀ ਲਈ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਹਾਲਾਂਕਿ ਗਤੀਸ਼ੀਲ ਸਥਿਤੀ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ JavaScript ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਦੀ ਲੋੜ ਹੈ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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ, ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਆਪਣੇ ਆਪ 100% ਉੱਪਰ ਤੋਂ ਅਤੇ ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਖੱਬੇ ਪਾਸੇ ਸਥਿਤ ਹੁੰਦਾ ਹੈ। ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਸੱਜੇ ਅਲਾਈਨ ਕਰਨ .dropdown-menu-rightਲਈ a ਵਿੱਚ ਜੋੜੋ ।.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>

ਜਵਾਬਦੇਹ ਅਲਾਈਨਮੈਂਟ

ਜੇਕਰ ਤੁਸੀਂ ਜਵਾਬਦੇਹ ਅਲਾਈਨਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ data-display="static"ਗੁਣ ਜੋੜ ਕੇ ਗਤੀਸ਼ੀਲ ਸਥਿਤੀ ਨੂੰ ਅਯੋਗ ਕਰੋ ਅਤੇ ਜਵਾਬਦੇਹ ਪਰਿਵਰਤਨ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਦਿੱਤੇ ਗਏ ਬ੍ਰੇਕਪੁਆਇੰਟ ਜਾਂ ਵੱਡੇ ਨਾਲ ਸੱਜੇ ਪਾਸੇ ਇਕਸਾਰ ਕਰਨ ਲਈ , ਜੋੜੋ .dropdown-menu{-sm|-md|-lg|-xl}-right।

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਦਿੱਤੇ ਗਏ ਬ੍ਰੇਕਪੁਆਇੰਟ ਜਾਂ ਵੱਡੇ ਨਾਲ ਖੱਬੇ ਪਾਸੇ ਇਕਸਾਰ ਕਰਨ ਲਈ , ਜੋੜੋ .dropdown-menu-rightਅਤੇ .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

ਨੋਟ ਕਰੋ ਕਿ ਤੁਹਾਨੂੰ navbars ਵਿੱਚ ਡ੍ਰੌਪਡਾਉਨ ਬਟਨਾਂ ਵਿੱਚ ਕੋਈ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ data-display="static", ਕਿਉਂਕਿ Popper.js ਦੀ ਵਰਤੋਂ navbars ਵਿੱਚ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਸਿਰਲੇਖ

ਕਿਸੇ ਵੀ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ ਕਾਰਵਾਈਆਂ ਦੇ ਭਾਗਾਂ ਨੂੰ ਲੇਬਲ ਕਰਨ ਲਈ ਇੱਕ ਸਿਰਲੇਖ ਸ਼ਾਮਲ ਕਰੋ।

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

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

ਡ੍ਰੌਪਡਾਊਨ ਦਾ ਸਥਾਨ ਬਦਲਣ ਲਈ 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>

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਰਾਹੀਂ, ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ .showਮਾਤਾ-ਪਿਤਾ ਸੂਚੀ ਆਈਟਮ 'ਤੇ ਕਲਾਸ ਨੂੰ ਟੌਗਲ ਕਰਕੇ ਲੁਕੀ ਹੋਈ ਸਮੱਗਰੀ (ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ) ਨੂੰ ਟੌਗਲ ਕਰਦੀ ਹੈ। ਐਪਲੀਕੇਸ਼ਨ ਪੱਧਰ 'ਤੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ data-toggle="dropdown"ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਭਰੋਸਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਸਲਈ ਇਸਨੂੰ ਹਮੇਸ਼ਾ ਵਰਤਣਾ ਇੱਕ ਚੰਗਾ ਵਿਚਾਰ ਹੈ।

On touch-enabled devices, opening a dropdown adds empty ($.noop) mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a 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>

Via JavaScript

Call the dropdowns via JavaScript:

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

`data-toggle="dropdown"` still required

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown’s trigger element.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name	Type	Default	Description
offset	number \| string \| function	0	Offset of the dropdown relative to its target. When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument. For more information refer to Popper.js's offset docs.
flip	boolean	true	Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
boundary	string \| element	'scrollParent'	Overflow constraint boundary of the dropdown menu. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
reference	string \| element	'toggle'	Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display	string	'dynamic'	By default, we use Popper.js for dynamic positioning. Disable this with `static`.

Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.

Methods

Method	Description
`$().dropdown('toggle')`	Toggles the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('show')`	Shows the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('hide')`	Hides the dropdown menu of a given navbar or tabbed navigation.
`$().dropdown('update')`	Updates the position of an element’s dropdown.
`$().dropdown('dispose')`	Destroys an element’s dropdown.

Events

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original event type is click) that contains an Event Object for the click event.

Event	Description
`show.bs.dropdown`	This event fires immediately when the show instance method is called.
`shown.bs.dropdown`	This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
`hide.bs.dropdown`	ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਓਹਲੇ ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
`hidden.bs.dropdown`	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ (ਪੂਰਾ ਹੋਣ ਲਈ CSS ਪਰਿਵਰਤਨ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।

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

ਡ੍ਰੌਪਡਾਊਨ

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਪਹੁੰਚਯੋਗਤਾ

ਉਦਾਹਰਨਾਂ

ਸਿੰਗਲ ਬਟਨ

ਸਪਲਿਟ ਬਟਨ

ਆਕਾਰ

ਦਿਸ਼ਾਵਾਂ

ਡਰਾਪਅੱਪ

ਡ੍ਰੌਪਰਾਈਟ

ਬੂੰਦ-ਬੂੰਦ

ਮੀਨੂ ਆਈਟਮਾਂ

ਕਿਰਿਆਸ਼ੀਲ

ਅਯੋਗ

ਮੀਨੂ ਅਲਾਈਨਮੈਂਟ

ਜਵਾਬਦੇਹ ਅਲਾਈਨਮੈਂਟ

ਮੀਨੂ ਸਮੱਗਰੀ

ਸਿਰਲੇਖ

ਡਿਵਾਈਡਰ

ਟੈਕਸਟ

ਫਾਰਮ

ਵਰਤੋਂ

Via data attributes

Via JavaScript

`data-toggle="dropdown"` still required

Options

Methods

Events

ਡ੍ਰੌਪਡਾਊਨ

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਪਹੁੰਚਯੋਗਤਾ

ਉਦਾਹਰਨਾਂ

ਸਿੰਗਲ ਬਟਨ

ਸਪਲਿਟ ਬਟਨ

ਆਕਾਰ

ਦਿਸ਼ਾਵਾਂ

ਡਰਾਪਅੱਪ

ਡ੍ਰੌਪਰਾਈਟ

ਬੂੰਦ-ਬੂੰਦ

ਮੀਨੂ ਆਈਟਮਾਂ

ਕਿਰਿਆਸ਼ੀਲ

ਅਯੋਗ

ਮੀਨੂ ਅਲਾਈਨਮੈਂਟ

ਜਵਾਬਦੇਹ ਅਲਾਈਨਮੈਂਟ

ਮੀਨੂ ਸਮੱਗਰੀ

ਸਿਰਲੇਖ

ਡ੍ਰੌਪਡਾਊਨ ਹੈਡਰ

ਡਿਵਾਈਡਰ

ਟੈਕਸਟ

ਫਾਰਮ

ਡ੍ਰੌਪਡਾਉਨ ਵਿਕਲਪ

ਵਰਤੋਂ

Via data attributes

Via JavaScript

data-toggle="dropdown" still required

Options

Methods

Events

`data-toggle="dropdown"` still required