ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡ್ರಾಪ್‌ಡೌನ್ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಂದರ್ಭೋಚಿತ ಓವರ್‌ಲೇಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಿ.

ಈ ಪುಟದಲ್ಲಿ

ಅವಲೋಕನ

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಟಾಗಲ್ ಮಾಡಬಹುದಾದ, ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿಗಳನ್ನು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಂದರ್ಭೋಚಿತ ಓವರ್‌ಲೇಗಳು. ಒಳಗೊಂಡಿರುವ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡ್ರಾಪ್‌ಡೌನ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಅವುಗಳನ್ನು ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮಾಡಲಾಗಿದೆ. ಅವುಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಟಾಗಲ್ ಮಾಡಲಾಗುತ್ತದೆ, ಸುಳಿದಾಡುವ ಮೂಲಕ ಅಲ್ಲ; ಇದು ಉದ್ದೇಶಪೂರ್ವಕ ವಿನ್ಯಾಸ ನಿರ್ಧಾರವಾಗಿದೆ .

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಲೈಬ್ರರಿ, ಪಾಪ್ಪರ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ , ಇದು ಡೈನಾಮಿಕ್ ಪೊಸಿಷನಿಂಗ್ ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ಪತ್ತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಮೊದಲು popper.min.js ಅನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ ಅಥವಾ ಪಾಪ್ಪರ್ ಅನ್ನು ಹೊಂದಿರುವ bootstrap.bundle.min.js/ ಅನ್ನು ಬಳಸಿ. bootstrap.bundle.jsಡೈನಾಮಿಕ್ ಪೊಸಿಷನಿಂಗ್ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಇರಿಸಲು ಪಾಪ್ಪರ್ ಅನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.

ಪ್ರವೇಶಿಸುವಿಕೆ

WAI ARIA ಮಾನದಂಡವು ನಿಜವಾದ role="menu"ವಿಜೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ , ಆದರೆ ಇದು ಕ್ರಿಯೆಗಳು ಅಥವಾ ಕಾರ್ಯಗಳನ್ನು ಪ್ರಚೋದಿಸುವ ಅಪ್ಲಿಕೇಶನ್-ರೀತಿಯ ಮೆನುಗಳಿಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿದೆ. ARIA ಮೆನುಗಳು ಮೆನು ಐಟಂಗಳು, ಚೆಕ್‌ಬಾಕ್ಸ್ ಮೆನು ಐಟಂಗಳು, ರೇಡಿಯೋ ಬಟನ್ ಮೆನು ಐಟಂಗಳು, ರೇಡಿಯೋ ಬಟನ್ ಗುಂಪುಗಳು ಮತ್ತು ಉಪ-ಮೆನುಗಳನ್ನು ಮಾತ್ರ ಒಳಗೊಂಡಿರಬಹುದು.

ಮತ್ತೊಂದೆಡೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಜೆನೆರಿಕ್ ಆಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ವಿವಿಧ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಮಾರ್ಕ್‌ಅಪ್ ರಚನೆಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಹುಡುಕಾಟ ಕ್ಷೇತ್ರಗಳು ಅಥವಾ ಲಾಗಿನ್ ಫಾರ್ಮ್‌ಗಳಂತಹ ಹೆಚ್ಚುವರಿ ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಿದೆ. ಈ ಕಾರಣಕ್ಕಾಗಿ, ನಿಜವಾದ ARIA ಮೆನುಗಳಿಗೆ ಅಗತ್ಯವಿರುವ ಯಾವುದೇ roleಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು Bootstrap ನಿರೀಕ್ಷಿಸುವುದಿಲ್ಲ (ಅಥವಾ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೇರಿಸುವುದಿಲ್ಲ) . ಲೇಖಕರು ಈ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸ್ವತಃ ಸೇರಿಸಿಕೊಳ್ಳಬೇಕು.aria-

ಆದಾಗ್ಯೂ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಹೆಚ್ಚಿನ ಪ್ರಮಾಣಿತ ಕೀಬೋರ್ಡ್ ಮೆನು ಸಂವಹನಗಳಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಸೇರಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ .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ಕ್ಯಾರೆಟ್‌ನ ಎರಡೂ ಬದಿಯಲ್ಲಿನ ಅಡ್ಡವನ್ನು 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-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ಅಸ್ತಿತ್ವದಲ್ಲಿರುವುದನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಗಾಢವಾದ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ .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

RTL ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸುವಾಗ ದಿಕ್ಕುಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲಾಗುತ್ತದೆ, ಅರ್ಥವು .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>

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೇಲಿನಿಂದ ಮತ್ತು ಅದರ ಪೋಷಕರ ಎಡಭಾಗದಲ್ಲಿ 100% ಸ್ಥಾನದಲ್ಲಿರುತ್ತದೆ. ನೀವು ಇದನ್ನು ದಿಕ್ಕಿನ ತರಗತಿಗಳೊಂದಿಗೆ ಬದಲಾಯಿಸಬಹುದು .drop*, ಆದರೆ ನೀವು ಅವುಗಳನ್ನು ಹೆಚ್ಚುವರಿ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳೊಂದಿಗೆ ನಿಯಂತ್ರಿಸಬಹುದು.

ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವನ್ನು ಬಲಕ್ಕೆ ಜೋಡಿಸಲು .dropdown-menu-enda ಗೆ ಸೇರಿಸಿ . .dropdown-menuRTL ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸುವಾಗ ದಿಕ್ಕುಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲಾಗುತ್ತದೆ, ಅರ್ಥವು .dropdown-menu-endಎಡಭಾಗದಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ.

ತಲೆ ಎತ್ತಿ! ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ಒಳಗೊಂಡಿರುವಾಗ ಹೊರತುಪಡಿಸಿ ಪಾಪ್ಪರ್‌ಗೆ ಧನ್ಯವಾದಗಳು.

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>

data-bs-display="static"ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಪಾಪ್ಪರ್ ಅನ್ನು ಬಳಸದ ಕಾರಣ ನೀವು ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಡ್ರಾಪ್‌ಡೌನ್ ಬಟನ್‌ಗಳಿಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .

ಜೋಡಣೆ ಆಯ್ಕೆಗಳು

ಮೇಲೆ ತೋರಿಸಿರುವ ಹೆಚ್ಚಿನ ಆಯ್ಕೆಗಳನ್ನು ತೆಗೆದುಕೊಂಡರೆ, ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ವಿವಿಧ ಡ್ರಾಪ್‌ಡೌನ್ ಜೋಡಣೆ ಆಯ್ಕೆಗಳ ಸಣ್ಣ ಕಿಚನ್ ಸಿಂಕ್ ಡೆಮೊ ಇಲ್ಲಿದೆ.

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>

CSS

ಅಸ್ಥಿರ

v5.2.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವಿಕಾಸಗೊಳ್ಳುತ್ತಿರುವ 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};

.dropdown-menu-darkCSS ವೇರಿಯೇಬಲ್‌ಗಳ ಮೂಲಕ ಗ್ರಾಹಕೀಕರಣವನ್ನು ನಾವು ನಕಲಿ 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};

ಸಾಸ್ ಅಸ್ಥಿರ

ಎಲ್ಲಾ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳಿಗೆ ವೇರಿಯೇಬಲ್‌ಗಳು:

