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


فهاد الدرس الثاني عشر من دورة bootstrap 4 للمبتدئين غادي نشوفوا حاجة مهمة ف bootstrap لي هي les listes فغادي نشوفوا كيفاش نزيدوهم وكيفاش نزيدو فيهم روابط ومنبعد غادي نشوفوا كيفاش نغيروا اللون ديال كل عنصر من  la liste ديالنا. 


1- ل CLASS LIST-GROUP ف BOOTSTRAP

فل class list-group كتمكني باش نزيد liste فيها مجموعة من المعلومات بحال هكا :

فباش نزيدو هادشي فالمثال لي عندنا زدنا ul عطيناها class list-group منبعد زدنا فيها مجموعة ديال ل li لي هما العناصر المكونة ل liste وعطيناهم ل class list-group-item الكود لي زدنا هو :

                                <!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-right">
                <ul class="list-group">
                    <li class="list-group-item">Facebook</li>
                    <li class="list-group-item">Twitter</li>
                    <li class="list-group-item">Youtube</li>
                </ul>
            </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- كيفاش نبين العنصر لي ACTIVE

فيلا بغيت نبين العنصر لي ضغطنا عليه active كيف فالصورة :

كنزيد للعنصر لي بغيت ل class active فالمثال لي عندنا زدناها للعنصر لي فيه فيسبوك الكود لي زدنا هو :

                                <!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-right">
                <ul class="list-group">
                    <li class="list-group-item active">Facebook</li>
                    <li class="list-group-item">Twitter</li>
                    <li class="list-group-item">Youtube</li>
                </ul>
            </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- إضافة روابط داخل ل list-group

فباش نزيد روابط داخل list-group فالمثال لي عندنا زدنا div عطيناها class list-group.
منبعد داخلها زدنا روابط لي عطيناهم des classes سميناهم :
- list-group-item.
- list-group-item-action لي كتزيدنا لون للخلفية ديال كل رابط ملي كنحطو عليه la souris الكود لي زدنا هو :

                                <!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-right">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">Facebook</a>
                    <a href="#" class="list-group-item list-group-item-action">Twitter</a>
                    <a href="#" class="list-group-item list-group-item-action">Youtube</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- كيفاش نعطل عنصر من list-group

فباش نرد عنصر معطل يعني وخا نبغي نكليكي عليه ميعطينيش كنخدم بل class disabled فالمثال لي عندنا زدناها للعنصرالاول ورجعناه معطل الكود لي زدنا هو :

                                    <!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-right">
                <ul class="list-group">
                    <li class="list-group-item disabled">Facebook</li>
                    <li class="list-group-item">Twitter</li>
                    <li class="list-group-item">Youtube</li>
                </ul>
            </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- تغيير لون الخلفية لكل عنصر من list-group

باش نغير لون الخلفية لكل عنصر من list-group كيف  فالصورة :

كنزيد لكل عنصر ل class list-group-item مع لون لي بغيت لي طنحددو ب les classe لي شفنا قبل success,danger,warning وغيرها.
فالمثال لي عندنا زدنا لكل عنصر اللون الخاص به الكود لي زدنا هو :

                                    <!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-right">
                <ul class="list-group">
                    <li class="list-group-item list-group-item-success ">Facebook</li>
                    <li class="list-group-item list-group-item-danger">Twitter</li>
                    <li class="list-group-item list-group-item-warning">Youtube</li>
                    <li class="list-group-item list-group-item-secondary ">Facebook</li>
                    <li class="list-group-item list-group-item-dark">Twitter</li>
                    <li class="list-group-item list-group-item-light">Youtube</li>
                </ul>
            </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>