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


فهاد الدرس الواحد والعشرون من دورة bootstrap 4 للمبتدئين غادي نكملو الدورة ديالنا بالتطرق للمزيد من les propriétés css وغادي نشوفوا ايضا كيفاش نخدموا ب flex باش نتحكموا فل position ديال les éléments ديالنا.


1- إضافة ل margin

باش نزيد ل margin كنخدم بل class m وكنعطيها :
- mb لل margin-bottom وكنحدد شحال بغيت من 1 ل 5.
- mt لل margin-top.
- mr لل margin-right.
- ml لل margin-left.
- mx لل margin-right و margin-left.
- my لل margin-top و margin-bottom.
فالمثال لي عندنا زدنا div عطيناها margin ف top ول bottom وright وleft الكود لي زدنا هو :

                                <!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-6 mx-auto mt-4">
                <div class="bg-primary mt-2 mr-2 mb-2 ml-3">DCoding</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- إضافة ل padding

باش نزيد ل padding كنخدم بل class p وكنعطيها :
- pb لل padding-bottom وكنحدد شحال بغيت من 1 ل 5.
- pt لل padding-top.
- pr لل padding-right.
- pl لل padding-left.
px لل padding-right و padding-left.
- py لل padding-top و padding-bottom.
فالمثال لي عندنا نفس div لي زدنا قبل عطيناها padding ف top ول bottom وright وleft الكود لي زدنا هو :

                                <!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-6 mx-auto mt-4">
                <div class="bg-primary mt-2 mr-2 mb-2 ml-3 pt-2 pr-2 pb-2 text-white pl-3">DCoding</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- إظهار وإخفاء عناصر من DOM

باش نخفي أو نبين des éléments من DOM عندي des classes لي هما visible و invisible فمن الإسم باين شنو كيديرو :
- visible كتبين ل élément.
- invisible كتخفي ل élément.
فالمثال لي عندنا زدنا 2 ديال les divs وحدة عطيتها ل class visible والثانية invisible الكود لي زدنا هو :


                                <!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-6 mx-auto mt-4">
                <div class="visible">DCoding</div>
                <div class="invisible">DCoding</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- استخدام ل class flex

شفنا من قبل كيفاش نحطو كل élément فالموقع ديالو باستخدام ل class col دبا غادي نشوفوا حاجة جديدة هي ل class flex لي كتمكن باش نحطو مجموعة ديال les éléments فسطر واحد.
فالمثال لي عندنا كيف كنشوف فالصورة :

زدنا 3 ديال div كل وحدة عطيناها لون وفل parent لي حتى هو div عطينا ل class d-flex لي كتعني diplay flex فهاد ل class مكنتني انني نعرضهم فسطر واحد الكود لي زدنا هو :

                                    <!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 d-flex text-white">
        <div class="bg-primary p-2 mt-4">DCoding</div>
        <div class="bg-danger p-2 mt-4">DCoding</div>
        <div class="bg-success p-2 mt-4">DCoding</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 flex تتمة

فكيف شفنا قبل خدمنا ب d-flex ممكن نخدم ب flex-row لي كتعني بلي كنعرض les éléments فسطر واحد وممكن نخدم ب flex-row-reverse باش نبدا من ليمن لليسر كيف كنشوف فالصورة :



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

                                    <!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 d-flex flex-row text-white">
        <div class="bg-primary p-2 mt-4">DCoding</div>
        <div class="bg-danger p-2 mt-4">DCoding</div>
        <div class="bg-success p-2 mt-4">DCoding</div>
    </div>
    <div class="container d-flex flex-row-reverse text-white">
        <div class="bg-primary p-2 mt-4">DCoding</div>
        <div class="bg-danger p-2 mt-4">DCoding</div>
        <div class="bg-success p-2 mt-4">DCoding</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>