تطبيق Card layout

-

بنحكي في هذا الدرس عن الطرق المختلفه لعرض البطاقات بالإضافة إلى تصميم المحتوى داخل البطاقات ،ويمكن من خلال Bootstrap انشاء سلسلة من البطاقات بطرق مختلفه. بحيث يمكن انشاء مجموعات من البطاقات او انشاء بطاقات على شكل شبكة ... الخ

انشاء Card groups 

بنتعلم الان كيف ممكن نستخدم card groups لعرض البطاقات كعنصر واحد على شكل أعمدة لها نفس العرض والارتفاع. ولتطبيق هذا الكلام بنستخدم

  display: flex;

بهدف عرض جميع الاعمده بنفس الحجم. واكيد بنطبق class باسم card-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="card-group">
            <div class="card">
                <img src="avatar.jpg" class="card-img-top" alt="..." >
                <div class="card-body">
                    <h5 class="card-title">Layan Hatem</h5>
                    <p class="card-text">Senior Project Manager.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card">
                <img src="avatar.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Lareen Hatem</h5>
                    <p class="card-text">Senior Project Manager.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card">
                <img src="avatar.jpg" class="card-img-top" alt="..." >
                <div class="card-body">
                    <h5 class="card-title">Malk Hatem</h5>
                    <p class="card-text">Senior Project Manager.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة:

تمام التمام نطبق Header و Footer على Card groups

نفس الكود السابق بنعدل عليه تعديل بسيط الى : 

<!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="card-group m-5">
            <div class="card">
                <div class="card-header">
                    <small class="text-muted">card-Header</small>
                </div>
                <img src="avatar.jpg" class="card-img" alt="...">
                <div class="card-body">
                    
                    <h5 class="card-title">Layan Hatem</h5>
                    <p class="card-text">Senior Project Manager.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">card-footer</small>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <small class="text-muted">card-Header</small>
                </div>
                <img src="avatar.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Lareen Hatem</h5>
                    <p class="card-text">Senior Project Manager.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">card-footer</small>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <small class="text-muted">card-Header</small>
                </div>
                <img src="avatar.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Malk Hatem</h5>
                    <p class="card-text">Senior Project Manager.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">card-footer</small>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة:

تطبيق Grid cards
بنشوف هون كيف بنستخدم نظام Bootstrap grid عن طريق تطبيق row-cols classes.، بهدف التحكم في عدد أعمدة الشبكة التي تظهر في كل صف(حكينا سابقا عن تطبيق الاعمده والصفوف في Bootstrap).
للتذكير
لانشاء 1 عمود بنستخدم class باسم row-cols-1. 
لانشاء 2 عمود بنستخدم class باسم row-cols-2. 
لانشاء 3 عمود بنستخدم class باسم row-cols-3. 
استخدام class التالي row-cols-md-2. بتم تقسيم أربع بطاقات إلى عرض متساوٍ عبر صفوف متعددة.

تمام التمام الان نطبق مثال حتى نفهم الموضوع 

<!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="row row-cols-1 row-cols-md-2 g-4">            <div class="col">                <div class="card"> <img src="avatar.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Devkum Team</h5> <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team.</p> </div>  </div></div> <div class="col"> <div class="card"> <img src="avatar.jpg" class="card-img-top" alt="...">  <div class="card-body">  <h5 class="card-title">Devkum Team</h5> <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="avatar.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Devkum Team</h5> <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team.</p> </div></div> </div> <div class="col"> <div class="card"> <img src="avatar.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Devkum Team</h5> <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team.</p> </div> </div> </div> </div></div></body></html>

النتيجة: 




طبقنا في المثال السابق class بالاسم:
row row-cols-1 row-cols-md-2 g-4
class باسم row-cols-1 بعمل انشاء عمود واحد فقط لجميع البطاقات. 
classباسم row-cols-md-2. بعمل على تقسيم البطاقات الى احجام متساويه في صفوف متعدده.

نحاول نغير row-cols-md-2. الى row-cols-md-3. وشوف النتيجة: 
تم عرض cards في 3 اعمده.
جرب تغير الى row-cols-md-3 وشوف النتيجة. 
وبهاي الطريقة بتقدر تتحكم بعدد الاعمده المطلوب عرضها في كل صف. 

توحيد ارتفاع cards 
اذا كان عندنا مجموعة من cards وفيها مكونات مختلفه، ف اكيد بكون الارتفاع مختلف. لو عملنا تعديل على محتويات المثال السابق وعملنا card اكبر من غيرها. بتكون النتيجة:
اكيد لاحظت ان حجم اول card مختلف عن غيرها. واذا كان المطلوب تطبيق نفس الارتفاع لجميع cards بنستخدم class باسم .h-100

والي بيعني ان ارتفاع card بكون يساوي 100% 
نشوف كيف نعملها بتطبيق المثال التالي: 
<!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="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="avatar.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Devkum Team</h5>
                        <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team. Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team Devkum Team</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="avatar.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Devkum Team</h5>
                        <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="avatar.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Devkum Team</h5>
                        <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="avatar.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Devkum Team</h5>
                        <p class="card-text">Devkum Team Devkum Team Devkum Team Devkum Team.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
النتيجة:
شوف كيف ارتفاع جميع card بنفس الارتفاع.