$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> ಸುತ್ತಲೂ ಕೆಲಸ ಮಾಡಲು ಈ ಕೊಳಕು ಹ್ಯಾಕ್ ಅಗತ್ಯವಾಗಿದೆ , ಇದು ಡ್ರಾಪ್‌ಡೌನ್‌ನ ಹೊರಗೆ ಎಲ್ಲಿಯಾದರೂ ಟ್ಯಾಪ್ ಮಾಡುವುದನ್ನು ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಮುಚ್ಚುವ ಕೋಡ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಡ್ರಾಪ್‌ಡೌನ್ ಮುಚ್ಚಿದ ನಂತರ, ಈ ಹೆಚ್ಚುವರಿ ಖಾಲಿ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. 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-bs-toggle="dropdown", ಡ್ರಾಪ್‌ಡೌನ್‌ನ ಪ್ರಚೋದಕ ಅಂಶದಲ್ಲಿ ಯಾವಾಗಲೂ ಇರಬೇಕಾಗುತ್ತದೆ.

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದಾದ್ದರಿಂದ, ನೀವು ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಗೆ data-bs-ಸೇರಿಸಬಹುದು data-bs-animation="{value}". ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸುವಾಗ "ಒಂಟೆ ಕೇಸ್" ನಿಂದ "ಕಬಾಬ್-ಕೇಸ್" ಗೆ ಆಯ್ಕೆಯ ಹೆಸರಿನ ಕೇಸ್ ಪ್ರಕಾರವನ್ನು ಬದಲಾಯಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ . ಉದಾಹರಣೆಗೆ, data-bs-custom-class="beautifier"ಬದಲಿಗೆ ಬಳಸಿ data-bs-customClass="beautifier".

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 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`- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಹೊರಗೆ ಅಥವಾ ಒಳಗೆ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ. `falsehide`- ಟಾಗಲ್ ಬಟನ್ ಮತ್ತು ಹಸ್ತಚಾಲಿತವಾಗಿ ಕರೆ ಮಾಡುವ ಅಥವಾ `toggle`ವಿಧಾನದ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ . `esc`( ಕೀಲಿಯನ್ನು ಒತ್ತುವ ಮೂಲಕ ಸಹ ಮುಚ್ಚಲಾಗುವುದಿಲ್ಲ ) `'inside'`- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ (ಮಾತ್ರ). `'outside'`- ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ (ಮಾತ್ರ). ಗಮನಿಸಿ: ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಯಾವಾಗಲೂ `ESC`ಕೀಲಿಯೊಂದಿಗೆ ಮುಚ್ಚಬಹುದು.
`boundary`	ಸ್ಟ್ರಿಂಗ್, ಅಂಶ	`'clippingParents'`	ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನ ಓವರ್‌ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ (ಪಾಪರ್‌ನ ಪ್ರಿವೆಂಟ್‌ಓವರ್‌ಫ್ಲೋ ಮಾರ್ಪಾಡುಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ). ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಇದು `clippingParents`HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖವನ್ನು ಸ್ವೀಕರಿಸಬಹುದು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್‌ನ ಡಿಟೆಕ್ಟ್‌ಓವರ್‌ಫ್ಲೋ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
`display`	ಸ್ಟ್ರಿಂಗ್	`'dynamic'`	ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಡೈನಾಮಿಕ್ ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ ನಾವು ಪಾಪ್ಪರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ `static`.
`offset`	ಅರೇ, ಸ್ಟ್ರಿಂಗ್, ಫಂಕ್ಷನ್	`[0, 2]`	ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಡ್ರಾಪ್‌ಡೌನ್‌ನ ಆಫ್‌ಸೆಟ್. ನೀವು ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಿದ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ರವಾನಿಸಬಹುದು `data-bs-offset="10,20"`: ಆಫ್‌ಸೆಟ್ ಅನ್ನು ನಿರ್ಧರಿಸಲು ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿದಾಗ, ಪಾಪ್ಪರ್ ಪ್ಲೇಸ್‌ಮೆಂಟ್, ರೆಫರೆನ್ಸ್ ಮತ್ತು ಪಾಪ್ಪರ್ ರೆಕ್ಟ್‌ಗಳನ್ನು ಅದರ ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ಪ್ರಚೋದಿಸುವ ಅಂಶ DOM ನೋಡ್ ಅನ್ನು ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸಲಾಗಿದೆ. ಕಾರ್ಯವು ಎರಡು ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಸರಣಿಯನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು: ಸ್ಕಿಡ್ಡಿಂಗ್ , ದೂರ . ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್‌ನ ಆಫ್‌ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
`popperConfig`	ಶೂನ್ಯ, ವಸ್ತು, ಕಾರ್ಯ	`null`	ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಸಂರಚನೆಯನ್ನು ಬದಲಾಯಿಸಲು, ಪಾಪ್ಪರ್‌ನ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೋಡಿ . ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ರಚಿಸಲು ಕಾರ್ಯವನ್ನು ಬಳಸಿದಾಗ, ಅದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಪಾಪ್ಪರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ಸ್ವಂತ ಕಾನ್ಫಿಗರೇಶನ್‌ನೊಂದಿಗೆ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಬಳಸಲು ಮತ್ತು ವಿಲೀನಗೊಳಿಸಲು ಇದು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಕಾರ್ಯವು ಪಾಪ್ಪರ್‌ಗಾಗಿ ಕಾನ್ಫಿಗರೇಶನ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು.
`reference`	ಸ್ಟ್ರಿಂಗ್, ಅಂಶ, ವಸ್ತು	`'toggle'`	ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನ ಉಲ್ಲೇಖ ಅಂಶ. `'toggle'`, `'parent'`, ಒಂದು HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖ ಅಥವಾ ಒದಗಿಸುವ ವಸ್ತುವಿನ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ `getBoundingClientRect`. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಪಾಪ್ಪರ್‌ನ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್ ಡಾಕ್ಸ್ ಮತ್ತು ವರ್ಚುವಲ್ ಎಲಿಮೆಂಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .

ಇದರೊಂದಿಗೆ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದು`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ಆದ್ದರಿಂದ ನೀವು ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಪೋಷಕ ಅಂಶದಲ್ಲಿ ಸೇರಿಸಬಹುದು . 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...
})

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಅವಲೋಕನ

