Source

רשימה גרופּע

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

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

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

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • וועסטיבולום און עראָס
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

אַקטיוו זאכן

לייג .activeצו אַ .list-group-itemצו אָנווייַזן די קראַנט אַקטיוו סעלעקציע.

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • וועסטיבולום און עראָס
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

פאַרקריפּלט זאכן

לייג .disabledצו אַ .list-group-itemצו מאַכן עס דערשייַנען פאַרקריפּלט. באַמערקונג אַז עטלעכע עלעמענטן .disabledוועט אויך דאַרפן מנהג דזשאַוואַסקריפּט צו גאָר דיסייבאַל זייער קליק געשעענישן (למשל לינקס).

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • וועסטיבולום און עראָס
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ניצן <a>s אָדער <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">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

מיט <button>s, איר קענען אויך נוצן די disabledאַטריביוט אַנשטאָט פון די .disabledקלאַס. צום באַדויערן, <a>ס טאָן ניט שטיצן די פאַרקריפּלט אַטריביוט.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

פלאש

לייג .list-group-flushצו באַזייַטיקן עטלעכע געמארקן און ראַונדיד עקן צו מאַכן רשימה פון גרופּע ייטאַמז ברעג-צו-ברעג אין אַ פאָטער קאַנטיינער (למשל, קאַרדס).

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • וועסטיבולום און עראָס
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

האָריזאָנטאַל

לייג .list-group-horizontalצו טוישן די אויסלייג פון רשימה גרופּע זאכן פון ווערטיקאַל צו האָריזאָנטאַל אַריבער אַלע ברייקפּאָינץ. אַלטערנאַטיוועלי, קלייַבן אַ אָפּרופיק וואַריאַנט .list-group-horizontal-{sm|md|lg|xl}צו מאַכן אַ רשימה גרופּע האָריזאָנטאַל סטאַרטינג בייַ די ברייקפּוינט min-width. דערווייַל האָריזאָנטאַל רשימה גרופּעס קענען ניט זיין קאַמביינד מיט גלייַך רשימה גרופּעס.

פּראָטיפּ: ווילן גלייך ברייט רשימה גרופּע זאכן ווען האָריזאָנטאַל? לייג .flex-fillצו יעדער רשימה גרופּע נומער.

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

קאָנטעקסטואַל קלאסן

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

  • Dapibus ac facilisis in
  • א פּשוט ערשטיק רשימה גרופּע נומער
  • א פּשוט צווייטיק רשימה גרופּע נומער
  • א פּשוט הצלחה רשימה גרופּע נומער
  • א פּשוט געפאַר רשימה גרופּע נומער
  • א פּשוט ווארענונג רשימה גרופּע נומער
  • א פּשוט אינפֿאָרמאַציע רשימה גרופּע נומער
  • א פּשוט ליכט רשימה גרופּע נומער
  • א פּשוט פינצטער רשימה גרופּע נומער
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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">Dapibus ac facilisis in</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
  • Dapibus ac facilisis in2
  • Morbi leo risus1
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

מנהג אינהאַלט

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

<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

דזשאַוואַסקריפּט נאַטור

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

<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.

<!-- 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>

דורך דזשאַוואַסקריפּט

געבן טאַבבאַבלע רשימה נומער דורך דזשאַוואַסקריפּט (יעדער רשימה נומער דאַרף זיין אַקטיווייטיד ינדיווידזשואַלי):

$('#myList a').on('click', function (e) {
  e.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')

געשעענישן

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

  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געשעענישן וועט נישט זיין פייערד.

געשעעניש טיפּ באַשרייַבונג
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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})