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


فهاد الدرس الجديد من دورة bootstrap للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نزيدو الجداول لي هما les tables ف bootstrap عندو العديد من les classes لي كيمكنوني من التعامل مع الجداول مع تغيير شكلها ولونها فهاد الدرس غادي نشوفوهم كاملين بالشرح المفصل.


1- ل class table ف bootstrap 4

ل class table  كتمكني باش نزيد style ديال table فالمثال لي عندنا زدنا table ب html من بعد عطيتها ل class table لي زادتلها style ديال table. 
الكود لي زدنا هو :

                                <!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">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                        <tr>
                            <td>Nom</td>
                            <td>Prénom</td>
                            <td>Age</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                    </tbody>
                </table>
            </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- ل class table-striped ف bootstrap 4

ل class table-striped  كتمكني باش نزيد style ديال zèbre  ل table فالمثال لي عندنا زدنا table ب html من بعد عطيتها ل class table-striped لي زادتلها style ديال zébre. 
الكود لي زدنا هو :

                                <!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">
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <td>Nom</td>
                            <td>Prénom</td>
                            <td>Age</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                    </tbody>
                </table>
            </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 table-bordered ف bootstrap 4

ل class table-bordered كتمكني باش نزيد border ل table فالمثال لي عندنا زدنا table ب html من بعد عطيتها ل class table-bordered لي زادتلها ل border. 
الكود لي زدنا هو :

                                <!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">
            <div class="col-md-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <td>Nom</td>
                            <td>Prénom</td>
                            <td>Age</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                    </tbody>
                </table>
            </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- ل class table-hover ف bootstrap 4

ل class table-hover كتمكني باش نزيد hover ل table فالمثال لي عندنا زدنا table ب html من بعد عطيتها ل class table-hover لي زادتلها ل hover يعني ملي كنحط 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">
            <div class="col-md-12">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <td>Nom</td>
                            <td>Prénom</td>
                            <td>Age</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                    </tbody>
                </table>
            </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 table-dark ف bootstrap 4

ل class table-dark كتمكني باش نزيد لون الخلفية ل table فالمثال لي عندنا زدنا table ب html من بعد عطيتها ل class table-dark لي زادتلها ل background أسود. 
الكود لي زدنا هو :

                                    <!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">
            <div class="col-md-12">
                <table class="table table-dark">
                    <thead>
                        <tr>
                            <td>Nom</td>
                            <td>Prénom</td>
                            <td>Age</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>samadi</td>
                            <td>samir</td>
                            <td>30</td>
                        </tr>
                    </tbody>
                </table>
            </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>