in English

רשימה גרופּע

רשימה גרופּעס זענען אַ פלעקסאַבאַל און שטאַרק קאָמפּאָנענט פֿאַר ווייַזנדיק אַ סעריע פון אינהאַלט. מאָדיפיצירן און פאַרברייטערן זיי צו שטיצן כּמעט קיין אינהאַלט ין.

יקערדיק בייַשפּיל

די מערסט יקערדיק רשימה גרופּע איז אַן אַנאָרדערד רשימה מיט רשימה זאכן און די געהעריק קלאסן. בויען אויף עס מיט די פאלגענדע אָפּציעס, אָדער מיט דיין אייגענע 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צו אַ .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 אָדער <button>s צו שאַפֿן אַקטיאָנאַבלע רשימה גרופּע ייטאַמז מיט האָווער, פאַרקריפּלט און אַקטיוו שטאַטן דורך אַדינג .list-group-item-action. מיר צעטיילן די פּסעוודאָ-קלאסן צו ענשור אַז רשימה גרופּעס געמאכט פון ניט-ינטעראַקטיוו עלעמענטן (ווי <li>s אָדער <div>s) טאָן ניט געבן אַ קליק אָדער צאַפּן אַפאָרדאַנס.

זייט זיכער צו נישט נוצן די נאָרמאַל .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>

מיט <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>

פלאש

לייג .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}צו מאַכן אַ רשימה גרופּע האָריזאָנטאַל סטאַרטינג בייַ די ברייקפּוינט min-width. דערווייַל האָריזאָנטאַל רשימה גרופּעס קענען ניט זיין קאַמביינד מיט גלייַך רשימה גרופּעס.

פּראָטיפּ: ווילן גלייך ברייט רשימה גרופּע זאכן ווען האָריזאָנטאַל? לייג .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">
  <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. באַמערקונג די אַדישאַן פון די האָווער סטיילז דאָ נישט פאָרשטעלן אין די פריערדיקע בייַשפּיל. אויך געשטיצט איז די .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קלאַס.

מיט באַדזשיז

לייג באַדזשיז צו קיין רשימה גרופּע נומער צו ווייַזן אַנריד קאַונץ, אַקטיוויטעטן און מער מיט די הילף פון עטלעכע יוטילאַטיז .

א רשימה נומער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 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 ין, אפילו פֿאַר לינגקט רשימה גרופּעס ווי דער אונטן, מיט די הילף פון פלעקסבאָקס יוטילאַטיז .

רשימה גרופּע נומער כעדינג

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טעקע-צו פאַרברייטערן אונדזער רשימה גרופּע צו שאַפֿן טאַבאַבלע פּאַנעס פון היגע אינהאַלט.

היים פּראָפיל אַרטיקלען סעטטינגס

עטלעכע אָרטהאָלדער אינהאַלט אין אַ פּאַראַגראַף רילייטינג צו "היים". און עטלעכע מער אינהאַלט, געוויינט דאָ נאָר צו ויסשליסן און פּלאָמבירן דעם קוויטל טאַפליע. אין פּראָדוקציע, איר וואָלט דאָך האָבן מער פאַקטיש אינהאַלט דאָ. און ניט נאָר טעקסט. עס קען זיין עפּעס, טאַקע. טעקסט, בילדער, פארמען.

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-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"אָדער אויף אַן עלעמענט. ניצן די דאַטן אַטריביוץ אויף .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>

מעטהאָדס

$().tab

אַקטאַווייץ אַ רשימה נומער עלעמענט און אינהאַלט קאַנטיינער. טאַב זאָל האָבן אַ data-targetאָדער אַ hrefטאַרגאַטינג אַ קאַנטיינער נאָדע אין די DOM.

<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('ווייַזן')

סאַלעקץ די געגעבן רשימה נומער און ווייזט זייַן פֿאַרבונדן שויב. קיין אנדערע רשימה נומער וואָס איז געווען פריער אויסגעקליבן ווערט אַנסעלעקטעד און זיין פֿאַרבונדן שויב איז פאַרבאָרגן. קערט צו די קאַללער איידער די קוויטל שויב איז אַקטשאַוואַלי געוויזן (למשל איידער די shown.bs.tabגעשעעניש אַקערז).

$('#someListItem').tab('show')

געשעענישן

ווען איר ווייַזן אַ נייַע קוויטל, די געשעענישן לויפן אין די פאלגענדע סדר:

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`צו ציל די אַקטיוו קוויטל און די פריערדיקע אַקטיוו קוויטל (אויב בנימצא) ריספּעקטיוולי.
געוויזן.בס.טאַב	דער געשעעניש פירט אויף די קוויטל ווייַזן נאָך אַ קוויטל איז געוויזן. ניצן `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
})