ଡ୍ରପଡାଉନ୍
ବୁଟଷ୍ଟ୍ରାପ୍ ଡ୍ରପ୍ ଡାଉନ୍ ପ୍ଲଗଇନ୍ ସହିତ ଲିଙ୍କଗୁଡ଼ିକର ତାଲିକା ଏବଂ ଅଧିକ ପ୍ରଦର୍ଶନ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ଓଭରଲେଜ୍ ଟୋଗଲ୍ କରନ୍ତୁ |
ସମୀକ୍ଷା
ଡ୍ରପ୍ ଡାଉନ୍ ଗୁଡିକ ଟୋଗଲ୍ ଯୋଗ୍ୟ, ଲିଙ୍କଗୁଡିକର ତାଲିକା ପ୍ରଦର୍ଶନ ପାଇଁ ବିଷୟବସ୍ତୁ ଓଭରଲେଜ୍ | ସେଗୁଡିକ ଅନ୍ତର୍ଭୁକ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ଡ୍ରପଡାଉନ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଇଣ୍ଟରାକ୍ଟିଭ୍ କରାଯାଇଛି | ସେମାନେ କ୍ଲିକ୍ କରି ଟୋଗଲ୍ ହୋଇଛନ୍ତି, ଘୁଞ୍ଚିବା ଦ୍ୱାରା ନୁହେଁ; ଏହା ଏକ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଡିଜାଇନ୍ ନିଷ୍ପତ୍ତି |
ଡ୍ରପଡାଉନ୍ ଏକ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ, ପପର୍ ଉପରେ ନିର୍ମିତ , ଯାହା ଗତିଶୀଳ ପୋଜିସନ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ଚିହ୍ନଟ ପ୍ରଦାନ କରିଥାଏ | ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ପୂର୍ବରୁ 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...
})