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


فهاد الدرس الرابع عشر من bootstrap 4 غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نتعاملو مع dropdown menus.
فشنو هي dropdown menu بكل بساطة هي Menu ملي كتكليكي عليها كتعطيك liste ديال الإختيارات تختار منهم فغادي نشوفوا كيفاش نتعاملو معها فهاد الجزء.


1- ل CLASS DROPDOWN ف BOOTSTRAP

ل class dropdown كتمكن باش تكون عندنا dropdown menu بحال هادي :

فملي كنكليكي عليها كتعطيني liste ديال لإختيارات فباش نزيدها كنزيد div كنعطيها class dropdown منبعد كنزيد bouton لي عندها :
- class dropdown-toggle لي كتعطي لل bouton داك المثلت لي كيعني بلي كاين شي حاجة تحت.
- data-toggle لي كتاخد ل class dropdown لي هي الهدف.
منبعد عندي dropdown-menu لي فيها dropdown-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-12 mx-auto">
                <div class="dropdown">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                      Catégories
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Catégorie 1</a>
                      <a class="dropdown-item" href="#">Catégorie 2</a>
                      <a class="dropdown-item" href="#">Catégorie 3</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- ل CLASS DROPDOWN-DIVIDER ف BOOTSTRAP

ل class dropdown-divider كتمكن باش ندير خط فاصل مابين العناصر ديالي كيف مبين فالصورة :

فالمثال لي عندنا زدناها لل 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 mt-4">
            <div class="col-md-12 mx-auto">
                <div class="dropdown">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                      Catégories
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Catégorie 1</a>
                      <a class="dropdown-item" href="#">Catégorie 2</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Catégorie 3</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- كيفاش ن activer عنصر من ل menu

باش ن activer عنصر من ل menu كيف كنشوف فالصورة :


كنزيدلو ل class 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-12 mx-auto">
                <div class="dropdown">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                      Catégories
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Catégorie 1</a>
                      <a class="dropdown-item active" href="#">Catégorie 2</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Catégorie 3</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- تغيير اتجاه dropdown-menu

فباش نغير اتجاه ل menu كيف كنشوف فالصورة :

كاين جوج د les classes كنزيد ل dropdown كاين dropright كتردها على ليمن و dropleft كتردها على ليسر الكود لي زدنا هو :

                                    <!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="dropdown dropright">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                      Catégories
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Catégorie 1</a>
                      <a class="dropdown-item active" href="#">Catégorie 2</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Catégorie 3</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="dropdown dropleft">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                      Catégories
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Catégorie 1</a>
                      <a class="dropdown-item active" href="#">Catégorie 2</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Catégorie 3</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>