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


فهاد الجزء السادس عشر من دورة bootstrap 4 غادي نكملو الدورة وغادي نكملو مع القوائم اي ل menus فمنبعد ما شفنا كيفاش نزيدو des menus لي عاديين دبا غادي نشوفوا كيفاش نزيدو des menus avancés فغادي نشوفوا كيفاش نغيروا لون الخلفية ونزيدو فورم فل menu بالإضافة للعديد من الأشياء الأخرى.


1- إضافة قائمة ف bootstrap 4

باش نزيد قائمة ف boostrap 4 كيف كنشوف فالصورة :



فغادي نزيد nav نعطيها class navbar navbar-expand-lg لي كتعني بلي غادي تكون كتوافق جميع الأجهزة وكنغير لون الخلفية للأسود ب bg-dark ولون الخط للأبيض ب navbar-dark.
منبعد كنزيد ul لي عطيناها ل class navbar-nav وفوسطها زدنا الروابط لي الكود ديالهم سبق شفناه فالدرس السابق.
الكود لي زدنا هو :

                                <!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">
                <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
            </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- تغيير لون خلفية ل menu

باش نغير لون خلفية ل menu كيف كنشوف فالصورة :

فقط كنغير ل class bg-dark ل bg-success للون الأخضر وbg-danger للأحمر إلخ...
فسبق شفنا داكشي فل 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 mt-4">
            <div class="col-md-6 mx-auto">
                <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
                <nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
                <nav class="navbar navbar-expand-lg bg-success navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
                <nav class="navbar navbar-expand-lg bg-danger navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
                <nav class="navbar navbar-expand-lg bg-warning navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
                <nav class="navbar navbar-expand-lg bg-primary navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
                <nav class="navbar navbar-expand-lg bg-info navbar-dark">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
            </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- إضافة logo لل menu ف bootstrap 4

باش نزيد logo لل menu ديالي كيف كنشوف فالصورة :


كنزيد رابط لي كنعطيه ل class navbar-brand ولي فوسطو كيكون logo لي عبارة عن صورة الكود لي زدنا هو :

                                <!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">
                <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
                    <a class="navbar-brand" href="#">
                        <img src="bg.jpg" alt="" style="width:40px;">
                    </a>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                          <a class="nav-link" href="#">Accueil</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                </nav>
            </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- إضافة ل hamburger menu ف bootstrap 4

ل hamburger menu  كيف كنشوف فالصورة :


هي ل menu لي كتبان فالهواتف والطابليت باش نزيدها كنزيد bouton عطيتو ل class navbar-toggler وف data-target يعني شنو غادي يفتح كنعطيه ل id menu وفوسطو span لي هي ل icon لي كنشوف فالصورة.
منبعد كنزيد div كنعطيها ل class collapse navbar-collapse ول id menu لي كيربطها بل bouton.
الكود لي زدنا هو :

                                    <!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">
                <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="bg.jpg" alt="" style="width:40px;">
                    </a>
                    <div class="collapse navbar-collapse" id="menu">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Accueil</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Services</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">About</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </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- إضافة الفورم لل menu

باش نزيد لفورم لل menu كيف كنشوف فالصورة :

كنزيد ل form فوسط ل ul وكنعطيها ل class ml-auto باش كتحط  فليمن ديال ال 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-10 mx-auto">
                <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="bg.jpg" alt="" style="width:40px;">
                    </a>
                    <div class="collapse navbar-collapse" id="menu">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Accueil</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Services</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">About</a>
                            </li>
                        </ul>
                        <form class="form-inline ml-auto" action="#">
                            <input class="form-control mr-sm-2" type="text" placeholder="Recherche">
                            <button class="btn btn-light" type="submit">Recherche</button>
                        </form>
                    </div>
                </nav>
            </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>