ਡ੍ਰੌਪਡਾਊਨ

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

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

ਡ੍ਰੌਪਡਾਊਨ ਟੌਗਲ ਕਰਨ ਯੋਗ ਹਨ, ਲਿੰਕਾਂ ਦੀਆਂ ਸੂਚੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਪ੍ਰਸੰਗਿਕ ਓਵਰਲੇਅ ਅਤੇ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ। ਉਹਨਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬੂਟਸਟਰੈਪ ਡ੍ਰੌਪਡਾਉਨ 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 show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

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

ਸਭ ਤੋਂ ਵਧੀਆ ਗੱਲ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਇਹ ਕਿਸੇ ਵੀ ਬਟਨ ਵੇਰੀਐਂਟ ਨਾਲ ਵੀ ਕਰ ਸਕਦੇ ਹੋ:

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

ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ

ਇਸੇ ਤਰ੍ਹਾਂ, ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਬਣਾਉ, ਅਸਲ ਵਿੱਚ ਸਿੰਗਲ ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਦੇ ਸਮਾਨ ਮਾਰਕਅੱਪ ਦੇ ਨਾਲ, ਪਰ .dropdown-toggle-splitਡ੍ਰੌਪਡਾਉਨ ਕੈਰੇਟ ਦੇ ਆਲੇ ਦੁਆਲੇ ਸਹੀ ਸਪੇਸਿੰਗ ਦੇ ਨਾਲ ਜੋੜੋ।

paddingਅਸੀਂ ਇਸ ਵਾਧੂ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕੈਰੇਟ ਦੇ ਦੋਵੇਂ ਪਾਸੇ ਦੇ ਹਰੀਜੱਟਲ ਨੂੰ 25% ਤੱਕ ਘਟਾਉਣ ਲਈ ਕਰਦੇ ਹਾਂ ਅਤੇ margin-leftਨਿਯਮਤ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ ਲਈ ਜੋੜਿਆ ਗਿਆ ਹੈ। ਉਹ ਵਾਧੂ ਤਬਦੀਲੀਆਂ ਕੈਰੇਟ ਨੂੰ ਸਪਲਿਟ ਬਟਨ ਵਿੱਚ ਕੇਂਦਰਿਤ ਰੱਖਦੀਆਂ ਹਨ ਅਤੇ ਮੁੱਖ ਬਟਨ ਦੇ ਅੱਗੇ ਇੱਕ ਵਧੇਰੇ ਉਚਿਤ ਆਕਾਰ ਦਾ ਹਿੱਟ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ।

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

ਆਕਾਰ

ਬਟਨ ਡ੍ਰੌਪਡਾਉਨ ਸਾਰੇ ਆਕਾਰਾਂ ਦੇ ਬਟਨਾਂ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ, ਡਿਫੌਲਟ ਅਤੇ ਸਪਲਿਟ ਡ੍ਰੌਪਡਾਉਨ ਬਟਨਾਂ ਸਮੇਤ।

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

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

ਡ੍ਰੌਪਅੱਪ ਪਰਿਵਰਤਨ

ਮੂਲ ਤੱਤ ਨੂੰ ਜੋੜ ਕੇ ਤੱਤਾਂ ਦੇ ਉੱਪਰ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰੋ .dropup।

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

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

ਡ੍ਰੌਪਰਾਈਟ ਪਰਿਵਰਤਨ

ਮੂਲ ਤੱਤ ਵਿੱਚ ਜੋੜ ਕੇ ਤੱਤਾਂ ਦੇ ਸੱਜੇ ਪਾਸੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ .dropright।

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

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

ਬੂੰਦ-ਬੂੰਦ ਪਰਿਵਰਤਨ

ਮੂਲ ਤੱਤ ਵਿੱਚ ਜੋੜ ਕੇ ਤੱਤਾਂ ਦੇ ਖੱਬੇ ਪਾਸੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ .dropleft।

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

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

