ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
Check
in English

گۇرۇپپا

تىزىملىك ​​گۇرۇپپىلىرى بىر يۈرۈش مەزمۇنلارنى كۆرسىتىشنىڭ جانلىق ۋە كۈچلۈك تەركىبىي قىسمى. ئۇلارنى ئۆزگەرتىپ كېڭەيتىپ ، ئىچىدىكى مەزمۇنلارنىلا قوللاڭ.

بۇ بەتتە

ئاساسلىق مىسال

ئەڭ ئاساسلىق تىزىملىك ​​گۇرۇپپىسى تىزىملىك ​​تۈرلىرى ۋە مۇۋاپىق دەرسلەر بىلەن تەرتىپسىز تىزىملىك. ئۇنىڭغا ئەگىشىدىغان تاللاشلار ياكى ئېھتىياجغا ئاساسەن ئۆزىڭىزنىڭ CSS ئارقىلىق قۇرۇڭ.

  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • تۆتىنچى تۈر
  • بەشىنچى
html 
<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

  • ئاكتىپ تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • تۆتىنچى تۈر
  • بەشىنچى
html 
<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

  • چەكلەنگەن تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • تۆتىنچى تۈر
  • بەشىنچى
html 
<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 كاپالەتلىك قىلىڭ .

نۆۋەتتىكى ئۇلىنىش تۈرى ئىككىنچى ئۇلىنىش تۈرى ئۈچىنچى ئۇلىنىش تۈرى تۆتىنچى ئۇلىنىش تۈرى چەكلەنگەن ئۇلىنىش تۈرى
html 
<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>پايدىلانسىڭىزمۇ بولىدۇ . كىشىنى ئەپسۇسلاندۇرىدىغىنى ، s چەكلەنگەن خاسلىقنى قوللىمايدۇ.disabled.disabled<a>

html 
<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 button 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بىر قىسىم چېگرا ۋە يۇمىلاق بۇلۇڭلارنى چىقىرىپ تاشلاپ ، تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرلىرىنى ئانا قاچىدا (مەسىلەن كارتا) كۆرسىتىدۇ .

  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • تۆتىنچى تۈر
  • بەشىنچى
html 
<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-incrementcontent

  1. تىزىملىك ​​تۈرى
  2. تىزىملىك ​​تۈرى
  3. تىزىملىك ​​تۈرى
html 
<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>

بۇلار خاس مەزمۇنلار بىلەنمۇ ياخشى ئىشلەيدۇ.

  1. Subheading
    تىزىملىك ​​تۈرىنىڭ مەزمۇنى
    14
  2. Subheading
    تىزىملىك ​​تۈرىنىڭ مەزمۇنى
    14
  3. Subheading
    تىزىملىك ​​تۈرىنىڭ مەزمۇنى
    14
html 
<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}بۇ بۆلەكتىن باشلاپ تىزىملىك ​​گۇرۇپپىسىنى توغرىسىغا توغرىلاڭ min-width. ھازىر گورىزونتال تىزىملىك ​​گۇرۇپپىلىرىنى يۇمىلاق تىزىملىك ​​گۇرۇپپىلىرى بىلەن بىرلەشتۈرگىلى بولمايدۇ.

ProTip: توغرىسىغا تەڭ كەڭلىكتىكى تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرلىرىنى خالامسىز؟ .flex-fillھەر بىر گۇرۇپپا گۇرۇپپا تۈرىگە قوشۇڭ .

  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
  • بىر تۈر
  • ئىككىنچى تۈر
  • ئۈچىنچى تۈر
html 
<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>

مەزمۇن دەرسلىرى

مەزمۇن خاراكتېرلىك دەرسلەرنى ئىشلىتىپ ، دۆلەت ئارقا كۆرۈنۈشى ۋە رەڭگى بار تۈرلەرنى رەتلەڭ.

  • ئاددىي سۈكۈتتىكى تىزىملىك ​​گۇرۇپپا تۈرى
  • ئاددى دەسلەپكى تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرى
  • ئاددىي ئىككىلەمچى گۇرۇپپا تۈرى
  • ئاددىي مۇۋەپپەقىيەت تىزىملىكى گۇرۇپپا تۈرى
  • ئاددىي خەتەر تىزىملىكى گۇرۇپپا تۈرى
  • ئاددىي ئاگاھلاندۇرۇش تىزىملىكى گۇرۇپپا تۈرى
  • ئاددىي ئۇچۇر تىزىملىكى گۇرۇپپا تۈرى
  • ئاددىي نۇر تىزىملىكى گۇرۇپپا تۈرى
  • ئاددىي قاراڭغۇ تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرى
