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ל-a .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ל-a .list-group-itemכדי שזה ייראה מושבת. שים לב שרכיבים מסוימים עם .disabledידרשו גם JavaScript מותאם אישית כדי להשבית לחלוטין את אירועי הקליקים שלהם (למשל, קישורים).

  • פריט מושבת
  • פריט שני
  • פריט שלישי
  • פריט רביעי
  • ואחד חמישי
<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>לא תומכים בתכונה disabled.

<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 בתוכו, אפילו עבור קבוצות רשימות מקושרות כמו זו שלמטה, בעזרת כלי השירות של flexbox .

כותרת פריט קבוצה ברשימה
לפני 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>

התנהגות 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-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>

שימוש בתכונות נתונים

אתה יכול להפעיל ניווט בקבוצת רשימה מבלי לכתוב שום JavaScript על ידי ציון 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>

דרך JavaScript

אפשר פריט רשימה שניתן לכרטיסיות באמצעות JavaScript (יש להפעיל כל פריט רשימה בנפרד):

$('#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

מפעיל רכיב פריט רשימה ומכל תוכן. ל-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('show')

בוחר את פריט הרשימה הנתון ומציג את החלונית המשויכת לו. כל פריט אחר ברשימה שנבחר בעבר יבוטל והחלונית המשויכת לו מוסתרת. חוזר למתקשר לפני שחלונית הכרטיסיות הוצגה בפועל (לדוגמה, לפני 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למקד ללשונית הפעילה ולכרטיסייה הפעילה הקודמת (אם זמינה) בהתאמה.
הכרטיסייה.bs.showed אירוע זה מופעל בהצגת כרטיסיות לאחר הצגת כרטיסייה. השתמש 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
})