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


فهاد الدرس السادس عشر من دورة bootstrap 4 غادي نكملو الدورات ديالنا وغادي نشوفوا مزيد من المكونات ديال bootstrap 4.
غادي نشوفوا ل Accordion  لي كيمكن باش يكونوا عندي روابط ملي كنكليكي على كل رابط كيتعرضوا معلومات وغادي نشوفوا ايضا كيفاش نزيدو القوائم اي ل menus.



1- إضافة ل Accordion ف bootstrap 4

فباش نزيد ل Accordion لي هو هادا :
كيف قلنا فاش كنكليكي على facebook كيتعرض المحتوى لي فوسط facebook وكذالك ومثال بالنسبة للأخرين.
باش نزيدو هادشي كنزيد div كنعطيها id accordion منبعد كزيد card لي فل header ديالها كنزيد رابط كنعطيه فل href ل id ديال div لي غادي تعرض مثلا facebook# كتعني بلي غادي تفتح div صاحبة ل id facebook ونفس الشيء بالنسبة للأخرين.
الكود لي زدنا هو :

                                <!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 id="accordion">
                    <div class="card">
                      <div class="card-header bg-primary">
                        <a class="card-link text-white" data-toggle="collapse" href="#facebook">
                          Facebook
                        </a>
                      </div>
                      <div id="facebook" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis corporis, dicta harum officiis esse aspernatur fugit tenetur ut beatae consectetur veritatis, quod soluta aperiam ratione maiores ipsa, enim facere labore.
                        </div>
                      </div>
                    </div>
                    <div class="card">
                      <div class="card-header bg-danger">
                        <a class="collapsed card-link text-white" data-toggle="collapse" href="#googleplus">
                            Google +
                        </a>
                      </div>
                      <div id="googleplus" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, aperiam distinctio ullam dolorem vitae obcaecati tenetur facilis fugit dignissimos, sequi error fuga dolorum cumque labore tempore reiciendis quod doloribus officia!
                        </div>
                      </div>
                    </div>
                    <div class="card">
                      <div class="card-header bg-success">
                        <a class="collapsed card-link text-white" data-toggle="collapse" href="#youtube">
                            Youtube
                        </a>
                      </div>
                      <div id="youtube" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias veniam cupiditate facilis voluptatum nam corporis, mollitia, iusto ad nostrum libero amet architecto placeat sed a? Reiciendis quos assumenda iure officia.
                        </div>
                      </div>
                    </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- إضافة قائمة عادية ف bootstrap 4

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

كنزيد ul لي كنعطيها class nav منبعد كنزيد li لي كنعطيها class nav-item وفوسط ل li كنزيد الروابط لي كنعطيهم ل class nav-link.الكود لي زدنا هو :

                                <!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">
                <ul class="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>
        </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-إضافة ل tabs menu ف bootstrap 4

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



ولي كتخدم بحال ل accordion فكنزيد نفس الكود السابق باش
زدنا ل menu فقط كنزيد ل ul ل class nav-tabs.
وفالروابط كنزيدلهم data-toggle كتساوي tab يعني غادي يفتح tab وكنعطيه ل id ديال tab.
بالنسبة ل tabs زدناهم ف div لي فل class عطيناها tab-content وفيها tab لي غادي يفتح كل رابط مع ل id ديالها.
الكود لي زدنا هو :

                                <!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">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#facebook">Facebook</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#twitter">Twitter</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#youtube">Youtube</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane container active" id="facebook">Facebook</div>
                    <div class="tab-pane container fade" id="twitter">Twitter</div>
                    <div class="tab-pane container fade" id="youtube">Youtube</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- إضافة ل pills tab ف bootstrap 4

فل pills tab الرابط لي active كيكون باين بلون خلفية زرقاء كيف كنشوف فالصورة :



وأي رابط ضغطت عليه كيتعرض بخلفية زرقاء وباش نزيدو هاد الخاصية كنعوض ل class nav-tabs لي فل ul ب nav-pills
الكود لي زدنا هو :

                                    <!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">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#facebook">Facebook</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#twitter">Twitter</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#youtube">Youtube</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane container active" id="facebook">Facebook</div>
                    <div class="tab-pane container fade" id="twitter">Twitter</div>
                    <div class="tab-pane container fade" id="youtube">Youtube</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>