ଗୋଷ୍ଠୀ ତାଲିକା |
ତାଲିକା ଗୋଷ୍ଠୀଗୁଡ଼ିକ ଏକ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ ପାଇଁ ଏକ ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ଉପାଦାନ | ଭିତରର ଯେକ content ଣସି ବିଷୟବସ୍ତୁକୁ ସମର୍ଥନ କରିବାକୁ ସେମାନଙ୍କୁ ପରିବର୍ତ୍ତନ ଏବଂ ବିସ୍ତାର କର |
ମ Basic ଳିକ ଉଦାହରଣ |
ସବୁଠାରୁ ମ basic ଳିକ ତାଲିକା ଗୋଷ୍ଠୀ ହେଉଛି ତାଲିକା ଆଇଟମ୍ ଏବଂ ଉପଯୁକ୍ତ ଶ୍ରେଣୀ ସହିତ ଏକ ଅନିୟମିତ ତାଲିକା | ଅନୁସରଣ କରୁଥିବା ବିକଳ୍ପଗୁଡ଼ିକ ସହିତ, କିମ୍ବା ଆବଶ୍ୟକ ଅନୁଯାୟୀ ନିଜସ୍ୱ CSS ସହିତ ଏହା ଉପରେ ନିର୍ମାଣ କରନ୍ତୁ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଚତୁର୍ଥ ଆଇଟମ୍ |
- ଏବଂ ଏକ ପଞ୍ଚମ |
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
ସକ୍ରିୟ ଆଇଟମ୍ |
ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଚୟନକୁ ସୂଚାଇବା .active
ପାଇଁ a କୁ ଯୋଡନ୍ତୁ |.list-group-item
- ଏକ ସକ୍ରିୟ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଚତୁର୍ଥ ଆଇଟମ୍ |
- ଏବଂ ଏକ ପଞ୍ଚମ |
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
ଅକ୍ଷମ ଆଇଟମ୍ |
ଏହାକୁ ଅକ୍ଷମ ଦେଖାଯିବା.disabled
ପାଇଁ ଏକ ଯୋଗକର | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ କିଛି ଉପାଦାନ ସହିତ ସେମାନଙ୍କର କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ (ଯଥା, ଲିଙ୍କ୍) ସଂପୂର୍ଣ୍ଣ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ମଧ୍ୟ ଆବଶ୍ୟକ କରିବ |.list-group-item
.disabled
- ଏକ ଅକ୍ଷମ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଚତୁର୍ଥ ଆଇଟମ୍ |
- ଏବଂ ଏକ ପଞ୍ଚମ |
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
ଲିଙ୍କ୍ ଏବଂ ବଟନ୍ |
ଯୋଗକରି ଅକ୍ଷମ, ଏବଂ ସକ୍ରିୟ ଅବସ୍ଥା ସହିତ କାର୍ଯ୍ୟକ୍ଷମ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ସୃଷ୍ଟି କରିବାକୁ <a>
s କିମ୍ବା s ବ୍ୟବହାର କରନ୍ତୁ | ଅଣ-ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକରେ ନିର୍ମିତ ତାଲିକା ଗୋଷ୍ଠୀଗୁଡିକ ନିଶ୍ଚିତ କରିବାକୁ ଆମେ ଏହି ଛଦ୍ମ-ଶ୍ରେଣୀଗୁଡ଼ିକୁ ପୃଥକ କରିଥାଉ (ଯେପରିକି s କିମ୍ବା ଗୁଡିକ ) କ୍ଲିକ୍ କିମ୍ବା ଟ୍ୟାପ୍ ସୁଲଭତା ପ୍ରଦାନ କରେ ନାହିଁ |<button>
.list-group-item-action
<li>
<div>
ଏଠାରେ ଷ୍ଟାଣ୍ଡାର୍ଡ .btn
କ୍ଲାସ୍ ବ୍ୟବହାର ନକରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
S ସହିତ , ଆପଣ ଶ୍ରେଣୀ ପରିବର୍ତ୍ତେ ଗୁଣର <button>
ବ୍ୟବହାର ମଧ୍ୟ କରିପାରିବେ | ଦୁ ly ଖର ବିଷୟ, ଅକ୍ଷମ ଗୁଣକୁ ସମର୍ଥନ କରେ ନାହିଁ |disabled
.disabled
<a>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
ଫ୍ଲାଶ୍ |
.list-group-flush
ଏକ ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ରରେ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ଗୁଡ଼ିକୁ ଏଣ୍ଡ-ଟୁ-ଏଣ୍ଡ୍ ରେଣ୍ଡର୍ କରିବାକୁ କିଛି ସୀମା ଏବଂ ଗୋଲାକାର କୋଣଗୁଡିକ ଅପସାରଣ କରିବାକୁ ଯୋଡନ୍ତୁ (ଯଥା, କାର୍ଡ) |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଚତୁର୍ଥ ଆଇଟମ୍ |
- ଏବଂ ଏକ ପଞ୍ଚମ |
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
ଭୂସମାନ୍ତର
.list-group-horizontal
ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟଗୁଡିକରେ ଭୂଲମ୍ବରୁ ଭୂସମାନ୍ତର ପର୍ଯ୍ୟନ୍ତ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମଗୁଡିକର ଲେଆଉଟ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ ଯୋଡନ୍ତୁ | .list-group-horizontal-{sm|md|lg|xl}
ବ ly କଳ୍ପିକ ଭାବରେ, ସେହି ବ୍ରେକପଏଣ୍ଟରୁ ଆରମ୍ଭ କରି ଏକ ତାଲିକା ଗୋଷ୍ଠୀକୁ ଭୂସମାନ୍ତର କରିବାକୁ ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାର ବାଛନ୍ତୁ min-width
| ସମ୍ପ୍ରତି ଭୂସମାନ୍ତର ତାଲିକା ଗୋଷ୍ଠୀଗୁଡିକ ଫ୍ଲାଶ୍ ତାଲିକା ଗୋଷ୍ଠୀ ସହିତ ମିଳିତ ହୋଇପାରିବ ନାହିଁ |
ProTip: ଭୂସମାନ୍ତର ସମୟରେ ସମାନ ଓସାର ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ଚାହୁଁଛନ୍ତି କି? .flex-fill
ପ୍ରତ୍ୟେକ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ସହିତ ଯୋଡନ୍ତୁ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
- ଏକ ଆଇଟମ୍ |
- ଦ୍ୱିତୀୟ ଆଇଟମ୍ |
- ଏକ ତୃତୀୟ ଆଇଟମ୍ |
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
ବିଷୟବସ୍ତୁ ଶ୍ରେଣୀଗୁଡିକ |
ଏକ ରାଜ୍ୟ ପୃଷ୍ଠଭୂମି ଏବଂ ରଙ୍ଗ ସହିତ ଆଇଟମ୍ ତାଲିକା ଶ style ଳୀ ପାଇଁ ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |
- ଏକ ସରଳ ଡିଫଲ୍ଟ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ପ୍ରାଥମିକ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ଦଳୀୟ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ସଫଳତା ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ବିପଦ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ଚେତାବନୀ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ସୂଚନା ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ଆଲୋକ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏକ ସରଳ ଗା dark ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
ବିଷୟବସ୍ତୁ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ମଧ୍ୟ କାର୍ଯ୍ୟ କରେ .list-group-item-action
| ପୂର୍ବ ଉଦାହରଣରେ ଉପସ୍ଥିତ ନଥିବା ହୋଭର ଶ yles ଳୀଗୁଡ଼ିକର ଯୋଗକୁ ଧ୍ୟାନ ଦିଅନ୍ତୁ | ରାଜ୍ୟ ମଧ୍ୟ ସମର୍ଥିତ .active
; ଏକ ପ୍ରସଙ୍ଗ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ଉପରେ ଏକ ସକ୍ରିୟ ଚୟନ ସୂଚାଇବା ପାଇଁ ଏହାକୁ ପ୍ରୟୋଗ କର |
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-only
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ବ୍ୟାଜ୍ ସହିତ |
କିଛି ଉପଯୋଗିତା ସାହାଯ୍ୟରେ ପ read ଼ାଯାଇଥିବା ଗଣନା, କାର୍ଯ୍ୟକଳାପ, ଏବଂ ଅଧିକ ଦେଖାଇବାକୁ ଯେକ any ଣସି ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମରେ ବ୍ୟାଜ୍ ଯୋଡନ୍ତୁ |
- ଏକ ତାଲିକା ଆଇଟମ୍ |14
- ଦ୍ୱିତୀୟ ତାଲିକା ଆଇଟମ୍ |୨
- ଏକ ତୃତୀୟ ତାଲିକା ଆଇଟମ୍ |୧
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
କଷ୍ଟମ୍ ବିଷୟବସ୍ତୁ |
ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟିଜ୍ ସାହାଯ୍ୟରେ ନିମ୍ନରେ ଥିବା ଲିଙ୍କ୍ ଗୋଷ୍ଠୀ ପାଇଁ ମଧ୍ୟ ପ୍ରାୟ ଯେକ HTML ଣସି HTML ଯୋଡନ୍ତୁ |
ଗୋଷ୍ଠୀ ଆଇଟମ୍ ହେଡିଙ୍ଗ୍ ତାଲିକା କର |
3 ଦିନ ପୂର୍ବରୁଏକ ଅନୁଚ୍ଛେଦରେ କିଛି ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |
ଏବଂ କିଛି ଛୋଟ ପ୍ରିଣ୍ଟ୍ |ଗୋଷ୍ଠୀ ଆଇଟମ୍ ହେଡିଙ୍ଗ୍ ତାଲିକା କର |
3 ଦିନ ପୂର୍ବରୁଏକ ଅନୁଚ୍ଛେଦରେ କିଛି ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |
ଏବଂ କିଛି ମ୍ୟୁଟ୍ ଛୋଟ ପ୍ରିଣ୍ଟ୍ |ଗୋଷ୍ଠୀ ଆଇଟମ୍ ହେଡିଙ୍ଗ୍ ତାଲିକା କର |
3 ଦିନ ପୂର୍ବରୁଏକ ଅନୁଚ୍ଛେଦରେ କିଛି ସ୍ଥାନଧାରୀ ବିଷୟବସ୍ତୁ |
ଏବଂ କିଛି ମ୍ୟୁଟ୍ ଛୋଟ ପ୍ରିଣ୍ଟ୍ |<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
ଜାଭାସ୍କ୍ରିପ୍ଟ ଆଚରଣ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଟ୍ୟାବ୍ ବ୍ୟବହାର କରନ୍ତୁ - ଏହାକୁ ପୃଥକ ଭାବରେ କିମ୍ବା ସଂକଳିତ bootstrap.js
ଫାଇଲ୍ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ - ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁର ଟ୍ୟାବଲ୍ ଟେବୁଲ୍ ତିଆରି କରିବାକୁ ଆମର ତାଲିକା ଗୋଷ୍ଠୀକୁ ବିସ୍ତାର କରିବାକୁ |
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରିବା |
data-toggle="list"
ଆପଣ କେବଳ ନିର୍ଦ୍ଦିଷ୍ଟ କିମ୍ବା ଏକ ଉପାଦାନରେ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖି ବିନା ଏକ ତାଲିକା ଗୋଷ୍ଠୀ ନ���ଭିଗେସନ୍ ସକ୍ରିୟ କରିପାରିବେ | ଏହି ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ .list-group-item
|
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟ୍ୟାବଲ୍ ଟେବୁଲ୍ ଆଇଟମ୍ ସକ୍ଷମ କରନ୍ତୁ (ପ୍ରତ୍ୟେକ ତାଲିକା ଆଇଟମ୍ ପୃଥକ ଭାବରେ ସକ୍ରିୟ ହେବା ଆବଶ୍ୟକ):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
ଆପଣ ବିଭିନ୍ନ ଉପାୟରେ ବ୍ୟକ୍ତିଗତ ତାଲିକା ଆଇଟମ୍ ସକ୍ରିୟ କରିପାରିବେ:
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab
ମଳିନ ପ୍ରଭାବ
ଟ୍ୟାବ୍ସ ପ୍ୟାନେଲକୁ ଦୁର୍ବଳ କରିବାକୁ, .fade
ପ୍ରତ୍ୟେକରେ ଯୋଗ କରନ୍ତୁ .tab-pane
| ପ୍ରଥମ ଟ୍ୟାବ୍ ପେନ୍ ମଧ୍ୟ .show
ପ୍ରାରମ୍ଭିକ ବିଷୟବସ୍ତୁକୁ ଦୃଶ୍ୟମାନ କରିବାକୁ ପଡିବ |
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
ପ୍ରଣାଳୀ
$ () ଟ୍ୟାବ୍ |
ଏକ ତାଲିକା ଆଇଟମ୍ ଉପାଦାନ ଏବଂ ବିଷୟବସ୍ତୁ ପାତ୍ରକୁ ସକ୍ରିୟ କରିଥାଏ | ଟ୍ୟାବରେ DOM ରେ data-target
ଏକ href
କଣ୍ଟେନର ନୋଡକୁ ଟାର୍ଗେଟ କରିବା ଉଚିତ |
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>
.tab ('ଶୋ')
ପ୍ରଦତ୍ତ ତାଲିକା ଆଇଟମ୍ ଚୟନ କରେ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଦେଖାଏ | ଅନ୍ୟ କ list ଣସି ତାଲିକା ଆଇଟମ୍ ଯାହା ପୂର୍ବରୁ ମନୋନୀତ ହୋଇଥିଲା ତାହା ଅଣ-ମନୋନୀତ ହୋଇଯାଏ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଲୁଚି ରହିଥାଏ | ଟ୍ୟାବ୍ ପେନ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, shown.bs.tab
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) |
$('#someListItem').tab('show')
ଘଟଣା
ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଇବାବେଳେ, ଘଟଣାଗୁଡ଼ିକ ନିମ୍ନ କ୍ରମରେ ନିଆଁ ଲାଗେ:
hide.bs.tab
(ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଉପରେ)show.bs.tab
(ଦେଖାଯିବାକୁ ଥିବା ଟ୍ୟାବ୍ ଉପରେ)hidden.bs.tab
(ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବରେ,hide.bs.tab
ଇଭେଣ୍ଟ ପାଇଁ ସମାନ)shown.bs.tab
(ନୂତନ-ସକ୍ରିୟ କେବଳ ପ୍ରଦର୍ଶିତ ଟ୍ୟାବରେ,show.bs.tab
ଇଭେଣ୍ଟ ପାଇଁ ସମାନ)
ଯଦି କ tab ଣସି ଟ୍ୟାବ୍ ପୂର୍ବରୁ ସକ୍ରିୟ ନଥିଲା, hide.bs.tab
ଏବଂ hidden.bs.tab
ଇଭେଣ୍ଟଗୁଡିକ ଫାୟାର୍ ହେବ ନାହିଁ |
ଇଭେଣ୍ଟ ପ୍ରକାର | | ବର୍ଣ୍ଣନା |
---|---|
show.bs.tab | ଏହି ଇଭେଣ୍ଟ ଟ୍ୟାବ୍ ଶୋରେ ନିଆଁ ଲାଗେ, କିନ୍ତୁ ନୂଆ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପୂର୍ବରୁ | ଯଥାକ୍ରମେ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ (ଯଦି ଉପଲବ୍ଧ) ବ୍ୟବହାର କରନ୍ତୁ event.target ଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget |
show.bs.tab | ଏକ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ଟ୍ୟାବ୍ ସୋରେ ନିଆଁ ଲାଗେ | ଯଥାକ୍ରମେ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ (ଯଦି ଉପଲବ୍ଧ) ବ୍ୟବହାର କରନ୍ତୁ event.target ଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget |
hide.bs.tab | ଯେତେବେଳେ ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଯିବାକୁ ହେବ (ଏବଂ ଏହିପରି ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଲୁକ୍କାୟିତ ହେବ) ଏହି ଘଟଣାଟି ଅଗ୍ନି ସଂଯୋଗ କରେ | ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ନୂତନ ଶୀଘ୍ର-ସକ୍ରିୟ ହେବାକୁ ଥିବା ଟ୍ୟାବ୍ ଯଥାକ୍ରମେ ବ୍ୟବହାର କରନ୍ତୁ event.target ଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget |
hidden.bs.tab | ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ଅଗ୍ନି ସଂଯୋଗ କରେ (ଏବଂ ଏହିପରି ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଲୁକ୍କାୟିତ) | ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ନୂତନ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଯଥାକ୍ରମେ ବ୍ୟବହାର କରନ୍ତୁ event.target ଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})