القوائم Bootstrap 5 List group

-

بنتعلم في هذا الدرس كيف بنعمل القوائم List ، واكيد القوائم الها فوائد كثيرة في التطبيقات والمواقع وتعتبر مكونًا مرنًا وقويًا لعرض سلسلة من المحتوى. ومكين تعديلها وتوسيعها بسهولة حسب الحاجه

نطبق مثال صغير حتى نفهم شو هي List group

اضف الكود التالي في صفحة HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <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>
    </div>
</body>
</html>
النتيجة:
حتى نعمل List group بنستخدم <ul> وبنطق عليها class باسم list-group وبنضيف فيها Items المطلوب عرضها باستخدام <li> وبنطبق عليها class باسم list-group-item. 
تطبيق Active items
نتلعم كيف بنطبق active class على Item باستخدام class باسم active
اضف الكود التالي في صفحة HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <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>
    </div>
</body>
</html>
النتيجة:



تطبيق Links and buttons
يمكن انشاء روابط و buttons داخل List باستخدام <a> او <button>. مع اضافة تأثير عند تحريك المؤشر فوقها باستخدام class باسم
 .list-group-item-action
نطبق مثال حتى نفهم هذا الكلام
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
        </div>
    </div>
</body>
</html>
النتيجة:

نفهم شو عملنا. 
اضنفا <div> وطبقنا عليه "class="list-group لتعريفة على اساس List وبعد هيك داخل هاي List اضفنا مجموعه من Items باستخدام <a> وطبقنا "class="list-group-item list-group-item-action عليها. لتعريفها على انها Items. اول Item اضفنا عليه active class مشان هيك بين بلون مختلف. واخر Item طبقنا عليه disabled class لتعطيله. واضنفا الكود "tabindex="-1 بهدف عدم الانتقال عليه عند استخدام Tab من لوحه المفاتيح.
نفس هذا الكلام ممكن يطبق باستخدام Buttons 
طبق الكود التالي باستخدام Buttons :
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <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>
    </div>
</body>
</html>
والنتيجة نفس النتيجة السابقه.

تطبيق Flush
يستخدم class المسمى list-group-flush. لإزالة بعض الحدود والزوايا الدائرية ل Items.
طبق المثال التالي حتى نفهم الموضوع: 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <div class="list-group list-group-flush">
            <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>
    </div>
</body>
</html>

النتيجة
تطبيق List group مع Badge 
يمكن دمج badge ووضعها في List group مثال ذلك برامج المحادثه. اكيد استخدمتها فا ببين في قائمة الاسماء عدد الرسائل الغير مقرؤوة بجانب كل اسم. 
نطبق الكود التالي حتى نفهم كيف :
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <div class="list-group list-group-flush">
            <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">Layan Hatem</div> 
                    </div>
                    <span class="badge bg-danger rounded-pill">20</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">Lareen Hatem</div>  
                    </div>
                    <span class="badge bg-danger rounded-pill">20</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">Malak Hatem</div>
                    </div>
                    <span class="badge bg-danger rounded-pill">20</span>
                </li>
            </ol>
        </div>
    </div>
</body>
</html>
النتيجة:
تطبيق Contextual classes

يمكن تطبيق Contextual classes لتغير لون الخلفيه ل List 
نطبق المثال التالي : 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <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>
    </div>
</body>
</html>
النتيجة:
اكيد لاحظة مجموعه class الملونه باللون الاصفر كل class يستخدم لتطبيق لون مختلف. 

تخصيص القائمة Custom content
يمكن استخدام flexbox utilities لاضافة نمط خاص بنا على List بحيث بنقدر نتحكم بالطول والعرض واللون . 
نطبق المثال التالي: 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <h6 class="bg-light p-2 border-top border-bottom">Devkum team</h6>
        <ul class="list-group list-group-light mb-4">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <img src="avatar.jpg" alt="" style="width: 45px; height: 45px"
                         class="rounded-circle" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Layan</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <img src="avatar.jpg" class="rounded-circle" alt=""
                         style="width: 45px; height: 45px" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Lareen</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <img src="avatar.jpg" class="rounded-circle" alt=""
                         style="width: 45px; height: 45px" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Mlak</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
النتيجة:

استخدام Checkboxes and radios 
يمكن استخدام Checkboxes and radios في List group
نطبق المثال التالي نفهم الموضوع: 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container m-2">
        <h6 class="bg-light p-2 border-top border-bottom">Devkum team</h6>
        <ul class="list-group list-group-light mb-4">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
                    <img src="avatar.jpg" alt="" style="width: 45px; height: 45px"
                         class="rounded-circle" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Layan</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
                    <img src="avatar.jpg" class="rounded-circle" alt=""
                         style="width: 45px; height: 45px" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Lareen</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
                    <img src="avatar.jpg" class="rounded-circle" alt=""
                         style="width: 45px; height: 45px" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Mlak</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="list-group list-group-light mb-4">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <input class="form-check-input me-1" type="radio" value="">
                    <img src="avatar.jpg" alt="" style="width: 45px; height: 45px"
                         class="rounded-circle" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Layan</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <input class="form-check-input me-1" type="radio" value=""  >
                    <img src="avatar.jpg" class="rounded-circle" alt=""
                         style="width: 45px; height: 45px" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Lareen</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <input class="form-check-input me-1" type="radio" value="">
                    <img src="avatar.jpg" class="rounded-circle" alt=""
                         style="width: 45px; height: 45px" />
                    <div class="ms-3">
                        <p class="fw-bold mb-1">Mlak</p>
                        <p class="text-muted mb-0">[email protected]</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
النتيجة: