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


فهاد الدرس الثاني من دورة bootstrap 4 للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا حاجة مهمة ف bootstrap لي هي ل grid système فشنوا كنعنيو بها :
ف bootstrap كيقسم الصفحة ديالنا لأسطر وخانات بحال جدول كل سطر فيه 12 ل خانة.
فهاد التقسيم كيخلي الموقع ديالنا يتوافق مع جميع الأجهزة فهاد الدرس غادي نشوفوا كيفاش نديرو هادشي.


1- ل classe col- ف bootstrap

ل -class col منبعد - كنحدد شحال من خانة غادي تاخد ( قلنا عندنا 12 لخانة ) فهاد class خاصة بالأجهزة الصغيرة جدا بحال الهاتف لي العرض ديالها قل من 576px.
فالمثال لي عندي زدت div عطيتها  class row لي هو سطر منبعد زدت 4 ديال les divs عطيتهم class col-3 يعني كل وحدة غادي تاخد 3 دالخانات لي غادي تعطينا المجموع ديال 12 لي هو السطر ديالنا.
فيلا فتحتي الصفحة فالمتصفح غادي تلقى ربعة ديال les divs و كل div واخدة 3 ديال الخانات ديالها ونفس الشي يلا صغرتي المتصفح لحجم الهاتف.
الكود لي زدنا هو :

                                <!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">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <!-- <div class="container-fluid">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </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- ل classe col-sm ف bootstrap

ل class col-sm فهاد class خاصة بالأجهزة الصغيرة بحال الطابليت لي العرض ديالها أقل أو أكثر من 576px.
فالمثال لي عندي هو نفس الكود السابق فقط غيرنا ل class من col-3 ل col-sm-3 فهنا فالطابليت غادي تاخد كل div ثلاثة ديال الخانات بينما يلا صغرتي المتصفح لحجم لهاتف غادي تلقى بلي ولات كل div فسطر فهادا كيعني بلي فقط فالطابليت لي غادي يكونوا ربعة فسطر.
الكود لي زدنا هو :

                                <!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">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <!-- <div class="container-fluid">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </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- ل classe col-md ف bootstrap

ل class col-md فهاد class خاصة بالأجهزة المتوسطة بحال ل pc portable لي العرض ديالها أقل أو أكثر من 768 px.
فالمثال لي عندي هو نفس الكود السابق فقط غيرنا ل class من col-sm-3 ل col-md-3 فهنا فل pc portable غادي تاخد كل div ثلاثة ديال الخانات بينما يلا صغرتي المتصفح لحجم لهاتف أو الطابليت غادي تلقى بلي ولات كل div فسطر فهادا كيعني بلي فقط  فل pc portable لي غادي يكونوا ربعة فسطر.
الكود لي زدنا هو :

                                <!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">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <!-- <div class="container-fluid">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </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- ل classe col-lg ف bootstrap

ل class col-lg فهاد class خاصة بالأجهزة الكبيرة بحال ل pc de bureau لي العرض ديالها أقل أو أكثر من 992 px.
فالمثال لي عندي هو نفس الكود السابق فقط غيرنا ل class من col-md-3 ل col-lg-3 فهنا فل pc de bureau غادي تاخد كل div ثلاثة ديال الخانات فيلا كنتي خدام ب pc portable مغادي يبان حتى تغيير والعكس صحيح.
الكود لي زدنا هو :

                                    <!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">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <!-- <div class="container-fluid">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </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>
                                

5- ل classe col-xl ف bootstrap

ل class col-xl  فهاد class خاصة بالأجهزة الكبيرة جدا بحال التلفزة  لي العرض ديالها أقل أو أكثر من 1200 px.
فالمثال لي عندي هو نفس الكود السابق فقط غيرنا ل class من col-md-3 ل col-xl-3 فهنا فالتلفزة غادي تاخد كل div ثلاثة ديال الخانات فيلا كنتي خدام ب pc مغادي يبان حتى تغيير والعكس صحيح.
الكود لي زدنا هو :

                                    <!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">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <!-- <div class="container-fluid">
        <h1>Bonjour bootstrap</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
    </div> -->
    <div class="container">
        <div class="row">
            <div class="col-xl-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="container-fluid">
                    <h1>Bonjour bootstrap</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officiis iste quo aliquid, recusandae rem, unde eligendi tempore sed delectus accusamus saepe minima eveniet, vel quae explicabo tempora nihil sapiente.</p>
                </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>