in English

ଡ୍ରପଡାଉନ୍

ବୁଟଷ୍ଟ୍ରାପ୍ ଡ୍ରପ୍ ଡାଉନ୍ ପ୍ଲଗଇନ୍ ସହିତ ଲିଙ୍କଗୁଡ଼ିକର ତାଲିକା ଏବଂ ଅଧିକ ପ୍ରଦର୍ଶନ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ଓଭରଲେଜ୍ ଟୋଗଲ୍ କରନ୍ତୁ |

ସମୀକ୍ଷା

ଡ୍ରପ୍ ଡାଉନ୍ ଗୁଡିକ ଟୋଗଲ୍ ଯୋଗ୍ୟ, ଲିଙ୍କଗୁଡିକର ତାଲିକା ପ୍ରଦର୍ଶନ ପାଇଁ ବିଷୟବସ୍ତୁ ଓଭରଲେଜ୍ | ସେଗୁଡିକ ଅନ୍ତର୍ଭୁକ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ଡ୍ରପଡାଉନ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଇଣ୍ଟରାକ୍ଟିଭ୍ କରାଯାଇଛି | ସେମାନେ କ୍ଲିକ୍ କରି ଟୋଗଲ୍ ହୋଇଛନ୍ତି, ଘୁଞ୍ଚିବା ଦ୍ୱାରା ନୁହେଁ; ଏହା ଏକ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଡିଜାଇନ୍ ନିଷ୍ପତ୍ତି |

ଡ୍ରପଡାଉନ୍ ଏକ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ, ପପର୍ ଉପରେ ନିର୍ମିତ , ଯାହା ଗତିଶୀଳ ପୋଜିସନ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ଚିହ୍ନଟ ପ୍ରଦାନ କରିଥାଏ | ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ପୂର୍ବରୁ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ କିମ୍ବା ବ୍ୟବହାର bootstrap.bundle.min.js/ bootstrap.bundle.jsଯାହା ପପର୍ ଧାରଣ କରେ | ନାପର୍ ରେ ଡ୍ରପ୍ ଡାଉନ୍ ପୋଜିସନ୍ ପାଇଁ ପପର୍ ବ୍ୟବହୃତ ହୁଏ ନାହିଁ ଯଦିଓ ଗତିଶୀଳ ପୋଜିସନ୍ ଆବଶ୍ୟକ ନାହିଁ |

ଯଦି ଆପଣ ଉତ୍ସରୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେutil.js |

ଅଭିଗମ୍ୟତା

WAI ARIA ମାନକ ଏକ ପ୍ରକୃତ ୱିଜେଟ୍ ବ୍ୟାଖ୍ୟା କରେ , role="menu"କିନ୍ତୁ ଏହା ପ୍ରୟୋଗ ପରି ମେନୁ ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ ଯାହାକି କାର୍ଯ୍ୟ କିମ୍ବା କାର୍ଯ୍ୟକୁ ଟ୍ରିଗର କରିଥାଏ | ARIA ମେନୁଗୁଡ଼ିକ କେବଳ ମେନୁ ଆଇଟମ୍, ଚେକ୍ ବକ୍ସ ମେନୁ ଆଇଟମ୍, ରେଡିଓ ବଟନ୍ ମେନୁ ଆଇଟମ୍, ରେଡିଓ ବଟନ୍ ଗୋଷ୍ଠୀ, ଏବଂ ସବ୍-ମେନୁ ଧାରଣ କରିପାରିବ |

ଅନ୍ୟପକ୍ଷରେ, ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡ୍ରପଡାଉନ୍ ଗୁଡିକ ଜେନେରିକ୍ ଏବଂ ବିଭିନ୍ନ ପରିସ୍ଥିତି ଏବଂ ମାର୍କଅପ୍ ଗଠନ ପାଇଁ ପ୍ରଯୁଜ୍ୟ ହେବା ପାଇଁ ଡିଜାଇନ୍ କରାଯାଇଛି | ଉଦାହରଣ ସ୍ୱରୂପ, ଡ୍ରପଡାଉନ୍ ସୃଷ୍ଟି କରିବା ସମ୍ଭବ, ଯେଉଁଥିରେ ଅତିରିକ୍ତ ଇନପୁଟ୍ ଏବଂ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ଥାଏ, ଯେପରିକି ସନ୍ଧାନ କ୍ଷେତ୍ର କିମ୍ବା ଲଗଇନ୍ ଫର୍ମ | ଏହି କାରଣରୁ, ପ୍ରକୃତ ARIA ମେନୁଗୁଡ଼ିକ ପାଇଁ ଆବଶ୍ୟକ ହେଉଥିବା କ and ଣସି ଗୁଣ roleଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଶା କରେ ନାହିଁ (କିମ୍ବା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଯୋଗ କରେ ନାହିଁ) | ଲେଖକମାନଙ୍କୁ ଏହି ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଗୁଣଗୁଡିକ ନିଜେ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ |aria-

