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


فهاد الدرس الثامن من سلسلة bootstrap 4 للمبتدئين غادي نشوفوا كيفاش نتعاملوا مع les alertes شنو كيديروا كيمكننا باش نعرضوا رسائل النجاح والفشل.
مثلا يلا زدنا شي حاجة فقاعدة البيانات كنبغي نعرض رسالة نجاح العملية فل class alert كتمكني باش ندير هادشي برسائل مختلفة اللون والمضمون.


1- ل class alert ف bootstrap 4

 ل class alert ف bootstrap 4 كيف قلنا فالمقدمة كتمكن من عرض رسائل مختلفة عندنا :

- alert alert-primary لي كتعرض رسالة بخلفية زرقاء غامقة.
- alert alert-info لي كتعرض رسالة بخلفية زرقاء فاتحة.
- alert alert-danger لي كتعرض رسالة بخلفية حمراء.
فالمثال لي عندنا خدمنا بهاد les classes كاملين الكود لي زدنا هو:


                                <!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">
            <div class="col-md-12">
                <h3 class="alert alert-danger">DCoding</h3>
                <h3 class="alert alert-primary">DCoding</h3>
                <h3 class="alert alert-info">DCoding</h3>
            </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- ل class alert ف bootstrap 4 تتمة

شفنا جزء من les classes لي عندها علاقة بلون الرسائل دبا
غادي نشوفوا جزء آخر:
- alert alert-dark لي كتعرض رسالة بخلفية سوداء.
- alert alert-warning لي كتعرض رسالة بخلفية صفراء.
- alert alert-success لي كتعرض رسالة بخلفية خضراء.
فالمثال لي عندنا خدمنا بهاد les classes كاملين الكود لي زدنا هو:

                                <!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">
            <div class="col-md-12">
                <h3 class="alert alert-dark">DCoding</h3>
                <h3 class="alert alert-warning">DCoding</h3>
                <h3 class="alert alert-success">DCoding</h3>
            </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 alert-link ف bootstrap 4

ل class alert-link كتمكن باش نخلي لون الرايط يمشي مع لون ل alert لي اختاريت.
فالمثال لي عندنا زدنا div عطيناها classe alert alert-info منبعد زدنا فوسطها رابط لي عطيناه classe alert-link لي كتخلي اللون ديالو يتوافق مع ل alert الكود لي زدنا هو :

                                <!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">
            <div class="col-md-12">
                <div class="alert alert-info">
                    <a href="#" class="alert-link">Lire la suite</a>
                </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 alert-dismissible ف bootstrap 4

ل class alert-dismissible كتمكن باش نزيد لل alert ديالي bouton لي ملي كنكليكي عليه كتختفي ل alert.
فالمثال لي عندنا زدنا ل alert ل class alert-dismissible منبعد فيها زدنا bouton لي عطيناه ف data-dismiss alert فملي كنكليكي على ل bouton كيختفي ل alert.
 الكود لي زدنا هو :

                                    <!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">
            <div class="col-md-12">
                <div class="alert alert-info  alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <a href="#" class="alert-link">Lire la suite</a>
                </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-إضافة ل animation ل alert

ياش نزيد ل alert ديالي ل animation كاينة class سميتها fade وأخرى show ولي كتمكن باش نزيدو animation لل alert.
فالمثال لي عندنا زدنا  les classes fade & show لل alert الكود لي زدنا هو :

                                    <!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">
            <div class="col-md-12">
                <div class="alert alert-info  alert-dismissible fade show">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <a href="#" class="alert-link">Lire la suite</a>
                </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>