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קלאסן דאָ .

כ'האב אמאל געהערט Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac וועסטיבולום און עראָס

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

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

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

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

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

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

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

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

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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')

געשעענישן

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

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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})