ତଥାପି, ବୁଟଷ୍ଟ୍ରାପ୍ ଅଧିକାଂଶ ମାନକ କୀବୋର୍ଡ୍ ମେନୁ ପାରସ୍ପରିକ କାର୍ଯ୍ୟ ପାଇଁ ବିଲ୍ଟ-ଇନ୍ ସମର୍ଥନ ଯୋଗ କରିଥାଏ, ଯେପରିକି .dropdown-itemକର୍ସର୍ କି ବ୍ୟବହାର କରି ବ୍ୟକ୍ତିଗତ ଉପାଦାନ ଦେଇ ଗତି କରିବାର କ୍ଷମତା ଏବଂ ଚାବି ସହିତ ମେନୁ ବନ୍ଦ କରିବା ESC|

ଉଦାହରଣଗୁଡିକ

ଡ୍ରପଡାଉନ୍ ର ଟୋଗଲ୍ (ତୁମର ବଟନ୍ କିମ୍ବା ଲିଙ୍କ୍) ଏବଂ ଡ୍ରପଡାଉନ୍ ମେନୁକୁ .dropdown, କିମ୍ବା ଘୋଷଣା କରୁଥିବା ଅନ୍ୟ ଏକ ଉପାଦାନକୁ ଗୁଡ଼ାଇ ରଖ position: relative;| ଆପଣଙ୍କ ସମ୍ଭାବ୍ୟ ଆବଶ୍ୟକତାକୁ ଭଲ ଭାବରେ ଫିଟ୍ କରିବା ପାଇଁ ଡ୍ରପଡାଉନ୍ <a>କିମ୍ବା ଉପାଦାନରୁ ଟ୍ରିଗର ହୋଇପାରେ |<button>

ଏକକ ବଟନ୍ |

ଯେକ Any ଣସି ସିଙ୍ଗଲ୍ .btnକିଛି ମାର୍କଅପ୍ ପରିବର୍ତ୍ତନ ସହିତ ଏକ ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ ରେ ପରିଣତ ହୋଇପାରେ | ଏଠାରେ ଆପଣ କିପରି ଉଭୟ ଉପାଦାନ ସହିତ କାର୍ଯ୍ୟ କରିବାକୁ ରଖିପାରିବେ ତାହା ଏଠାରେ ଅଛି <button>:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

ଏବଂ <a>ଉପାଦାନଗୁଡିକ ସହିତ:

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

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

ସର୍ବୋତ୍ତମ ଅଂଶ ହେଉଛି ଆପଣ ଯେକ any ଣସି ବଟନ୍ ପ୍ରକାର ସହିତ ଏହା କରିପାରିବେ:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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-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-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-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-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-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-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-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-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-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-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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>

Histor ତିହାସିକ ଭାବରେ ଡ୍ରପଡାଉନ୍ ମେନୁ ବିଷୟବସ୍ତୁଗୁଡ଼ିକ ଲିଙ୍କ୍ ହେବା ଆବଶ୍ୟକ ଥିଲା , କିନ୍ତୁ v4 ସହିତ ତାହା ଆଉ ନୁହେଁ | ବର୍ତ୍ତମାନ ଆପଣ ବ s <button>କଳ୍ପିକ ଭାବରେ କେବଳ s ପରିବର୍ତ୍ତେ ଆପଣଙ୍କ ଡ୍ରପଡାଉନ୍ ରେ ଉପାଦାନ ବ୍ୟବହାର କରିପାରିବେ <a>|

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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 କିମ୍ବା ପାଠ୍ୟ ଉପଯୋଗୀତା ସହିତ ଅଧିକ ଶ style ଳୀ କରିବାକୁ ମୁକ୍ତ ମନେ କରନ୍ତୁ |

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

ସକ୍ରିୟ |