ಪ್ರವೇಶಿಸುವಿಕೆ

ಉದಾಹರಣೆಗಳು

ಏಕ ಬಟನ್

ಸ್ಪ್ಲಿಟ್ ಬಟನ್

ಗಾತ್ರ

ಡಾರ್ಕ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ನಿರ್ದೇಶನಗಳು

RTL

ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ

ಡ್ರಾಪ್ಅಪ್

ಡ್ರಾಪ್ಅಪ್ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ

ಡ್ರಾಪೆಂಡ್

ಡ್ರಾಪ್‌ಸ್ಟಾರ್ಟ್

ಮೆನು ಐಟಂಗಳು

ಸಕ್ರಿಯ

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ

ಮೆನು ಜೋಡಣೆ

ರೆಸ್ಪಾನ್ಸಿವ್ ಜೋಡಣೆ

ಜೋಡಣೆ ಆಯ್ಕೆಗಳು

ಮೆನು ವಿಷಯ

ಹೆಡರ್‌ಗಳು

ವಿಭಾಜಕಗಳು

ಪಠ್ಯ

ರೂಪಗಳು

ಸ್ವಯಂ ನಿಕಟ ನಡವಳಿಕೆ

CSS

ಅಸ್ಥಿರ

ಸಾಸ್ ಅಸ್ಥಿರ

ಮಿಕ್ಸಿನ್ಸ್

ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

`data-bs-toggle="dropdown"`ಇನ್ನೂ ಅಗತ್ಯವಿದೆ

ಆಯ್ಕೆಗಳು

ಇದರೊಂದಿಗೆ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದು`popperConfig`

ವಿಧಾನಗಳು

ಕಾರ್ಯಕ್ರಮಗಳು

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಅವಲೋಕನ

ಪ್ರವೇಶಿಸುವಿಕೆ

ಉದಾಹರಣೆಗಳು

ಏಕ ಬಟನ್

ಸ್ಪ್ಲಿಟ್ ಬಟನ್

ಗಾತ್ರ

ಡಾರ್ಕ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ನಿರ್ದೇಶನಗಳು

RTL

ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ

ಡ್ರಾಪ್ಅಪ್

ಡ್ರಾಪ್ಅಪ್ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ

ಡ್ರಾಪೆಂಡ್

ಡ್ರಾಪ್‌ಸ್ಟಾರ್ಟ್

ಮೆನು ಐಟಂಗಳು

ಸಕ್ರಿಯ

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ

ಮೆನು ಜೋಡಣೆ

ರೆಸ್ಪಾನ್ಸಿವ್ ಜೋಡಣೆ

ಜೋಡಣೆ ಆಯ್ಕೆಗಳು

ಮೆನು ವಿಷಯ

ಹೆಡರ್‌ಗಳು

ಡ್ರಾಪ್‌ಡೌನ್ ಹೆಡರ್

ವಿಭಾಜಕಗಳು

ಪಠ್ಯ

ರೂಪಗಳು

ಡ್ರಾಪ್‌ಡೌನ್ ಆಯ್ಕೆಗಳು

ಸ್ವಯಂ ನಿಕಟ ನಡವಳಿಕೆ

CSS

ಅಸ್ಥಿರ

ಸಾಸ್ ಅಸ್ಥಿರ

ಮಿಕ್ಸಿನ್ಸ್

ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

data-bs-toggle="dropdown"ಇನ್ನೂ ಅಗತ್ಯವಿದೆ

ಆಯ್ಕೆಗಳು

ಇದರೊಂದಿಗೆ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದುpopperConfig

ವಿಧಾನಗಳು

ಕಾರ್ಯಕ್ರಮಗಳು

`data-bs-toggle="dropdown"`ಇನ್ನೂ ಅಗತ್ಯವಿದೆ

ಇದರೊಂದಿಗೆ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದು`popperConfig`