ଗୋଷ୍ଠୀ ତାଲିକା |
ତାଲିକା ଗୋଷ୍ଠୀଗୁଡ଼ିକ ଏକ ଶୃଙ୍ଖଳା ପ୍ରଦର୍ଶନ ପାଇଁ ଏକ ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ଉପାଦାନ | ଭିତରର ଯେକ content ଣସି ବିଷୟବସ୍ତୁକୁ ସମର୍ଥନ କରିବାକୁ ସେମାନଙ୍କୁ ପରିବର୍ତ୍ତନ ଏବଂ ବିସ୍ତାର କର |
ସବୁଠାରୁ ମ basic ଳିକ ତାଲିକା ଗୋଷ୍ଠୀ ହେଉଛି ତାଲିକା ଆଇଟମ୍ ଏବଂ ଉପଯୁକ୍ତ ଶ୍ରେଣୀ ସହିତ ଏକ ଅନିୟମିତ ତାଲିକା | ଅନୁସରଣ କରୁଥିବା ବିକଳ୍ପଗୁଡ଼ିକ ସହିତ, କିମ୍ବା ଆବଶ୍ୟକ ଅନୁଯାୟୀ ନିଜସ୍ୱ CSS ସହିତ ଏହା ଉପରେ ନିର୍ମାଣ କରନ୍ତୁ |
- କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |
- Dapibus ac facilisis in
- ମୋର୍ବି ଲିଓ ରିସସ୍ |
- Porta ac consectetur ac
- ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଚୟନକୁ ସୂଚାଇବା .active
ପାଇଁ a କୁ ଯୋଡନ୍ତୁ |.list-group-item
- କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |
- Dapibus ac facilisis in
- ମୋର୍ବି ଲିଓ ରିସସ୍ |
- Porta ac consectetur ac
- ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ଏହାକୁ ଅକ୍ଷମ ଦେଖାଯିବା.disabled
ପାଇଁ ଏକ ସହିତ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ କିଛି ଉପାଦାନ ସହିତ ସେମାନଙ୍କର କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ (ଯଥା, ଲିଙ୍କଗୁଡିକ) ସଂପୂର୍ଣ୍ଣ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ମଧ୍ୟ ଆବଶ୍ୟକ ହେବ |.list-group-item
.disabled
- କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |
- Dapibus ac facilisis in
- ମୋର୍ବି ଲିଓ ରିସସ୍ |
- Porta ac consectetur ac
- ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
<ul class="list-group">
<li class="list-group-item disabled">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</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">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
S ସହିତ , ଆପଣ ଶ୍ରେଣୀ ପରିବର୍ତ୍ତେ ଗୁଣର <button>
ବ୍ୟବହାର ମଧ୍ୟ କରିପାରିବେ | ଦୁ ly ଖର ବିଷୟ, ଅକ୍ଷମ ଗୁଣକୁ ସମର୍ଥନ କରେ ନାହିଁ |disabled
.disabled
<a>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
.list-group-flush
ଏକ ପ୍ୟାରେଣ୍ଟ୍ ପାତ୍ରରେ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ଗୁଡ଼ିକୁ ଏଣ୍ଡ-ଟୁ-ଏଣ୍ଡ୍ ରେଣ୍ଡର୍ କରିବାକୁ କିଛି ସୀମା ଏବଂ ଗୋଲାକାର କୋଣଗୁଡିକ ଅପସାରଣ କରିବାକୁ ଯୋଡନ୍ତୁ (ଯଥା, କାର୍ଡ) |
- କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |
- Dapibus ac facilisis in
- ମୋର୍ବି ଲିଓ ରିସସ୍ |
- Porta ac consectetur ac
- ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ଏକ ସ୍ଥିତିଗତ ପୃଷ୍ଠଭୂମି ଏବଂ ରଙ୍ଗ ସହିତ ଆଇଟମ୍ ତାଲିକା ଶ style ଳୀ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |
- Dapibus ac facilisis in
- ଏହା ଏକ ପ୍ରାଥମିକ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏହା ଏକ ଦଳୀୟ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏହା ଏକ ସଫଳତା ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏହା ଏକ ବିପଦ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏହା ଏକ ଚେତାବନୀ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏହା ଏକ ସୂଚନା ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏହା ଏକ ହାଲୁକା ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
- ଏହା ଏକ ଗା dark ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ |
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-success">This is a success list group item</li>
<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
<li class="list-group-item list-group-item-info">This is a info list group item</li>
<li class="list-group-item list-group-item-light">This is a light list group item</li>
<li class="list-group-item list-group-item-dark">This is a 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">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-only
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
କିଛି ଉପଯୋଗିତା ସାହାଯ୍ୟରେ ପ read ଼ାଯାଇଥିବା ଗଣନା, କାର୍ଯ୍ୟକଳାପ, ଏବଂ ଅଧିକ ଦେଖାଇବାକୁ ଯେକ any ଣସି ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମରେ ବ୍ୟାଜ୍ ଯୋଡନ୍ତୁ |
- କ୍ରାସ୍ ଜଷ୍ଟୋ ଓଡିଓ |14
- Dapibus ac facilisis in୨
- ମୋର୍ବି ଲିଓ ରିସସ୍ |୧
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟିଜ୍ ସାହାଯ୍ୟରେ ନିମ୍ନରେ ଥିବା ତାଲିକା ଗୋଷ୍ଠୀ ପାଇଁ ମଧ୍ୟ ପ୍ରାୟ ଯେକ HTML ଣସି HTML ଯୋଡନ୍ତୁ |
ଗୋଷ୍ଠୀ ଆଇଟମ୍ ହେଡିଙ୍ଗ୍ ତାଲିକା କର |
3 ଦିନ ପୂର୍ବରୁEget metus ରେ Donec id elit non mi porta gravida | Maecenas sed diam eget risus varius blandit।
Donec id elit non mi porta |ଗୋଷ୍ଠୀ ଆଇଟମ୍ ହେଡିଙ୍ଗ୍ ତାଲିକା କର |
3 ଦିନ ପୂର୍ବରୁEget metus ରେ Donec id elit non mi porta gravida | Maecenas sed diam eget risus varius blandit।
Donec id elit non mi porta |ଗୋଷ୍ଠୀ ଆଇଟମ୍ ହେଡିଙ୍ଗ୍ ତାଲିକା କର |
3 ଦିନ ପୂର୍ବରୁEget metus ରେ Donec id elit non mi porta gravida | Maecenas sed diam eget risus varius blandit।
Donec id elit non mi porta |<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଟ୍ୟାବ୍ ବ୍ୟବହାର କରନ୍ତୁ - ଏହାକୁ ବ୍ୟକ୍ତିଗତ ଭାବରେ କିମ୍ବା ସଂକଳିତ bootstrap.js
ଫାଇଲ୍ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ - ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁର ଟ୍ୟାବଲ୍ ଟେବୁଲ୍ ତିଆରି କରିବାକୁ ଆମର ତାଲିକା ଗୋଷ୍ଠୀକୁ ବିସ୍ତାର କରିବାକୁ |
data-toggle="list"
ଆପଣ କେବଳ ନିର୍ଦ୍ଦିଷ୍ଟ କିମ୍ବା ଏକ ଉପାଦାନରେ କ Java ଣସି ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖି ବିନା ଏକ ତାଲିକା ଗୋଷ୍ଠୀ ନାଭିଗେସନ୍ ସକ୍ରିୟ କରିପାରିବେ | ଏହି ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ .list-group-item
|
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟ୍ୟାବଲ୍ ଟେବୁଲ୍ ଆଇଟମ୍ ସକ୍ଷମ କରନ୍ତୁ (ପ୍ରତ୍ୟେକ ତାଲିକା ଆଇଟମ୍ ପୃଥକ ଭାବରେ ସକ୍ରିୟ ହେବା ଆବଶ୍ୟକ):
ଆପଣ ବିଭିନ୍ନ ଉପାୟରେ ବ୍ୟକ୍ତିଗତ ତାଲିକା ଆଇଟମ୍ ସକ୍ରିୟ କରିପାରିବେ:
ଟ୍ୟାବ୍ସ ପ୍ୟାନେଲକୁ ଦୁର୍ବଳ କରିବାକୁ, .fade
ପ୍ରତ୍ୟେକରେ ଯୋଗ କରନ୍ତୁ .tab-pane
| ପ୍ରଥମ ଟ୍ୟାବ୍ ପେନ୍ ମଧ୍ୟ .show
ପ୍ରାରମ୍ଭିକ ବିଷୟବସ୍ତୁକୁ ଦୃଶ୍ୟମାନ କରିବାକୁ ପଡିବ |
ଏକ ତାଲିକା ଆଇଟମ୍ ଉପାଦାନ ଏବଂ ବିଷୟବସ୍ତୁ ପାତ୍ରକୁ ସକ୍ରିୟ କରିଥାଏ | ଟ୍ୟାବରେ DOM ରେ data-target
ଏକ href
କଣ୍ଟେନର ନୋଡକୁ ଟାର୍ଗେଟ କରିବା ଉଚିତ |
ପ୍ରଦତ୍ତ ତାଲିକା ଆଇଟମ୍ ଚୟନ କରେ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଦେଖାଏ | ଅନ୍ୟ କ list ଣସି ତାଲିକା ଆଇଟମ୍ ଯାହା ପୂର୍ବରୁ ମନୋନୀତ ହୋଇଥିଲା ତାହା ଅଣ-ମନୋନୀତ ହୋଇଯାଏ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଲୁଚି ରହିଥାଏ | ଟ୍ୟାବ୍ ପେନ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, shown.bs.tab
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) |
ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଇବାବେଳେ, ଘଟଣାଗୁଡ଼ିକ ନିମ୍ନ କ୍ରମରେ ନିଆଁ ଲାଗେ:
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 | This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown.bs.tab | This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
hide.bs.tab | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
hidden.bs.tab | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |