ଗୋଷ୍ଠୀ ତାଲିକା |
ତାଲିକା ଗୋଷ୍ଠୀଗୁଡ଼ିକ ଏକ ଶୃଙ୍ଖଳା ପ୍ରଦର୍ଶନ ପାଇଁ ଏକ ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ଉପାଦାନ | ଭିତରର ଯେକ 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-numbered
ଅକ୍ଷର ମଧ୍ଯ ବ୍ୟବହାର <ol>
କରି। <ol>
ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମଗୁଡିକ ମଧ୍ୟରେ ଉନ୍ନତ ସ୍ଥାନିତ ଏବଂ ଉନ୍ନତ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ଅନୁମତି ଦେବା ପାଇଁ ସଂଖ୍ୟାଗୁଡିକ CSS ମାଧ୍ୟମରେ ସୃଷ୍ଟି ହୋଇଥାଏ (ଏକ ଡିଫଲ୍ଟ ବ୍ରାଉଜର୍ ଷ୍ଟାଇଲିଂର ବିପରୀତ ) |
ସଂଖ୍ୟାଗୁଡ଼ିକ ଦ୍ୱାରା ଉତ୍ପନ୍ନ ହୁଏ counter-reset
, <ol>
ଏବଂ ତା’ପରେ ଷ୍ଟାଇଲ୍ ହୋଇ ଏବଂ ସହିତ ଏକ ଛଉ ::before
-ଉପାଦାନ <li>
ସହିତ ରଖାଯାଇଥାଏ |counter-increment
content
- ଏକ ତାଲିକା ଆଇଟମ୍ |
- ଏକ ତାଲିକା ଆଇଟମ୍ |
- ଏକ ତାଲିକା ଆଇଟମ୍ |
<ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
</ol>
କଷ୍ଟମ୍ ବିଷୟବସ୍ତୁ ସହିତ ଏଗୁଡିକ ମଧ୍ୟ ଭଲ କାମ କରେ |
-
ଉପ-ଶୀର୍ଷକତାଲିକା ଆଇଟମ୍ ପାଇଁ ବିଷୟବସ୍ତୁ |
-
ଉପ-ଶୀର୍ଷକତାଲିକା ଆଇଟମ୍ ପାଇଁ ବିଷୟବସ୍ତୁ |
-
ଉପ-ଶୀର୍ଷକତାଲିକା ଆଇଟମ୍ ପାଇଁ ବିଷୟବସ୍ତୁ |
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
ଭୂସମାନ୍ତର
.list-group-horizontal
ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟଗୁଡିକରେ ଭୂଲମ୍ବରୁ ଭୂସମାନ୍ତର ପର୍ଯ୍ୟନ୍ତ ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମଗୁଡିକର ଲେଆଉଟ୍ ପରିବର୍ତ୍ତନ କରିବାକୁ ଯୋଡନ୍ତୁ | .list-group-horizontal-{sm|md|lg|xl|xxl}
ବ 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>
<ul class="list-group list-group-horizontal-xxl">
<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>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .visually-hidden
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ବ୍ୟାଜ୍ ସହିତ |
କିଛି ଉପଯୋଗିତା ସାହାଯ୍ୟରେ ପ 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 bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-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" aria-current="true">
<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>
ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ |
ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମ୍ ମଧ୍ୟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ରଖନ୍ତୁ ଏବଂ ଆବଶ୍ୟକ ଅନୁଯାୟୀ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ | ଆପଣ ସେଗୁଡିକ ବିନା ସେଗୁଡିକ ବ୍ୟବହାର କରିପାରିବେ , କିନ୍ତୁ ଦୟାକରି ଆକ୍ସେସିବିଲିଟି ପାଇଁ ଏକ ଗୁଣ ଏବଂ ମୂଲ୍ୟ <label>
ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ମନେରଖନ୍ତୁ |aria-label
- ପ୍ରଥମେ ଚେକ୍ ବକ୍ସ |
- ଦ୍ୱିତୀୟ ଚେକ୍ ବକ୍ସ |
- ତୃତୀୟ ଚେକ୍ ବକ୍ସ |
- ଚତୁର୍ଥ ଚେକ୍ ବକ୍ସ |
- ପଞ୍ଚମ ଚେକ୍ ବକ୍ସ |
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
ଏବଂ ଯଦି ଆପଣ ବଡ଼ ହିଟ୍ କ୍ଷେତ୍ରଗୁଡିକ ପାଇଁ ଚାହାଁନ୍ତି, ଆପଣ ମଧ୍ୟ ତାହା କରିପାରିବେ <label>
|.list-group-item
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
ସାସ୍ |
ଭେରିଏବଲ୍ |
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
ମିକ୍ସନ୍ସ |
S ପାଇଁ ପ୍ରସଙ୍ଗଭିତ୍ତିକ ପ୍ରକାର ଶ୍ରେଣୀ$theme-colors
ସୃଷ୍ଟି କରିବାକୁ ମିଳିତ ଭାବରେ ବ୍ୟବହୃତ ହୁଏ |.list-group-item
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
ଲୁପ୍ |
ଲୁପ୍ ଯାହା ମିକ୍ସିନ ସହିତ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସୃଷ୍ଟି କରେ list-group-item-variant()
|
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
ଜାଭାସ୍କ୍ରିପ୍ଟ ଆଚରଣ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଟ୍ୟାବ୍ ବ୍ୟବହାର କରନ୍ତୁ - ଏହାକୁ ବ୍ୟକ୍ତିଗତ ଭାବରେ କିମ୍ବା ସଂକଳିତ 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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-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>
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଟ୍ୟାବଲ୍ ଟେବୁଲ୍ ଆଇଟମ୍ ସକ୍ଷମ କରନ୍ତୁ (ପ୍ରତ୍ୟେକ ତାଲିକା ଆଇଟମ୍ ପୃଥକ ଭାବରେ ସକ୍ରିୟ ହେବା ଆବଶ୍ୟକ):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
ଆପଣ ବିଭିନ୍ନ ଉପାୟରେ ବ୍ୟକ୍ତିଗତ ତାଲିକା ଆଇଟମ୍ ସକ୍ରିୟ କରିପାରିବେ:
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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>
ପ୍ରଣାଳୀ
constructor
ଏକ ତାଲିକା ଆଇଟମ୍ ଉପାଦାନ ଏବଂ ବିଷୟବସ୍ତୁ ପାତ୍ରକୁ ସକ୍ରିୟ କରିଥାଏ | ଟ୍ୟାବରେ DOM ରେ data-bs-target
ଏକ href
କଣ୍ଟେନର ନୋଡକୁ ଟାର୍ଗେଟ କରିବା ଉଚିତ |
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-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>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
show
ପ୍ରଦତ୍ତ ତାଲିକା ଆଇଟମ୍ ଚୟନ କରେ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଦେଖାଏ | ଅନ୍ୟ କ list ଣସି ତାଲିକା ଆଇଟମ୍ ଯାହା ପୂର୍ବରୁ ମନୋନୀତ ହୋଇଥିଲା ତାହା ଅଣ-ମନୋନୀତ ହୋଇଯାଏ ଏବଂ ଏହାର ସଂପୃକ୍ତ ପେନ୍ ଲୁଚି ରହିଥାଏ | ଟ୍ୟାବ୍ ପେନ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ କଲର୍ କୁ ଫେରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ, shown.bs.tab
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) |
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
ଏକ ଉପାଦାନର ଟ୍ୟାବ୍ ନଷ୍ଟ କରେ |
getInstance
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଟ୍ୟାବ୍ ଉଦାହରଣ ପାଇବାକୁ ଅନୁମତି ଦିଏ |
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଟ୍ୟାବ୍ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ, କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ |
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
ଘଟଣା
ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଇବାବେଳେ, ଘଟଣାଗୁଡ଼ିକ ନିମ୍ନ କ୍ରମରେ ନିଆଁ ଲାଗେ:
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 |
shown.bs.tab |
ଏକ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ଟ୍ୟାବ୍ ଶୋ’ରେ ନିଆଁ ଲାଗେ | ଯଥାକ୍ରମେ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ (ଯଦି ଉପଲବ୍ଧ) ବ୍ୟବହାର କରନ୍ତୁ event.target ଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget |
hide.bs.tab |
ଯେତେବେଳେ ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଯିବାକୁ ହେବ (ଏବଂ ଏହିପରି ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଲୁକ୍କାୟିତ ହେବ) ଏହି ଘଟଣାଟି ଅଗ୍ନି ସଂଯୋଗ କରେ | ସାମ୍ପ୍ରତିକ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ନୂତନ ଶୀଘ୍ର-ସକ୍ରିୟ ହେବାକୁ ଥିବା ଟ୍ୟାବ୍ ଯଥାକ୍ରମେ ବ୍ୟବହାର କରନ୍ତୁ event.target ଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget |
hidden.bs.tab |
ଏକ ନୂତନ ଟ୍ୟାବ୍ ଦେଖାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ଅଗ୍ନି ସଂଯୋଗ କରେ (ଏବଂ ଏହିପରି ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଲୁକ୍କାୟିତ) | ପୂର୍ବ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଏବଂ ନୂତନ ସକ୍ରିୟ ଟ୍ୟାବ୍ ଯଥାକ୍ରମେ ବ୍ୟବହାର କରନ୍ତୁ event.target ଏବଂ ଟାର୍ଗେଟ୍ କରନ୍ତୁ |event.relatedTarget |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}