ସେଗୁଡିକୁ ସକ୍ରିୟ ଭାବରେ ଶ style.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>

ଅକ୍ଷମ

ସେମାନଙ୍କୁ ଅକ୍ଷମ ଭାବରେ ଶ style.disabled ଳୀ କରିବାକୁ ଡ୍ରପଡାଉନରେ ଥିବା ଆଇଟମଗୁଡିକରେ ଯୋଡନ୍ତୁ |

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

ଡିଫଲ୍ଟ ଭାବରେ, ଏକ ଡ୍ରପଡାଉନ୍ ମେନୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଉପରରୁ ଏବଂ ଏହାର ପିତାମାତାଙ୍କ ବାମ ପାର୍ଶ୍ୱରେ 100% ସ୍ଥାନିତ ହୁଏ | ଡ୍ରପଡାଉନ୍ ମେନୁକୁ ଡାହାଣକୁ ଆଲାଇନ୍ .dropdown-menu-rightକରିବାକୁ ଏକ ଯୋଡନ୍ତୁ |.dropdown-menu

ମୁଣ୍ଡ ଉପରକୁ! ଡ୍ରପ୍ ଡାଉନ୍ ଗୁଡିକ ପପର୍ ପାଇଁ ଧନ୍ୟବାଦ ଅର୍ପଣ କରାଯାଇଛି (ଏହା ବ୍ୟତୀତ ଯେତେବେଳେ ସେମାନେ ଏକ ନାଭବାର୍ ରେ ରହିଥା’ନ୍ତି) |
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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-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>

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ନାଭବାରରେ ଡ୍ରପଡାଉନ୍ ବଟନ୍ଗୁଡ଼ିକରେ ଆପଣଙ୍କୁ ଏକ ଗୁଣ ଯୋଡିବା ଆବଶ୍ୟକ ନାହିଁ data-display="static", ଯେହେତୁ ପପର୍ ନାଭବାରରେ ବ୍ୟବହୃତ ହୁଏ ନାହିଁ |

ହେଡର୍ସ

ଯେକ any ଣସି ଡ୍ରପଡାଉନ୍ ମେନୁରେ କ୍ରିୟାଗୁଡ଼ିକର ବିଭାଗକୁ ଲେବଲ୍ କରିବାକୁ ଏକ ହେଡର୍ ଯୋଡନ୍ତୁ |

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

ପାଠ

ପାଠ୍ୟ ସହିତ ଏକ ଡ୍ରପଡାଉନ୍ ମେନୁ ମଧ୍ୟରେ ଯେକ any ଣସି ଫ୍ରିଫର୍ମ ଟେକ୍ସଟ୍ ରଖନ୍ତୁ ଏବଂ ବ୍ୟବଧାନ ଉପଯୋଗୀତା ବ୍ୟବହାର କରନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ମେନୁ ଓସାରକୁ ବାଧ୍ୟତାମୂଳକ କରିବା ପାଇଁ ଆପଣଙ୍କୁ ଅତିରିକ୍ତ ଆକାରର ଶ yles ଳୀ ଆବଶ୍ୟକ |

<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" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

ବ୍ୟବହାର

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ସ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ, ଡ୍ରପଡାଉନ୍ ପ୍ଲଗଇନ୍ .showପ୍ୟାରେଣ୍ଟ୍ ଉପରେ କ୍ଲାସ୍ ଟୋଗଲ୍ କରି ଲୁକ୍କାୟିତ ବିଷୟବସ୍ତୁ (ଡ୍ରପଡାଉନ୍ ମେନୁ) ଟୋଗଲ୍ କରେ .dropdown-menu| data-toggle="dropdown"ଏକ ପ୍ରୟୋଗ ସ୍ତରରେ ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡିକ ବନ୍ଦ କରିବା ପାଇଁ ଗୁଣଟି ନିର୍ଭର କରେ, ତେଣୁ ଏହାକୁ ସର୍ବଦା ବ୍ୟବହାର କରିବା ଏକ ଉତ୍ତମ ଧାରଣା |