html 
<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. ئۇنى ئىشلىتىڭ ، مەزمۇن تىزىملىكى گۇرۇپپا تۈرىدىكى ئاكتىپ تاللاشنى كۆرسىتىدۇ.

ئاددىي سۈكۈتتىكى تىزىملىك ​​گۇرۇپپا تۈرى ئاددى دەسلەپكى تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرى ئاددىي ئىككىلەمچى گۇرۇپپا تۈرى ئاددىي مۇۋەپپەقىيەت تىزىملىكى گۇرۇپپا تۈرى ئاددىي خەتەر تىزىملىكى گۇرۇپپا تۈرى ئاددىي ئاگاھلاندۇرۇش تىزىملىكى گۇرۇپپا تۈرى ئاددىي ئۇچۇر تىزىملىكى گۇرۇپپا تۈرى ئاددىي نۇر تىزىملىكى گۇرۇپپا تۈرى ئاددىي قاراڭغۇ تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرى
html 
<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
html 
<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

بىر ئابزاستىكى بەزى ئورۇن ئىگىلىرى.

يەنە بەزىلىرى كىچىك بېسىلىپ قالدى.
html 
<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زىيارەت قىلىش ئۈچۈن خاسلىق ۋە قىممەتنى قوشۇشنى ئۇنتۇپ قالماڭ.

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

.stretched-linkبارلىق تىزىملىك <label>​​گۇرۇپپىسىنىڭ تۈرلىرىنى چېكىشكە بولىدۇ .

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

ئۆزگەرگۈچى مىقدار

V5.2.0 گە قوشۇلدى

Bootstrap نىڭ تەرەققىي قىلىۋاتقان CSS ئۆزگەرگۈچى مىقدارنىڭ بىر قىسمى بولۇش سۈپىتى بىلەن ، تىزىملىك ​​گۇرۇپپىلىرى يەرلىك CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىپ ، .list-groupدەل ۋاقتىدا خاسلاشتۇرۇشنى كۈچەيتىدۇ. CSS ئۆزگەرگۈچى مىقدارنىڭ قىممىتى Sass ئارقىلىق بەلگىلىنىدۇ ، شۇڭا Sass خاسلاشتۇرۇش يەنىلا قوللىنىدۇ.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

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ھۆججەت ئارقىلىق ئۆز ئىچىگە ئالىدۇ - تىزىملىك ​​گۇرۇپپىمىزنى كېڭەيتىپ ، يەرلىك مەزمۇنلارنىڭ جەدۋەل تاختىسىنى ھاسىل قىلىڭ.

«ئۆي» گە مۇناسىۋەتلىك بىر ئابزاس مەزمۇنى. يەنە بىر قىسىم مەزمۇنلار ، بۇ بەتكۈچ تاختىسىنى تولدۇرۇش ۋە تولدۇرۇش ئۈچۈنلا ئىشلىتىلىدۇ. ئىشلەپچىقىرىشتا ، ئېنىقكى بۇ يەردە تېخىمۇ كۆپ ھەقىقىي مەزمۇنغا ئىگە بولالايسىز. پەقەت تېكىستلا ئەمەس. ئۇ ھەر قانداق ئىش بولۇشى مۇمكىن. تېكىست ، رەسىم ، شەكىل.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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 ئارقىلىق جەدۋەل جەدۋىلىنى قوزغىتىڭ (ھەر بىر تىزىملىك ​​تۈرىنى ئايرىم قوزغىتىش كېرەك):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

يەككە تىزىملىك ​​تۈرىنى بىر قانچە خىل ئۇسۇلدا قوزغىتالايسىز:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const 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

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .

مەزمۇننى بەتكۈچ ئېلېمېنتى سۈپىتىدە قوزغىتىدۇ.

