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


فهاد الدرس التاسع عشر من دورة bootstrap 4 للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نزيدو carousel لي كيمكن باش نديرو slider منبعد غادي نشوفوا كيفاش نزيدو ل modal و tooltip ول popover.


1- إضافة slider ف bootstrap 4

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

كنزيد div لي عطيتها :
- class carousel لي كتزيد slider.
منبعد زدت ul لي عطيتها :
- class carousel-indicators لي كتزيد الخطوط البيضاء لي كنشوف أسفل الصورة ولي كتبين فين وصل slider.
منبعد عندي div عطيتها class carousel-inner ولي فوسطها كيكون المحتوى ديال slider لي عبارة عن صور.
منبعد عندي الروابط الجانبية لي كتمكن من التنقل بين الصور ولي زدناها ب les classes carousel-control-prev وcarousel-control-prev-icon لي كتزيد ل icon.
الكود لي زدنا هو :

                                <!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 id="carousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ul class="carousel-indicators">
                  <li data-target="#carousel" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel" data-slide-to="1"></li>
                  <li data-target="#carousel" data-slide-to="2"></li>
                </ul>
                <!-- The slideshow -->
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="bg.jpg" alt="Los Angeles" width="500">
                  </div>
                  <div class="carousel-item">
                    <img src="bg.jpg" alt="Chicago" width="500">
                  </div>
                  <div class="carousel-item">
                    <img src="bg.jpg" alt="New York" width="500">
                  </div>
                </div>
                <!-- Left and right controls -->
                <a class="carousel-control-prev" href="#carousel" data-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#carousel" data-slide="next">
                  <span class="carousel-control-next-icon"></span>
                </a>
            </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- إضافة ل modal ف bootstrap 4

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



فكنزيد bouton لي كنعطيها ف data-toggle modal يعني ملي غادي نكليكي عليها غادي تفتح ل modal وف data-target كنعطيها ل id ديال ل modal.
منبعد كنزيد div لي كنعطيها ل class modal ول id لي عطيت لل 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">
            <!-- Button to Open the Modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                DCoding
            </button>
  
            <!-- The Modal -->
            <div class="modal" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                        <h4 class="modal-title">DCoding</h4>
                             <button type="button" class="close" data-dismiss="modal">×</button>
                        </div>
                        <!-- Modal body -->
                        <div class="modal-body">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores quas perspiciatis illum iure sed nisi obcaecati facilis reprehenderit nulla sit, totam nemo non fuga possimus est dolorum excepturi tenetur!
                        </div>
                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fermer</button>
                        </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>
                            

3- إضافة tooltip ف bootstrap 4

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

كنزيد رابط كنعطيه data-toggle tooltip منبعد قبل من النهاية ديال ل body كنزيد لكود jquery لي كيمكن باش نزيد لرابط tooltip ولي كتبان ملي كنحط la souris فوقو.
الكود لي زدنا هو :

                                <!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">
            <a href="#" data-toggle="tooltip" title="infos">Infos</a>
        </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>
    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip(); 
        });
    </script>
</body>
</html>
                            

4- إضافة popover ف bootstrap 4

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


كنزيد رابط كنعطيه data-toggle popover منبعد قبل من النهاية ديال ل body كنزيد لكود jquery لي كيمكن باش نزيد للرابط ل popover ولي كتبان ملي كنضغط عليه .

الكود لي زدنا هو :

                                    <!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">
            <a href="#" data-toggle="popover" class="btn btn-danger" title="DCoding learn easily">DCoding</a>
        </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>
    <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover(); 
        });
    </script>
</body>
</html>