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


فهاد الدرس العاشر من دورة bootstrap 4 غادي نكملو الدورة ديالنا غادي نبقاو دائما مع les boutons غادي نشوفوا كيفاش نزيدو des groupes ديال les boutons وكيفاش نعرضوا des menus بل bouton بالإضافة لأشياء أخرى.


1- ل CLASS BTN-GROUP ف BOOTSTRAP 4

ل class btn-group ف bootstrap 4 كتمكن باش نزيد groupe ديال les boutons فالمثال لي عندنا زدنا div عطيناها class btn-group فوسطها زدنا مجموعة ديال les boutons الكود لي زدنا هو :

                                <!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="btn-group">
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                </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- إضافة قائمة لل bouton

ممكن  انني نزيد menu لل bouton فالمثال لي عندنا زدنا bouton عطيناها ل class dropdown-toggle منبعد ف data-toggle عطيتها dropdown لي كتعني div لي  عندها ل class dropdown-menu.
فشنو كنعني بهادشي كنعني ملي نكليكي على ل bouton تعرض ل menu.
الكود لي زدنا هو :

                                <!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="btn-group">
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        DCoding
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Connexion</a>
                        <a class="dropdown-item" href="#">Inscription</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- تغيير اتجاه ل boutons groupe

فكيف شفنا ل groupe de boutons كيتعرض أفقي ممكن انني نعرضو عمودي.
فباش ندير هادشي كنزيد ل class btn-group-vertical فالمثال لي عندنا زدناها ل groupe de boutons لي عندنا.
الكود لي زدنا هو :

                                <!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="btn-group-vertical">
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        DCoding
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Connexion</a>
                        <a class="dropdown-item" href="#">Inscription</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- تغيير حجم groupe de boutons

باش نغير حجم ل groupe de boutons كنزيد class btn-group لي كتاخد :
- lg للحجم الكبير.
-md للحجم المتوسط.
-sm للحجم الصغير.
فالمثال لي عندنا خدمنا بهاد les classes وعرضنا احجام مختلفة ديال les groupes de boutons.
الكود لي زدنا هو :


                                    <!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="btn-group btn-group-lg">
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                </div>
                <div class="btn-group btn-group-md">
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                    <button type="button" class="btn btn-dark">DCoding</button>
                </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>