دورة bootstrap 4 للمبتدئين الدرس الرابع عشر


فهاد الدرس الدرس الرابع عشر من دورة bootstrap 4 للمبتدئين غادي نشوفوا حاجة مهمة ف  bootstrap 4 وربما شفتيني كنخدم بها بزاف ولي هي ل card فغادي نشوفوا كيفاش نزيدوهم ونزيدو فيهم المعلومات ديالنا وكذالك غادي نشوفوا كيفاش نغيروا الشكل ديال ل card بما يتناسب مع داكشي لي بغينا نعرضوا.


1- ل CLASS CARD ف BOOTSTRAP

ل class card كتمكني باش نزيد card ولي هي هادي :

فل card عندها class card-body لي فيها ل card-title لي هو titre و card-image لي فيها الصورة و card-text لي فيه  المعلومات الأخرى.
المثال لي عندنا زدنا الصورة وباقي المعلومات مع رابط خاص بموقعنا الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-6 mx-auto">
                <div class="card" style="width:400px">
                    <img class="card-img-top" src="bg.jpg" alt="">
                    <div class="card-body">
                      <h4 class="card-title">DCoding</h4>
                      <p class="card-text">Learn coding easily.</p>
                      <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                            

2- تغيير لون خلفية ل card

باش نغير ل background ديال ل card فكنخدم بل ل class bg لي كنعطيها اللون كيف شفنا قبل :
- success خلفية خضراء.
- danger خلفية حمراء إلخ...
فالمثال لي عندنا عطيناها خلفية خضراء هكا:

الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-6 mx-auto">
                <div class="card bg-success" style="width:400px">
                    <img class="card-img-top" src="bg.jpg" alt="">
                    <div class="card-body">
                      <h4 class="card-title">DCoding</h4>
                      <p class="card-text">Learn coding easily.</p>
                      <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                            

3- ل class card-img-overlay ف bootstrap 4

ل class card-img-overlay كتمكن باش نرجعوا ل card كاملة image بحال هكا :

الكود باش تزيدها هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-6 mx-auto">
                <div class="card" style="width:400px">
                    <img class="card-img-bottom" src="bg.jpg" alt="">
                    <div class="card-img-overlay">
                      <h4 class="card-title">DCoding</h4>
                      <p class="card-text">Learn coding easily.</p>
                      <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                            

4-ل class card-deck ف bootstrap 4

ل class card-deck كتمكنا باش نزيدو مجموعة ديال ل cards متساوية الحجم فسطر واحد بحال هكا :

الكود باش تزيدهم هو هذا :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-12 mx-auto">
                <div class="card-deck">
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>
                                

5-ل class card-group ف bootstrap 4

ل class card-group كتمكنا باش نزيدو مجموعة ديال ل cards متساوية الحجم فسطر واحد بحال ل card-deck الفرق بيناتهم هو انها كتحيد ل espace لي كاين بيناتهمالكود باش تزيدهم هو هذا :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <title>Bootstrap Course</title>
</head>
<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-12 mx-auto">
                <div class="card-group">
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                    <div class="card" style="width:400px">
                        <img class="card-img-bottom" src="bg.jpg" alt="">
                        <div class="card-body">
                          <h4 class="card-title">DCoding</h4>
                          <p class="card-text">Learn coding easily.</p>
                          <a href="https://www.darija-coding" class="btn btn-primary">website</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>