ଡ୍ରପଡାଉନ୍
ବୁଟଷ୍ଟ୍ରାପ୍ ଡ୍ରପ୍ ଡାଉନ୍ ପ୍ଲଗଇନ୍ ସହିତ ଲିଙ୍କଗୁଡ଼ିକର ତାଲିକା ଏବଂ ଅଧିକ ପ୍ରଦର୍ଶନ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ଓଭରଲେଜ୍ ଟୋଗଲ୍ କରନ୍ତୁ |
ସମୀକ୍ଷା
ଡ୍ରପ୍ ଡାଉନ୍ ଗୁଡିକ ଟୋଗଲ୍ ଯୋଗ୍ୟ, ଲିଙ୍କଗୁଡିକର ତାଲିକା ପ୍ରଦର୍ଶନ ପାଇଁ ବିଷୟବସ୍ତୁ ଓଭରଲେଜ୍ | ସେଗୁଡିକ ଅନ୍ତର୍ଭୁକ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ଡ୍ରପଡାଉନ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଇଣ୍ଟରାକ୍ଟିଭ୍ କରାଯାଇଛି | ସେମାନେ କ୍ଲିକ୍ କରି ଟୋଗଲ୍ ହୋଇଛନ୍ତି, ଘୁଞ୍ଚିବା ଦ୍ୱାରା ନୁହେଁ; ଏହା ଏକ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଡିଜାଇନ୍ ନିଷ୍ପତ୍ତି |
ଡ୍ରପଡାଉନ୍ ଏକ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ, ପପର୍ ଉପରେ ନିର୍ମିତ , ଯାହା ଗତିଶୀଳ ପୋଜିସନ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ଚିହ୍ନଟ ପ୍ରଦାନ କରିଥାଏ | ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ପୂର୍ବରୁ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ କିମ୍ବା ପପର୍ ଧାରଣ କରିଥିବା bootstrap.bundle.min.js
/ ବ୍ୟବହାର କରନ୍ତୁ | bootstrap.bundle.js
ନାପର୍ ରେ ଡ୍ରପ୍ ଡାଉନ୍ ପୋଜିସନ୍ ପାଇଁ ପପର୍ ବ୍ୟବହୃତ ହୁଏ ନାହିଁ ଯଦିଓ ଗତିଶୀଳ ପୋଜିସନ୍ ଆବଶ୍ୟକ ନାହିଁ |
ଅଭିଗମ୍ୟତା
WAI ARIA ମାନକ ଏକ ପ୍ରକୃତ ୱିଜେଟ୍ ବ୍ୟାଖ୍ୟା କରେ , role="menu"
କିନ୍ତୁ ଏହା ପ୍ରୟୋଗ ପରି ମେନୁ ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ ଯାହାକି କାର୍ଯ୍ୟ କିମ୍ବା କାର୍ଯ୍ୟକୁ ଟ୍ରିଗର କରିଥାଏ | ARIA ମେନୁଗୁଡ଼ିକ କେବଳ ମେନୁ ଆଇଟମ୍, ଚେକ୍ ବକ୍ସ ମେନୁ ଆଇଟମ୍, ରେଡିଓ ବଟନ୍ ମେନୁ ଆଇଟମ୍, ରେଡିଓ ବଟନ୍ ଗୋଷ୍ଠୀ, ଏବଂ ସବ୍-ମେନୁ ଧାରଣ କରିପାରିବ |
ଅନ୍ୟପକ୍ଷରେ, ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡ୍ରପଡାଉନ୍ ଗୁଡିକ ଜେନେରିକ୍ ଏବଂ ବିଭିନ୍ନ ପରିସ୍ଥିତି ଏବଂ ମାର୍କଅପ୍ ଗଠନ ପାଇଁ ପ୍ରଯୁଜ୍ୟ ହେବା ପାଇଁ ଡିଜାଇନ୍ କରାଯାଇଛି | ଉଦାହରଣ ସ୍ୱରୂପ, ଡ୍ରପଡାଉନ୍ ସୃଷ୍ଟି କରିବା ସମ୍ଭବ, ଯେଉଁଥିରେ ଅତିରିକ୍ତ ଇନପୁଟ୍ ଏବଂ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ଥାଏ, ଯେପରିକି ସନ୍ଧାନ କ୍ଷେତ୍ର କିମ୍ବା ଲଗଇନ୍ ଫର୍ମ | ଏହି କାରଣରୁ, ପ୍ରକୃତ ARIA ମେନୁଗୁଡ଼ିକ ପାଇଁ ଆବଶ୍ୟକ ହେଉଥିବା କ and ଣସି ଗୁଣ role
ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଶା କରେ ନାହିଁ (କିମ୍ବା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଯୋଗ କରେ ନାହିଁ) | ଲେଖକମାନଙ୍କୁ ଏହି ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଗୁଣଗୁଡିକ ନିଜେ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ |aria-
ତଥାପି, ବୁଟଷ୍ଟ୍ରାପ୍ ଅଧିକାଂଶ ମାନକ କୀବୋର୍ଡ୍ ମେନୁ ପାରସ୍ପରିକ କାର୍ଯ୍ୟ ପାଇଁ ବିଲ୍ଟ-ଇନ୍ ସମର୍ଥନ ଯୋଗ କରିଥାଏ, ଯେପରିକି .dropdown-item
କର୍ସର୍ କି ବ୍ୟବହାର କରି ବ୍ୟକ୍ତିଗତ ଉପାଦାନ ଦେଇ ଗତି କରିବାର କ୍ଷମତା ଏବଂ ଚାବି ସହିତ ମେନୁ ବନ୍ଦ କରିବା ESC|
ଉଦାହରଣଗୁଡିକ
ଡ୍ରପଡାଉନ୍ ର ଟୋଗଲ୍ (ତୁମର ବଟନ୍ କିମ୍ବା ଲିଙ୍କ୍) ଏବଂ ଡ୍ରପଡାଉନ୍ ମେନୁକୁ .dropdown
, କିମ୍ବା ଘୋଷଣା କରୁଥିବା ଅନ୍ୟ ଏକ ଉପାଦାନକୁ ଗୁଡ଼ାଇ ରଖ position: relative;
| ଆପଣଙ୍କ ସମ୍ଭାବ୍ୟ ଆବଶ୍ୟକତାକୁ ଭଲ ଭାବରେ ଫିଟ୍ କରିବା ପାଇଁ ଡ୍ରପଡାଉନ୍ <a>
କିମ୍ବା ଉପାଦାନରୁ ଟ୍ରିଗର ହୋଇପାରେ | <button>
ଏଠାରେ ଦେଖାଯାଇଥିବା ଉଦାହରଣଗୁଡ଼ିକ <ul>
ଉପଯୁକ୍ତ ସ୍ଥାନରେ ଅର୍ଥଗତ ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତି, କିନ୍ତୁ କଷ୍ଟମ୍ ମାର୍କଅପ୍ ସମର୍ଥିତ |
ଏକକ ବଟନ୍ |
ଯେକ Any ଣସି ସିଙ୍ଗଲ୍ .btn
କିଛି ମାର୍କଅପ୍ ପରିବର୍ତ୍ତନ ସହିତ ଏକ ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ ରେ ପରିଣତ ହୋଇପାରେ | ଏଠାରେ ଆପଣ କିପରି ଉଭୟ ଉପାଦାନ ସହିତ କାର୍ଯ୍ୟ କରିବାକୁ ରଖିପାରିବେ ତାହା ଏଠାରେ ଅଛି <button>
:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
ଉପାଦାନଗୁଡିକ ସହିତ:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
ସର୍ବୋତ୍ତମ ଅଂଶ ହେଉଛି ଆପଣ ଯେକ any ଣସି ବଟନ୍ ପ୍ରକାର ସହିତ ଏହା କରିପାରିବେ:
<!-- 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
ଏକ ବିଦ୍ୟମାନରେ ଯୋଗ କରି ଏକ ଗା dark ନାଭବାର୍ କିମ୍ବା କଷ୍ଟମ୍ ଶ style ଳୀ ସହିତ ମେଳ କରିବାକୁ ଗା dark ଼ ଡ୍ରପଡାଉନ୍ ଗୁଡିକୁ ବାଛନ୍ତୁ .dropdown-menu
| ଡ୍ରପଡାଉନ୍ ଆଇଟମଗୁଡିକରେ କ changes ଣସି ପରିବର୍ତ୍ତନ ଆବଶ୍ୟକ ନାହିଁ |
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<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>
ଏବଂ ଏହାକୁ ଏକ ନାଭବାରରେ ବ୍ୟବହାର କରିବାକୁ:
<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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
ଡାହାଣ ପାର୍ଶ୍ୱରେ ଦେଖାଯିବ |
ଡ୍ରପ୍ଅପ୍ |
.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>
ଡ୍ରପ୍ରାଇଟ୍ |
.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">
Dropright
</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 Dropright</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">
<div class="btn-group dropstart" role="group">
<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>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
ମେନୁ ଆଇଟମ୍ |
ଆପଣ ଡ୍ରପଡାଉନ୍ ଆଇଟମ୍ ଭାବରେ ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର <a>
କରିପାରିବେ <button>
|
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<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 କିମ୍ବା ପାଠ୍ୟ ଉପଯୋଗୀତା ସହିତ ଅଧିକ ଶ style ଳୀ କରିବାକୁ ମୁକ୍ତ ମନେ କରନ୍ତୁ |
<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>
ସକ୍ରିୟ |
ସେଗୁଡିକୁ ସକ୍ରିୟ ଭାବରେ ଶ style.active
ଳୀ କରିବାକୁ ଡ୍ରପଡାଉନ୍ ରେ ଥିବା ଆଇଟମ୍ ଗୁଡିକୁ ଯୋଡନ୍ତୁ | ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ସକ୍ରିୟ ସ୍ଥିତିକୁ ପହଞ୍ଚାଇବା ପାଇଁ, ଗୁଣ ବ୍ୟବହାର କରନ୍ତୁ - ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ପାଇଁ ମୂଲ୍ୟ ବ୍ୟବହାର କରି, କିମ୍ବା ଏକ ସେଟ୍ରେ ସାମ୍ପ୍ରତିକ ଆଇଟମ୍ ପାଇଁ |aria-current
page
true
<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>
ଅକ୍ଷମ
ସେମାନଙ୍କୁ ଅକ୍ଷମ ଭାବରେ ଶ style.disabled
ଳୀ କରିବାକୁ ଡ୍ରପଡାଉନରେ ଥିବା ଆଇଟମଗୁଡିକରେ ଯୋଡନ୍ତୁ |
<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-end
କରିବାକୁ ଏକ ଯୋଡନ୍ତୁ | .dropdown-menu
RTL ରେ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରିବାବେଳେ ନିର୍ଦ୍ଦେଶଗୁଡ଼ିକ ପ୍ରତିବିମ୍ବିତ ହୋଇଥାଏ, ଅର୍ଥାତ୍ .dropdown-menu-end
ବାମ ପାର୍ଶ୍ୱରେ ଦେଖାଯିବ |
<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
|
<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
|
<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"
, ଯେହେତୁ ପପର୍ ନାଭବାରରେ ବ୍ୟବହୃତ ହୁଏ ନାହିଁ |
ଶ୍ରେଣୀବଦ୍ଧ ବିକଳ୍ପଗୁଡ଼ିକ |
ଉପରେ ଦେଖାଯାଇଥିବା ଅଧିକାଂଶ ବିକଳ୍ପକୁ ନେଇ, ଏଠାରେ ଗୋଟିଏ ସ୍ଥାନରେ ବିଭିନ୍ନ ଡ୍ରପଡାଉନ୍ ଆଲାଇନ୍ମେଣ୍ଟ ବିକଳ୍ପଗୁଡ଼ିକର ଏକ ଛୋଟ ରୋଷେଇ ଘରର ସିଙ୍କ ଡେମୋ |
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
ମେନୁ ବିଷୟବସ୍ତୁ |
ହେଡର୍ସ
ଯେକ any ଣସି ଡ୍ରପଡାଉନ୍ ମେନୁରେ କ୍ରିୟାଗୁଡ଼ିକର ବିଭାଗକୁ ଲେବଲ୍ କରିବାକୁ ଏକ ହେଡର୍ ଯୋଡନ୍ତୁ |
<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>
ବିଭାଜନକାରୀ |
ଏକ ଡିଭାଇଡର୍ ସହିତ ସମ୍ବନ୍ଧିତ ମେନୁ ଆଇଟମଗୁଡିକର ପୃଥକ ଗୋଷ୍ଠୀ |
<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>
ପାଠ
ପାଠ୍ୟ ସହିତ ଏକ ଡ୍ରପଡାଉନ୍ ମେନୁ ମଧ୍ୟରେ ଯେକ 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="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>
<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>
ଡ୍ରପ୍ ଡାଉନ୍ ଅପ୍ସନ୍ |
ଡ୍ରପଡାଉନ୍ ର ଅବସ୍ଥାନ ବ୍ୟବହାର data-bs-offset
କିମ୍ବା ପରିବର୍ତ୍ତନ କରିବାକୁ |data-bs-reference
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<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
ଡ୍ରପଡାଉନର ଏହି ଆଚରଣକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ଆପଣ ବିକଳ୍ପ ବ୍ୟବହାର କରିପାରିବେ |
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<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>
ସାସ୍ |
ଭେରିଏବଲ୍ |
ସମସ୍ତ ଡ୍ରପଡାଉନ୍ ପାଇଁ ଭେରିଏବଲ୍:
$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: rgba($black, .15);
$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: $dropdown-padding-y $dropdown-item-padding-x;
ଅନ୍ଧାର ଡ୍ରପଡାଉନ୍ ପାଇଁ ଭେରିଏବଲ୍ :
$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>
କରିଥାଏ | ଆଇଓଏସ୍ ଇଭେଣ୍ଟ ପ୍ରତିନିଧୀ ଦଳରେ ଏକ କ୍ୱିକ୍ ଚାରିଆଡ଼େ କାମ କରିବା ପାଇଁ ଏହି ସ୍ ly ୀକାରଯୋଗ୍ୟ ଅଶୁଭ ହ୍ୟାକ୍ ଆବଶ୍ୟକ
, ଯାହା ଡ୍ରପଡାଉନ୍ ବନ୍ଦ କରୁଥିବା କୋଡ୍ ଟ୍ରିଗରରୁ ଡ୍ରପ୍ ଡାଉନ୍ ବାହାରେ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ଟ୍ୟାପ୍ ରୋକିବ | ଥରେ ଡ୍ରପଡାଉନ୍ ବନ୍ଦ ହୋଇଗଲେ, ଏହି ଅତିରିକ୍ତ ଖାଲି
mouseover
ହ୍ୟାଣ୍ଡେଲର୍ ଗୁଡିକ ଅପସାରିତ ହୁଏ |
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |
data-bs-toggle="dropdown"
ଏକ ଡ୍ରପଡାଉନ୍ ଟୋଗଲ୍ କରିବାକୁ ଏକ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ ରେ ଯୋଡନ୍ତୁ |
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଡ୍ରପଡାଉନ୍ କୁ କଲ୍ କରନ୍ତୁ:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
ତଥାପି ଆବଶ୍ୟକ
ଆପଣ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଆପଣଙ୍କର ଡ୍ରପଡାଉନ୍ କୁ ଡାକନ୍ତି କିମ୍ବା ଏହା ବଦଳରେ ଡାଟା-ଆପି ବ୍ୟବହାର କରନ୍ତି ନା କାହିଁକି, data-bs-toggle="dropdown"
ଡ୍ରପଡାଉନ୍ ର ଟ୍ରିଗର ଉପାଦାନରେ ସର୍ବଦା ଉପସ୍ଥିତ ରହିବା ଆବଶ୍ୟକ |
ବିକଳ୍ପଗୁଡ଼ିକ
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-
ଯେପରି ଯୋଡନ୍ତୁ data-bs-offset=""
| ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ କରିବା ସମୟରେ ଓଟ କେସ୍ ରୁ କେବାବ-କେସରେ ବିକଳ୍ପ ନାମର କେସ୍ ପ୍ରକାର ପରିବର୍ତ୍ତନ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ବ୍ୟବହାର କରିବା ପରିବର୍ତ୍ତେ, data-bs-autoClose="false"
ବ୍ୟବହାର କରନ୍ତୁ data-bs-auto-close="false"
|
ନାମ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ | | ବର୍ଣ୍ଣନା |
---|---|---|---|
boundary |
string | ଉପାଦାନ | 'clippingParents' |
ଡ୍ରପଡାଉନ୍ ମେନୁର ଓଭରଫ୍ଲୋ ସୀମାବଦ୍ଧ ସୀମା (କେବଳ ପପର୍ ର ପ୍ରତିରୋଧ ଓଭରଫ୍ଲୋ ମୋଡିଫାୟର୍ ପାଇଁ ପ୍ରଯୁଜ୍ୟ) | ଡିଫଲ୍ଟ ଭାବରେ ଏହା 'clippingParents' ଏବଂ ଏକ HTMLElement ରେଫରେନ୍ସ ଗ୍ରହଣ କରିପାରିବ (କେବଳ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ) | ଅଧିକ ସୂଚନା ପାଇଁ ପପରର ଡିଟେକ୍ଟ ଓଭରଫ୍ଲୋ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
reference |
string | ଉପାଦାନ | ବସ୍ତୁ | 'toggle' |
ଡ୍ରପଡାଉନ୍ ମେନୁର ସନ୍ଦର୍ଭ ଉପାଦାନ | 'toggle' , 'parent' ଏକ HTMLElement ରେଫରେନ୍ସ କିମ୍ବା ପ୍ରଦାନ କରୁଥିବା ବସ୍ତୁର ମୂଲ୍ୟଗୁଡ଼ିକୁ ଗ୍ରହଣ କରେ getBoundingClientRect | ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର କନଷ୍ଟ୍ରକ୍ଟର୍ ଡକସ୍ ଏବଂ ଭର୍ଚୁଆଲ୍ ଏଲିମେଣ୍ଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
display |
ଷ୍ଟ୍ରିଙ୍ଗ୍ | 'dynamic' |
ଡିଫଲ୍ଟ ଭାବରେ, ଆମେ ଗତିଶୀଳ ପୋଜିସନ୍ ପାଇଁ ପପର୍ ବ୍ୟବହାର କରୁ | ଏହା ସହିତ ଅକ୍ଷମ କରନ୍ତୁ static | |
offset |
ଆରେ | string | କାର୍ଯ୍ୟ | [0, 2] |
ଏହାର ଲକ୍ଷ୍ୟ ସହିତ ଡ୍ରପଡାଉନ୍ ଅଫସେଟ୍ | ଆପଣ କମା ଦ୍ୱାରା ପୃଥକ ମୂଲ୍ୟ ସହିତ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ରେ ଏକ ଷ୍ଟ୍ରିଙ୍ଗ୍ ପାସ୍ କରିପାରିବେ: ଯେତେବେଳେ ଅଫସେଟ୍ ନିର୍ଣ୍ଣୟ କରିବା ପାଇଁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ପ୍ରଥମ ଯୁକ୍ତି ଭାବରେ ପପର୍ ପ୍ଲେସମେଣ୍ଟ୍, ରେଫରେନ୍ସ ଏବଂ ପପର୍ ରେକ୍ଟସ୍ ଧାରଣ କରିଥିବା ଏକ ବସ୍ତୁ ସହିତ କୁହାଯାଏ | ଟ୍ରାଇଜିଂ ଉପାଦାନ DOM ନୋଡ୍ ଦ୍ୱିତୀୟ ଆର୍ଗୁମେଣ୍ଟ୍ ଭାବରେ ପାସ୍ ହୋଇଛି | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ଦୁଇଟି ସଂଖ୍ୟା ସହିତ ଏକ ଆରେ ଫେରସ୍ତ କରିବ : ଅଧିକ ସୂଚନା ପାଇଁ ପପର୍ ର ଅଫସେଟ୍ ଡକସ୍ କୁ ଅନୁସରଣ କରନ୍ତୁ | |
autoClose |
ବୁଲିଅନ୍ | ଷ୍ଟ୍ରିଙ୍ଗ୍ | true |
ଡ୍ରପଡାଉନର ଅଟୋ ବନ୍ଦ ଆଚରଣକୁ ବିନ୍ୟାସ କରନ୍ତୁ:
|
popperConfig |
null | ବସ୍ତୁ | କାର୍ଯ୍ୟ | null |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ କନଫିଗ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ, ପପର୍ ର ବିନ୍ୟାସ ଦେଖନ୍ତୁ | ଯେତେବେଳେ ପପର୍ ବିନ୍ୟାସକରଣ ସୃଷ୍ଟି କରିବାକୁ ଏକ ଫଙ୍କସନ୍ ବ୍ୟବହୃତ ହୁଏ, ଏହାକୁ ଏକ ଅବଜେକ୍ଟ ସହିତ କୁହାଯାଏ ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପପର୍ ବିନ୍ୟାସକରଣ ଧାରଣ କରିଥାଏ | ଏହା ଆପଣଙ୍କୁ ନିଜ ବିନ୍ୟାସ ସହିତ ଡିଫଲ୍ଟ ବ୍ୟବହାର ଏବଂ ମିଶ୍ରଣ କରିବାରେ ସାହାଯ୍ୟ କରେ | ଫଙ୍କସନ୍ ନିଶ୍ଚିତ ଭାବରେ ପପର୍ ପାଇଁ ଏକ ବିନ୍ୟାସ ବସ୍ତୁ ଫେରସ୍ତ କରିବ | |
ସହିତ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରିବା |popperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
ପ୍ରଣାଳୀ
ପଦ୍ଧତି | ବର୍ଣ୍ଣନା |
---|---|
toggle |
ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଟୋଗଲ୍ କରେ | |
show |
ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଦେଖାଏ | |
hide |
ପ୍ରଦତ୍ତ ନାଭବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ ର ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ ଲୁଚାଇଥାଏ | |
update |
ଏକ ଉପାଦାନର ଡ୍ରପଡାଉନ୍ ର ସ୍ଥିତି ଅଦ୍ୟତନ କରେ | |
dispose |
ଏକ ଉପାଦାନର ଡ୍ରପଡାଉନ୍ ନଷ୍ଟ କରେ | (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ) |
getInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଡ୍ରପଡାଉନ୍ ଉଦାହରଣ ପାଇବାକୁ ଅନୁମତି ଦିଏ, ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଏକ ଡ୍ରପଡାଉନ୍ ଉଦାହରଣକୁ ଫେରାଇଥାଏ କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିଥାଏ | ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Dropdown.getOrCreateInstance(element) |
ଘଟଣା
ସମସ୍ତ ଡ୍ରପଡାଉନ୍ ଇଭେଣ୍ଟଗୁଡିକ ଟୋଗଲ୍ ଉପାଦାନ ଉପରେ ଗୁଳି କରାଯାଇଥାଏ ଏବଂ ତାପରେ ବବୁଲ୍ ହୋଇଯାଏ | .dropdown-menu
ତେଣୁ ଆପଣ ପ୍ୟାରେଣ୍ଟ୍ ଏଲିମେଣ୍ଟରେ ଇଭେଣ୍ଟ ଶ୍ରୋତାମାନଙ୍କୁ ମଧ୍ୟ ଯୋଡିପାରିବେ | hide.bs.dropdown
ଏବଂ hidden.bs.dropdown
ଇଭେଣ୍ଟଗୁଡିକର ଏକ clickEvent
ସମ୍ପତ୍ତି ଅଛି (କେବଳ ଯେତେବେଳେ ମୂଳ ଇଭେଣ୍ଟ ପ୍ରକାର ଥାଏ click
) ଯାହା କ୍ଲିକ୍ ଇଭେଣ୍ଟ ପାଇଁ ଏକ ଇଭେଣ୍ଟ ଅବଜେକ୍ଟ ଧାରଣ କରିଥାଏ |
ପଦ୍ଧତି | ବର୍ଣ୍ଣନା |
---|---|
show.bs.dropdown |
ଯେତେବେଳେ ଶୋ ଇନଷ୍ଟାଣ୍ଟ ପଦ୍ଧତି କୁହାଯାଏ ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
shown.bs.dropdown |
ଯେତେବେଳେ ଡ୍ରପଡାଉନ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ କରାଗଲା ଏବଂ CSS ସ୍ଥାନାନ୍ତରଣ ସମାପ୍ତ ହେଲା ପରେ ଫାୟାର୍ | |
hide.bs.dropdown |
ଯେତେବେଳେ ଲୁକ୍କାୟିତ ପଦ୍ଧତି ଡକାଗଲା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
hidden.bs.dropdown |
ଯେତେବେଳେ ଡ୍ରପଡାଉନ୍ ଉପଭୋକ୍ତା ଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି ଏବଂ CSS ସ୍ଥାନାନ୍ତରଣ ସମାପ୍ତ ହୋଇଛି | |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})