ଟଚ୍-ସକ୍ଷମ ଉପକରଣଗୁଡ଼ିକରେ, ଏକ ଡ୍ରପଡାଉନ୍ ଖୋଲିବା ଦ୍ୱାରା ଉପାଦାନର ତୁରନ୍ତ ପିଲାମାନଙ୍କ ପାଇଁ ଖାଲି ( $.noop) ହ୍ୟାଣ୍ଡେଲର୍ ଯୋଗ ହୁଏ | ଆଇଓଏସ୍ ଇଭେଣ୍ଟ ପ୍ରତିନିଧୀ ଦଳରେ ଏକ କ୍ୱିକ୍ ଚାରିଆଡ଼େ କାମ କରିବା ପାଇଁ ଏହି ସ୍ ly ୀକାରଯୋଗ୍ୟ ଅଶୁଭ ହ୍ୟାକ୍ ଆବଶ୍ୟକ , ଯାହା ଡ୍ରପଡାଉନ୍ ବନ୍ଦ କରୁଥିବା କୋଡ୍ ଟ୍ରିଗରରୁ ଡ୍ରପ୍ ଡାଉନ୍ ବାହାରେ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ଟ୍ୟାପ୍ ରୋକିବ | ଥରେ ଡ୍ରପଡାଉନ୍ ବନ୍ଦ ହୋଇଗଲେ, ଏହି ଅତିରିକ୍ତ ଖାଲି ହ୍ୟାଣ୍ଡେଲର୍ ଗୁଡିକ ଅପସାରିତ ହୁଏ | mouseover<body>mouseover

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |

data-toggle="dropdown"ଏକ ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ କରିବାକୁ ଏକ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ ରେ ଯୋଡନ୍ତୁ |

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଡ୍ରପଡାଉନ୍ କୁ କଲ୍ କରନ୍ତୁ:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"ତଥାପି ଆବଶ୍ୟକ

ଆପଣ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଆପଣଙ୍କର ଡ୍ରପଡାଉନ୍ କୁ ଡାକନ୍ତି କିମ୍ବା ଏହା ବଦଳରେ ଡାଟା-ଆପି ବ୍ୟବହାର କରନ୍ତି ନା କାହିଁକି, data-toggle="dropdown"ଡ୍ରପଡାଉନ୍ ର ଟ୍ରିଗର ଉପାଦାନରେ ସର୍ବଦା ଉପସ୍ଥିତ ରହିବା ଆବଶ୍ୟକ |

ବିକଳ୍ପଗୁଡ଼ିକ

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-ଯେପରି ଯୋଡନ୍ତୁ data-offset=""|

ନାମ ଟାଇପ୍ କରନ୍ତୁ | ଡିଫଲ୍ଟ | ବର୍ଣ୍ଣନା
ଅଫସେଟ ସଂଖ୍ୟା | string | କାର୍ଯ୍ୟ 0

ଏହାର ଲକ୍ଷ୍ୟ ସହିତ ଡ୍ରପଡାଉନ୍ ଅଫସେଟ୍ |

ଯେତେବେଳେ ଅଫସେଟ୍ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ଏହାର ପ୍ରଥମ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ଅଫସେଟ୍ ଡାଟା ଧାରଣ କରିଥିବା ଏକ ବସ୍ତୁ ସହିତ କୁହାଯାଏ | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ସମାନ ବସ୍ତୁ ସହିତ ଏକ ବସ୍ତୁ ଫେରସ୍ତ କରିବ | ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ୱିତୀୟ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ପାସ୍ ହୋଇଛି |

ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |

