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


فهاد الدرس الثاني عشر من  دورة bootstrap 4 للمبتدئين غادي نشوفوا كيفاش نتعاملو مع ل pagination.
ل pagination  كتمكن باش نتنقل ما بين الصفحات فمثلا ملي كنعرض المعلومات من قاعدة البيانات فكنعرض واحد الجزء والجزء الثاني كيكون فصفحة أخرى ل pagination كتمكني من التنقل لهاد الصفحة ومشاهدة باقي المعلومات.
فهاد الدرس غادي نشوفوا كيفاش نديرو هادشي.


1- ل CLASS PAGINATION ف BOOTSTRAP 4

ل class pagination ف bootstrap 4 كتمكن باش نزيد ل pagination فل pagination هي هادي :
فباش نزيد هادشي كنزيد ul لي هي liste وكنعطيها ل class pagination منبعد كنزيد li لي كتاخد ل class page-item من بعد فوسطها كنزيد الرابط لي كياخد ل class page-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-12">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#">Précédent</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Suivant</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>
                            

2- كيفاش نبين الرابط لي active

فملي كنكليكي على شي رابط فخص نبين بلي هاداك الرابط راه هو لي active بحال هكا :

باش نزيدها كنزيد la classe active ل li لي بغيت فالمثال لي عندنا زدناها للكود ديالنا الكود لي زدنا هو :


                                <!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">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#">Précédent</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Suivant</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- كيفاش نعطل رابط

فباش نرد رابط معطل يعني وخا نبغي نكليكي عليه ميعطينيش كنخدم بل class disabled فالمثال لي عندنا زدناها للرابط الاول ورجعناه معطل الكود لي زدنا هو :

                                <!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">
                <ul class="pagination">
                    <li class="page-item disabled"><a class="page-link" href="#">Précédent</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Suivant</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>
                            

4-تغيير حجم ل pagination

فباش نغير حجم ل pagination عندي ل class pagination-lg باش كنزيد pagination كبيرة ول  class pagination-sm باش كنزيد pagination صغيرة فالمثال لي عندنا زدنا les deux classes باش عرضنا أحجام مختلفة ديال ل pagination.
الكود لي زدنا هو :

                                    <!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">
                <ul class="pagination pagination-lg">
                    <li class="page-item disabled"><a class="page-link" href="#">Précédent</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
                </ul>
                <ul class="pagination pagination-sm">
                    <li class="page-item disabled"><a class="page-link" href="#">Précédent</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">Suivant</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>
                                

5- ل CLASS breadcrumb ف BOOTSTRAP 4

ل class  breadcrumb كتمكن باش نزيد pagination على شكل قائمة أي menu بحال هكا :
باش نزيدها  كنزيد ul لي هي liste وكنعطيها ل class breadcrumb منبعد كنزيد li لي كتاخد ل class breadcrumb-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">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Accueil</a></li>
                    <li class="breadcrumb-item"><a href="#">Posts</a></li>
                    <li class="breadcrumb-item active"><a href="#">Apprendre la programmation</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>