Source

ଡ୍ରପଡାଉନ୍

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

ସମୀକ୍ଷା

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

ଡ୍ରପ୍ ଡାଉନ୍ ଏକ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ, Popper.js ଉପରେ ନିର୍ମିତ , ଯାହା ଗତିଶୀଳ ପୋଜିସନ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ଚିହ୍ନଟ ପ୍ରଦାନ କରିଥାଏ | ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ପୂର୍ବରୁ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ କିମ୍ବା Popper.js ଧାରଣ କରନ୍ତୁ bootstrap.bundle.min.js/ ବ୍ୟବହାର କରନ୍ତୁ | bootstrap.bundle.jsPopper.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" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

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

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

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

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

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

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

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

ଆପଣ ମଧ୍ୟ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଡ୍ରପଡାଉନ୍ ଆଇଟମ୍ ସହିତ ସୃଷ୍ଟି କରିପାରିବେ .dropdown-item-text| କଷ୍ଟମ୍ CSS କିମ୍ବା ପାଠ୍ୟ ଉପଯୋଗୀତା ସହିତ ଅଧିକ ଶ 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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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

ହେଡର୍ସ

ଯେକ 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-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>

ଡ୍ରପଡାଉନ୍ ର ଅବସ୍ଥାନ ବ୍ୟବହାର କରନ୍ତୁ data-offsetକିମ୍ବା ପରିବର୍ତ୍ତନ କରନ୍ତୁ |data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

ବ୍ୟବହାର

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

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

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

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

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

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

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

ପ୍ରଣାଳୀ

ପଦ୍ଧତି ବର୍ଣ୍ଣନା
$().dropdown('toggle') ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଟୋଗଲ୍ କରେ |
$().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…
})