ଫ୍ଲିପ୍ ବୁଲିଅନ୍ ସତ ରେଫରେନ୍ସ ଉପାଦାନ ଉପରେ ଓଭରଲିପ୍ ହେଲେ ଡ୍ରପଡାଉନ୍ କୁ ଫ୍ଲିପ୍ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ | ଅଧିକ ସୂଚନା ପାଇଁ ପପ୍ପର ଫ୍ଲିପ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
ସୀମା string | ଉପାଦାନ 'ସ୍କ୍ରୋଲ୍ ପ୍ୟାରେଣ୍ଟ୍' ଡ୍ରପଡାଉନ୍ ମେନୁର ଓଭରଫ୍ଲୋ ସୀମିତ ସୀମା | 'viewport',, କିମ୍ବା ଏକ HTMLElement ରେଫରେନ୍ସ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ) 'window'ର ମୂଲ୍ୟ ଗ୍ରହଣ କରେ | 'scrollParent'ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ |
ସନ୍ଦର୍ଭ string | ଉପାଦାନ 'ଟୋଗଲ୍' ଡ୍ରପଡାଉନ୍ ମେନୁର ସନ୍ଦର୍ଭ ଉପାଦାନ | ର ମୂଲ୍ୟ, କିମ୍ବା ଏକ HTMLElement ରେଫରେନ୍ସ ଗ୍ରହଣ 'toggle'କରେ 'parent'| ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ରେଫରେନ୍ସ ଅବଜେକ୍ଟ ଡକସ୍ କୁ ଦେଖନ୍ତୁ |
ପ୍ରଦର୍ଶନ ଷ୍ଟ୍ରିଙ୍ଗ୍ 'ଗତିଶୀଳ' ଡିଫଲ୍ଟ ଭାବରେ, ଆମେ ଗତିଶୀଳ ପୋଜିସନ୍ ପାଇଁ ପପର୍ ବ୍ୟବହାର କରୁ | ଏହା ସହିତ ଅକ୍ଷମ କରନ୍ତୁ static|
popperConfig null | ବସ୍ତୁ ଶୂନ୍ୟ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ କନଫିଗ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ, ପପର୍ ର ବିନ୍ୟାସ ଦେଖନ୍ତୁ |

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେତେବେଳେ boundaryଏହା ବ୍ୟତୀତ ଅନ୍ୟ କ value ଣସି ମୂଲ୍ୟରେ ସେଟ୍ କରାଯାଏ 'scrollParent', ଶ style ଳୀ ପାତ୍ରରେ position: staticପ୍ରୟୋଗ କରାଯାଏ |.dropdown

ପ୍ରଣାଳୀ

ପଦ୍ଧତି ବର୍ଣ୍ଣନା
$().dropdown('toggle') ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଟୋଗଲ୍ କରେ |
$().dropdown('show') ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଦେଖାଏ |
$().dropdown('hide') ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଲୁଚାଇଥାଏ |
$().dropdown('update') ଏକ ଉପାଦାନର ଡ୍ରପଡାଉନ୍ ର ସ୍ଥିତି ଅଦ୍ୟତନ କରେ |
$().dropdown('dispose') ଏକ ଉପାଦାନର ଡ୍ରପଡାଉନ୍ ନଷ୍ଟ କରେ |

ଘଟଣା

.dropdown-menuସମସ୍ତ ଡ୍ରପଡାଉନ୍ ଇଭେଣ୍ଟଗୁଡିକ 'ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନ'ରେ ଗୁଳି କରାଯାଇଥାଏ ଏବଂ ଏହାର ଏକ relatedTargetସମ୍ପତ୍ତି ଅଛି, ଯାହାର ମୂଲ୍ୟ ଟୋଗଲ୍ ଆଙ୍କର୍ ଉପାଦାନ | hide.bs.dropdownଏବଂ hidden.bs.dropdownଇଭେଣ୍ଟଗୁଡିକର ଏକ clickEventସମ୍ପତ୍ତି ଅଛି (କେବଳ ଯେତେବେଳେ ମୂଳ ଇଭେଣ୍ଟ ପ୍ରକାର ଥାଏ click) ଯାହା କ୍ଲିକ୍ ଇଭେଣ୍ଟ ପାଇଁ ଏକ ଇଭେଣ୍ଟ ଅବଜେକ୍ଟ ଧାରଣ କରିଥାଏ |

ଘଟଣା ବର୍ଣ୍ଣନା
show.bs.dropdown ଶୋ ଇନଷ୍ଟାଣ୍ଟ ପଦ୍ଧତି କୁହାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
shown.bs.dropdown ଉପଭୋକ୍ତାଙ୍କୁ ଡ୍ରପଡାଉନ୍ ଦୃଶ୍ୟମାନ ହେବା ପରେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଇଥାଏ (CSS ସ୍ଥାନାନ୍ତରଣକୁ ଅପେକ୍ଷା କରିବ, ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପାଇଁ) |
hide.bs.dropdown ଯେତେବେଳେ ଲୁକ୍କାୟିତ ପଦ୍ଧତି କୁହାଯାଏ ସେତେବେଳେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ |
hidden.bs.dropdown ଯେତେବେଳେ ଡ୍ରପଡାଉନ୍ ଉପଭୋକ୍ତାଙ୍କଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି (CSS ସ୍ଥାନାନ୍ତରଣକୁ ଅପେକ୍ଷା କରିବ, ସମାପ୍ତ ହେବାକୁ) ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})