ਇਤਿਹਾਸਕ ਤੌਰ 'ਤੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਦੀਆਂ ਸਮੱਗਰੀਆਂ ਲਿੰਕ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਸਨ , ਪਰ ਹੁਣ v4 ਨਾਲ ਅਜਿਹਾ ਨਹੀਂ ਹੈ। ਹੁਣ ਤੁਸੀਂ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਸਿਰਫ਼ s <button>ਦੀ ਬਜਾਏ ਆਪਣੇ ਡ੍ਰੌਪਡਾਉਨ ਵਿੱਚ ਐਲੀਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।<a>

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

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

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

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

ਇੱਕ ਵਿਭਾਜਕ ਨਾਲ ਸੰਬੰਧਿਤ ਮੀਨੂ ਆਈਟਮਾਂ ਦੇ ਵੱਖਰੇ ਸਮੂਹ।

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

ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਦੇ ਅੰਦਰ ਇੱਕ ਫਾਰਮ ਰੱਖੋ, ਜਾਂ ਇਸਨੂੰ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਵਿੱਚ ਬਣਾਓ, ਅਤੇ ਇਸਨੂੰ ਤੁਹਾਡੇ ਲਈ ਲੋੜੀਂਦੀ ਨਕਾਰਾਤਮਕ ਥਾਂ ਦੇਣ ਲਈ ਮਾਰਜਿਨ ਜਾਂ ਪੈਡਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

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

.activeਡ੍ਰੌਪਡਾਉਨ ਵਿੱਚ ਆਈਟਮਾਂ ਨੂੰ ਸਰਗਰਮ ਵਜੋਂ ਸਟਾਈਲ ਕਰਨ ਲਈ ਉਹਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।

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

.disabledਡ੍ਰੌਪਡਾਉਨ ਵਿੱਚ ਆਈਟਮਾਂ ਨੂੰ ਅਯੋਗ ਵਜੋਂ ਸਟਾਈਲ ਕਰਨ ਲਈ ਉਹਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।

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

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਰਾਹੀਂ, ਡ੍ਰੌਪਡਾਉਨ ਪਲੱਗਇਨ .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>

JavaScript ਰਾਹੀਂ

JavaScript ਦੁਆਰਾ ਡਰਾਪਡਾਊਨ ਨੂੰ ਕਾਲ ਕਰੋ:

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

`data-toggle="dropdown"`ਅਜੇ ਵੀ ਲੋੜ ਹੈ

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-offset=""।

ਨਾਮ	ਟਾਈਪ ਕਰੋ	ਡਿਫਾਲਟ	ਵਰਣਨ
ਆਫਸੈੱਟ	ਨੰਬਰ \| ਸਤਰ \| ਫੰਕਸ਼ਨ	0	ਇਸਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰ ਡ੍ਰੌਪਡਾਊਨ ਦਾ ਆਫਸੈੱਟ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਆਫਸੈੱਟ ਡੌਕਸ ਵੇਖੋ ।
ਫਲਿੱਪ	ਬੁਲੀਅਨ	ਸੱਚ ਹੈ	ਸੰਦਰਭ ਤੱਤ 'ਤੇ ਓਵਰਲੈਪਿੰਗ ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ ਨੂੰ ਫਲਿੱਪ ਕਰਨ ਦਿਓ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਫਲਿੱਪ ਡੌਕਸ ਵੇਖੋ ।
ਸੀਮਾ	ਸਤਰ \| ਤੱਤ	'ਸਕ੍ਰੌਲ ਪੇਰੈਂਟ'	ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ ਸੀਮਾ। `'viewport'`, `'window'`, `'scrollParent'`, ਜਾਂ ਇੱਕ HTMLElement ਸੰਦਰਭ (ਸਿਰਫ਼ JavaScript) ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ । ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਡੌਕਸ ਵੇਖੋ ।

ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ boundaryਤੋਂ ਇਲਾਵਾ ਕਿਸੇ ਹੋਰ ਮੁੱਲ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ 'scrollParent', ਤਾਂ ਸ਼ੈਲੀ ਕੰਟੇਨਰ position: static'ਤੇ ਲਾਗੂ ਹੁੰਦੀ ਹੈ ।.dropdown

ਢੰਗ

ਵਿਧੀ	ਵਰਣਨ
`$().dropdown('toggle')`	ਦਿੱਤੇ ਗਏ ਨੇਵੀਬਾਰ ਜਾਂ ਟੈਬਡ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।
`$().dropdown('update')`	ਕਿਸੇ ਤੱਤ ਦੇ ਡ੍ਰੌਪਡਾਉਨ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ।
`$().dropdown('dispose')`	ਇੱਕ ਤੱਤ ਦੇ ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।

