گۇرۇپپا
تىزىملىك گۇرۇپپىلىرى بىر يۈرۈش مەزمۇنلارنى كۆرسىتىشنىڭ جانلىق ۋە كۈچلۈك تەركىبىي قىسمى. ئۇلارنى ئۆزگەرتىپ كېڭەيتىپ ، ئىچىدىكى مەزمۇنلارنىلا قوللاڭ.
ئاساسلىق مىسال
ئەڭ ئاساسلىق تىزىملىك گۇرۇپپىسى تىزىملىك تۈرلىرى ۋە مۇۋاپىق دەرسلەر بىلەن تەرتىپسىز تىزىملىك. ئۇنىڭغا ئەگىشىدىغان تاللاشلار ياكى ئېھتىياجغا ئاساسەن ئۆزىڭىزنىڭ 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
- ئاكتىپ تۈر
- A second item
- A third item
- A fourth item
- And a fifth one
<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
ئۈچۈن a .list-group-item
غا قوشۇڭ . شۇنىڭغا دىققەت قىلىڭكى ، بەزى ئېلېمېنتلار چېكىش ھادىسىلىرىنى (مەسىلەن ، ئۇلىنىشلارنى) تولۇق چەكلەش ئۈچۈن ئىختىيارى JavaScript تەلەپ قىلىدۇ..disabled
- چەكلەنگەن تۈر
- A second item
- A third item
- A fourth item
- And a fifth one
<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 ياكى <button>
s نى ئىشلىتىپ قوشۇش ئارقىلىق چەكلەنگەن ، چەكلەنگەن ۋە ئاكتىپ ھالەتتىكى ھەرىكەتچان گۇرۇپپا تۈرلىرىنى قۇرالايسىز .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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
S ئارقىلىق ، سىنىپنىڭ ئورنىغا خاسلىقتىن <button>
پايدىلانسىڭىزمۇ بولىدۇ . كىشىنى ئەپسۇسلاندۇرىدىغىنى ، s چەكلەنگەن خاسلىقنى قوللىمايدۇ.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>
Flush
.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
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
بۇلار خاس مەزمۇنلار بىلەنمۇ ياخشى ئىشلەيدۇ.
-
SubheadingCras justo odio
-
SubheadingCras justo odio
-
SubheadingCras justo odio
<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>
Cras justo odio
</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>
Cras justo odio
</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>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
توغرىسىغا
.list-group-horizontal
تىزىملىك گۇرۇپپىسىنىڭ تۈرلىرىنىڭ ئورۇنلاشتۇرۇلۇشىنى بارلىق بۆلەكلەردىن توغرىسىغا توغرىسىغا توغرىلاڭ . ئۇنىڭدىن باشقا ، ئىنكاس بۆلىكىنى تاللاڭ ، .list-group-horizontal-{sm|md|lg|xl|xxl}
بۇ بۆلەكتىن باشلاپ تىزىملىك گۇرۇپپىسىنى توغرىسىغا توغرىلاڭ 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>
مەزمۇن دەرسلىرى
مەزمۇن خاراكتېرلىك دەرسلەرنى ئىشلىتىپ ، دۆلەت ئارقا كۆرۈنۈشى ۋە رەڭگىدىكى تۈرلەرنى رەتلەڭ.
- ئاددىي سۈكۈتتىكى تىزىملىك گۇرۇپپا تۈرى
- ئاددى دەسلەپكى تىزىملىك گۇرۇپپىسىنىڭ تۈرى
- ئاددىي ئىككىلەمچى گۇرۇپپا تۈرى
- ئاددىي مۇۋەپپەقىيەت تىزىملىكى گۇرۇپپا تۈرى
- ئاددىي خەتەر تىزىملىكى گۇرۇپپا تۈرى
- ئاددىي ئاگاھلاندۇرۇش تىزىملىكى گۇرۇپپا تۈرى
- ئاددىي ئۇچۇر تىزىملىكى گۇرۇپپا تۈرى
- ئاددىي نۇر تىزىملىكى گۇرۇپپا تۈرى
- ئاددىي قاراڭغۇ تىزىملىك گۇرۇپپىسىنىڭ تۈرى
<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
. ئالدىنقى مىسالدا يوق بۇ يەردىكى hover ئۇسلۇبىنىڭ قوشۇلۇشىغا دىققەت قىلىڭ. دۆلەت قوللايدۇ .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
دەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.
بەلگە بىلەن
ھەر قانداق تىزىملىك گۇرۇپپىسىنىڭ تۈرلىرىگە بەلگە قوشۇڭ ، بەزى ئاممىۋى مۇلازىمەتلەرنىڭ ياردىمىدە ئوقۇلمىغان سان ، پائالىيەت ۋە باشقىلارنى كۆرسىتىدۇ .
- تىزىملىك تۈرى14
- ئىككىنچى تىزىملىك تۈرى2
- ئۈچىنچى تىزىملىك تۈرى1
<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>
خاس مەزمۇن
Flexbox قورالىنىڭ ياردىمىدە ، تۆۋەندىكى HTML غا ئۇلانغان تىزىملىك گۇرۇپپىلىرىغا ئاساسەن HTML نى قوشۇڭ .
گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ
3 days agoبىر ئابزاستىكى بەزى ئورۇن ئىگىلىرى.
يەنە بىر قىسىم كىچىك بېسىش.گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ
3 days agoبىر ئابزاستىكى بەزى ئورۇن ئىگىلىرى.
يەنە بەزىلىرى كىچىك بېسىلىپ قالدى.گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ
3 days agoبىر ئابزاستىكى بەزى ئورۇن ئىگىلىرى.
يەنە بەزىلىرى كىچىك بېسىلىپ قالدى.<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>
تەكشۈرۈش رامكىسى ۋە رادىئو
Bootstrap نىڭ تەكشۈرۈش رامكىسى ۋە رادىئوسىنى گۇرۇپپا تۈرلىرىنىڭ ئىچىگە قويۇپ ، ئېھتىياجغا ئاساسەن خاسلاشتۇرۇڭ. <label>
ئۇلارنى s ئىشلەتمەي ئىشلىتەلەيسىز ، ئەمما 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>
Sass
ئۆزگەرگۈچى مىقدار
$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;
Mixins
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;
}
}
}
}
Loop
ئارىلاشتۇرۇش ئارقىلىق ئۆزگەرتىش سىنىپى ھاسىل قىلىدىغان 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);
}
JavaScript ھەرىكىتى
بەتكۈچ JavaScript قىستۇرمىسىنى ئىشلىتىڭ - ئۇنى ئايرىم ياكى تۈزۈلگەن 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>
سانلىق مەلۇمات خاسلىقىنى ئىشلىتىش
سىز پەقەت JavaScript نى يازماي تۇرۇپلا بىر گۇرۇپپا گۇرۇپپا يول باشلاشنى قوزغىتالايسىز data-bs-toggle="list"
. بۇ سانلىق مەلۇمات خاسلىقىنى ئىشلىتىڭ .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>
JavaScript ئارقىلىق
JavaScript ئارقىلىق جەدۋەل جەدۋىلىنى قوزغىتىڭ (ھەر بىر تىزىملىك تۈرىنى ئايرىم قوزغىتىش كېرەك):
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>
Methods
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
بېرىلگەن تىزىملىك تۈرىنى تاللايدۇ ۋە مۇناسىۋەتلىك تاختىنى كۆرسىتىدۇ. ئىلگىرى تاللانغان باشقا تىزىملىك تۈرلىرى تاللانمايدۇ ۋە ئۇنىڭغا مۇناسىۋەتلىك كۆزنەك يوشۇرۇنغان. بەتكۈچ تاختىسى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن تېلېفون ئۇرغۇچىغا قايتىدۇ (مەسىلەن ، shown.bs.tab
ۋەقە يۈز بېرىشتىن بۇرۇن).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
بىر تەرەپ قىلىش
ئېلېمېنتنىڭ بەتكۈچىنى بۇزىدۇ.
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
Events
يېڭى بەتكۈچنى كۆرسەتكەندە ، ۋەقەلەر تۆۋەندىكى تەرتىپ بويىچە ئوت ئالىدۇ:
hide.bs.tab
(نۆۋەتتىكى ئاكتىپ بەتكۈچتە)show.bs.tab
(كۆرسىتىلىدىغان بەتكۈچتە)hidden.bs.tab
(ئالدىنقى ئاكتىپ بەتكۈچتە ،hide.bs.tab
پائالىيەت بىلەن ئوخشاش)shown.bs.tab
(يېڭىدىن ئاكتىپلانغان ئەمدىلا كۆرسىتىلگەن بەتكۈچتە ،show.bs.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
})
}