قۇرغۇچى بىلەن بەتكۈچ ئۈلگىسى قۇرالايسىز ، مەسىلەن:

const bsTab = new bootstrap.Tab('#myTab')
ئۇسۇل چۈشەندۈرۈش
dispose ئېلېمېنتنىڭ بەتكۈچىنى بۇزىدۇ.
getInstance تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك بەتكۈچ مىسالىغا ئېرىشەلەيسىز ، ئۇنى تۆۋەندىكىدەك ئىشلىتەلەيسىز : bootstrap.Tab.getInstance(element).
getOrCreateInstance تۇراقلىق ئۇسۇل DOM ئېلېمېنتىغا باغلانغان بەتكۈچ مىسالى قايتۇرىدۇ ياكى باشلانمىغان ئەھۋال ئاستىدا يېڭىسىنى قۇرالايدۇ. ئۇنى مۇنداق ئىشلىتەلەيسىز : bootstrap.Tab.getOrCreateInstance(element).
show بېرىلگەن بەتكۈچنى تاللايدۇ ۋە مۇناسىۋەتلىك تاختىنى كۆرسىتىدۇ. ئىلگىرى تاللانغان باشقا بەتكۈچلەر تاللانمايدۇ ۋە ئۇنىڭغا مۇناسىۋەتلىك كۆزنەك يوشۇرۇنغان. بەتكۈچ تاختىسى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.tab

Events

يېڭى بەتكۈچنى كۆرسەتكەندە ، ۋەقەلەر تۆۋەندىكى تەرتىپ بويىچە ئوت ئالىدۇ:

  1. hide.bs.tab(نۆۋەتتىكى ئاكتىپ بەتكۈچتە)
  2. show.bs.tab(كۆرسىتىلىدىغان بەتكۈچتە)
  3. hidden.bs.tab(ئالدىنقى ئاكتىپ بەتكۈچتە ، hide.bs.tabپائالىيەت بىلەن ئوخشاش)
  4. shown.bs.tab(يېڭىدىن ئاكتىپلانغان ئەمدىلا كۆرسىتىلگەن بەتكۈچتە ، show.bs.tabپائالىيەت بىلەن ئوخشاش)

ئەگەر ھېچقانداق بەتكۈچ ئاكتىپلانمىغان بولسا ، ئۇنداقتا hide.bs.tabۋە hidden.bs.tabۋەقەلەر ئېتىلمايدۇ.

پائالىيەت تىپى چۈشەندۈرۈش
hide.bs.tab يېڭى بەتكۈچ كۆرۈنگەندە بۇ ھادىسە ئوت ئاپىتى يۈز بېرىدۇ (شۇنداق قىلىپ ئالدىنقى ئاكتىپ بەتكۈچ يوشۇرۇن بولىدۇ). نۆۋەتتىكى ئاكتىپ بەتكۈچ ۋە يېڭى پات يېقىندا ئاكتىپلىنىدىغان بەتكۈچنى ئىشلىتىڭ event.targetۋە نىشانلاڭ.event.relatedTarget
hidden.bs.tab بۇ ھادىسە يېڭى بەتكۈچ كۆرسىتىلگەندىن كېيىن ئوت ئاتىدۇ (شۇنداق قىلىپ ئالدىنقى ئاكتىپ بەتكۈچ يوشۇرۇنغان). ئالدىنقى ئاكتىپ بەتكۈچ ۋە يېڭى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.targetۋە event.relatedTargetنىشانلاڭ.
show.bs.tab بۇ پائالىيەت بەتكۈچ كۆرگەزمىسىدە ئوت ئاچىدۇ ، ئەمما يېڭى بەتكۈچ كۆرسىتىلىشتىن بۇرۇن. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.targetۋە نىشانلاڭ.event.relatedTarget
shown.bs.tab بۇ ھادىسە بەتكۈچ كۆرسىتىلگەندىن كېيىن بەتكۈچتە كۆرۈنىدۇ. ئاكتىپ بەتكۈچ ۋە ئالدىنقى ئاكتىپ بەتكۈچنى ئىشلىتىڭ event.targetۋە نىشانلاڭ.event.relatedTarget 
const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})