ਸਮਾਗਮ

ਸਾਰੇ ਡ੍ਰੌਪਡਾਉਨ ਇਵੈਂਟਸ .dropdown-menuਦੇ ਮੂਲ ਤੱਤ 'ਤੇ ਫਾਇਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਦੀ ਇੱਕ relatedTargetਵਿਸ਼ੇਸ਼ਤਾ ਹੁੰਦੀ ਹੈ, ਜਿਸਦਾ ਮੁੱਲ ਟੌਗਲ ਕਰਨ ਵਾਲਾ ਐਂਕਰ ਤੱਤ ਹੁੰਦਾ ਹੈ।

ਘਟਨਾ	ਵਰਣਨ
`show.bs.dropdown`	ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਸ਼ੋਅ ਇੰਸਟੈਂਸ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
`shown.bs.dropdown`	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ (ਪੂਰਾ ਹੋਣ ਲਈ CSS ਪਰਿਵਰਤਨ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
`hide.bs.dropdown`	ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਓਹਲੇ ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
`hidden.bs.dropdown`	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਡ੍ਰੌਪਡਾਉਨ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ (ਪੂਰਾ ਹੋਣ ਲਈ CSS ਪਰਿਵਰਤਨ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।

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

ਡ੍ਰੌਪਡਾਊਨ

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

ਪਹੁੰਚਯੋਗਤਾ

ਉਦਾਹਰਨਾਂ

ਸਿੰਗਲ ਬਟਨ ਡਰਾਪਡਾਊਨ

ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ

ਆਕਾਰ

ਡ੍ਰੌਪਅੱਪ ਪਰਿਵਰਤਨ

ਡ੍ਰੌਪਰਾਈਟ ਪਰਿਵਰਤਨ

ਬੂੰਦ-ਬੂੰਦ ਪਰਿਵਰਤਨ

ਮੀਨੂ ਆਈਟਮਾਂ

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

ਮੀਨੂ ਹੈਡਰ

ਮੀਨੂ ਡਿਵਾਈਡਰ

ਮੇਨੂ ਫਾਰਮ

ਕਿਰਿਆਸ਼ੀਲ ਮੀਨੂ ਆਈਟਮਾਂ

ਅਯੋਗ ਮੀਨੂ ਆਈਟਮਾਂ

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਰਾਹੀਂ

`data-toggle="dropdown"`ਅਜੇ ਵੀ ਲੋੜ ਹੈ

ਵਿਕਲਪ

ਢੰਗ

ਸਮਾਗਮ

ਡ੍ਰੌਪਡਾਊਨ

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

ਪਹੁੰਚਯੋਗਤਾ

ਉਦਾਹਰਨਾਂ

ਸਿੰਗਲ ਬਟਨ ਡਰਾਪਡਾਊਨ

ਸਪਲਿਟ ਬਟਨ ਡ੍ਰੌਪਡਾਊਨ

ਆਕਾਰ

ਡ੍ਰੌਪਅੱਪ ਪਰਿਵਰਤਨ

ਡ੍ਰੌਪਰਾਈਟ ਪਰਿਵਰਤਨ

ਬੂੰਦ-ਬੂੰਦ ਪਰਿਵਰਤਨ

ਮੀਨੂ ਆਈਟਮਾਂ

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

ਮੀਨੂ ਹੈਡਰ

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

ਮੀਨੂ ਡਿਵਾਈਡਰ

ਮੇਨੂ ਫਾਰਮ

ਕਿਰਿਆਸ਼ੀਲ ਮੀਨੂ ਆਈਟਮਾਂ

ਅਯੋਗ ਮੀਨੂ ਆਈਟਮਾਂ

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਰਾਹੀਂ

data-toggle="dropdown"ਅਜੇ ਵੀ ਲੋੜ ਹੈ

ਵਿਕਲਪ

ਢੰਗ

ਸਮਾਗਮ

`data-toggle="dropdown"`ਅਜੇ ਵੀ ਲੋੜ ਹੈ