Source

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

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

ಅವಲೋಕನ

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

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

ನೀವು ಮೂಲದಿಂದ ನಮ್ಮ JavaScript ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಅದಕ್ಕೆ ಅಗತ್ಯವಿದೆutil.js .

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

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

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

ಬಳಕೆ

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

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಕರೆ ಮಾಡಿ:

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

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

ನೀವು JavaScript ಮೂಲಕ ನಿಮ್ಮ ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಕರೆಯುತ್ತೀರಾ ಅಥವಾ ಬದಲಿಗೆ ಡೇಟಾ-ಎಪಿಐ ಅನ್ನು ಬಳಸುತ್ತಿರಲಿ data-toggle="dropdown", ಡ್ರಾಪ್‌ಡೌನ್‌ನ ಪ್ರಚೋದಕ ಅಂಶದಲ್ಲಿ ಯಾವಾಗಲೂ ಇರಬೇಕಾಗುತ್ತದೆ.

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-offset="".

ಹೆಸರು	ಮಾದರಿ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
ಆಫ್ಸೆಟ್	ಸಂಖ್ಯೆ \| ದಾರ \| ಕಾರ್ಯ	0	ಅದರ ಗುರಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಡ್ರಾಪ್‌ಡೌನ್‌ನ ಆಫ್‌ಸೆಟ್. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ಆಫ್‌ಸೆಟ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
ತಿರುಗಿಸು	ಬೂಲಿಯನ್	ನಿಜ	ಉಲ್ಲೇಖ ಅಂಶದ ಮೇಲೆ ಅತಿಕ್ರಮಿಸುವ ಸಂದರ್ಭದಲ್ಲಿ ಫ್ಲಿಪ್ ಮಾಡಲು ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಅನುಮತಿಸಿ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ Popper.js ನ ಫ್ಲಿಪ್ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ .
ಗಡಿ	ದಾರ \| ಅಂಶ	'ಸ್ಕ್ರೋಲ್ ಪೇರೆಂಟ್'	ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನ ಓವರ್‌ಫ್ಲೋ ನಿರ್ಬಂಧದ ಗಡಿ. `'viewport'`, `'window'`, `'scrollParent'`, ಅಥವಾ HTML ಎಲಿಮೆಂಟ್ ಉಲ್ಲೇಖದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾತ್ರ). ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ 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…
})

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

ಅವಲೋಕನ

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

ಉದಾಹರಣೆಗಳು

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

ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಗಾತ್ರ

ಡ್ರಾಪ್ಅಪ್ ಬದಲಾವಣೆ

ಡ್ರಾಪ್ರೈಟ್ ವ್ಯತ್ಯಾಸ

ಡ್ರಾಪ್ಲೆಫ್ಟ್ ವ್ಯತ್ಯಾಸ

ಮೆನು ಐಟಂಗಳು

ಮೆನು ಜೋಡಣೆ

ಮೆನು ಹೆಡರ್

ಮೆನು ವಿಭಾಜಕಗಳು

ಮೆನು ರೂಪಗಳು

ಸಕ್ರಿಯ ಮೆನು ಐಟಂಗಳು

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಮೆನು ಐಟಂಗಳು

ಬಳಕೆ

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

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

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

ಆಯ್ಕೆಗಳು

ವಿಧಾನಗಳು

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

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

ಅವಲೋಕನ

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

ಉದಾಹರಣೆಗಳು

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

ಸ್ಪ್ಲಿಟ್ ಬಟನ್ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಗಾತ್ರ

ಡ್ರಾಪ್ಅಪ್ ಬದಲಾವಣೆ

ಡ್ರಾಪ್ರೈಟ್ ವ್ಯತ್ಯಾಸ

ಡ್ರಾಪ್ಲೆಫ್ಟ್ ವ್ಯತ್ಯಾಸ

ಮೆನು ಐಟಂಗಳು

ಮೆನು ಜೋಡಣೆ

ಮೆನು ಹೆಡರ್

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

ಮೆನು ವಿಭಾಜಕಗಳು

ಮೆನು ರೂಪಗಳು

ಸಕ್ರಿಯ ಮೆನು ಐಟಂಗಳು

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಮೆನು ಐಟಂಗಳು

ಬಳಕೆ

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

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

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

ಆಯ್ಕೆಗಳು

ವಿಧಾನಗಳು

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

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