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

منذ 5 سنوات imadbelasri Bootstrap
BS

فهاد الجزء السادس عشر من دورة 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>
                                                        
                                                    

دروس ذات صلة

BS

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

فهاد الدورة الجديدة للمبتدئين غادي نشوفوا bootstrap 4 لي هو أشهر framework html css & javascript لدى...


BS

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

فهاد الدرس الثاني من دورة bootstrap 4 للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا حاجة مهمة...


BS

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

فهاد الدرس الثالت من دورة bootstrap 4 للمبتدئين غادي نشوفوا كيفاش نتعاملو مع Typographie&n...


BS

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

فهاد الدرس الرابع من دورة bootstrap 4 للمبتدئين غادي نكملوا الدورة ديالنا وغادي نشوفوا المزيد من les...


BS

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

فهاد الدرس الخامس من دورة bootstrap 4 للمبتدئين غادي نشوفوا كيفاش نتعاملوا مع الألوان.غادي...


BS

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

فهاد الدرس الجديد من دورة bootstrap للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نزيدو الجد...


BS

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

فهاد الجزء السابع من دورة bootstrap 4 للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نتعاملو...


BS

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

فهاد الدرس الثامن من سلسلة bootstrap 4 للمبتدئين غادي نشوفوا كيفاش نتعاملوا مع les alertes شنو كيدير...


BS

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

فهاد الدرس التاسع من دورة bootstrap للمبتدئين غادي نشوفوا كيفاش نتعاملوا مع les boutons غادي نش...


BS

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

فهاد الدرس العاشر من دورة bootstrap 4 غادي نكملو الدورة ديالنا غادي نبقاو دائما مع les boutons غادي...