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


فهاد الدورة الجديدة للمبتدئين غادي نشوفوا bootstrap 4 لي هو أشهر framework html css & javascript لدى جل المبرمجين.
ف bootstrap كيمكني باش نقاد مواقع responsive يعني كتلأم مع جميع الأجهزة سواء الموبايل أو الطابليت أو الحاسوب.
فهاد الدرس الأول غادي نتعرفوا على bootstrap غادي نشوفوا كيفاش نزيدوه لصفحات ديالنا وكيفاش نديروا أولى الخطوات نحو التمكن من أشهر framework html css & javascript.


1- إضافة البنية الأساسية لملف html

أول حاجة زيد dossier جديد سميه bootstrap-course  وفتحوا فل code éditeur ديالك من بعد زيد ملف سميه index.html وفتحوا فالمتصفح ديالك دبا غادي نزيدوا الكود فنفس الملف.
ف bootstrap كيخدم ب html 5 أول حاجة كنزيدها هي Doctype لي كنحددها ف html منبعد كنزيد البنية الأساساية ديال ملف ل html فيلا مكنتيش عارف ل html رجع للدروس السابقة.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Course</title>
</head>
<body>
    
</body>
</html>
                            

2- ملائمة جميع الأجهزة

فكيف قلنا قبل bootstrap responsive لي كتعني بلي كيتوافق مع جميع الأجهزة من الهاتف حتى الحاسوب.
فل head زدت meta سميتها viewport فل content عندها :
width=device-width ولي كتخلي عرض الشاشة يوافق العرض ديال اي جهاز فتحنا فيه الموقع ديالنا.
initial-scale=1 ولي كتحدد حجم الزووم أول مرة كتشارجا الصفحة الرئيسية ديال الموقع ديالنا.
الكود لي زدنا هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Course</title>
</head>
<body>
    
</body>
</html>
                            

3- إضافة bootstrap للملف ديالنا

باش نزيد boostrap للملف ديالي كاين إمكانيتين :
- تحميل bootstrap من الموقع الرسمي وإضافة ملفات css و javascript للملف ديالنا.
- نخدم ب cdn ولي خص تكون عندك connexion internet باش تخدم بها دائما وهادشي لي غادي ندير أنا.
ف cdn كتمكني من استرجاع ملفات bootstrap من الموقع بلا من نحملهم.
الكود لي زدنا فيه رابط لملف css ورابط لملفات jquery , javascript لي غادي نحتاجوا باش نخدموا ب bootstrap :

                                !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>
    <!-- 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 container ف bootstrap

ل class container ف bootstrap هي لي كتجمع ل contenu ديال الصفحة ديالنا بمعنى أخر العناصر لي كنزيد كلهم كيكونوا فوسطها.
هاد ل class container كتخلي العناصر ديالي كاياخدو جزء من الصفحة ويجيو فالوسط فالمثال لي عندنا زدنا div عطيناها class container فيها  h1 وp فيلا فتحتي فالمتصفح ديالك غادي تلقى المحتوى فوسط الصفحة.
الكود لي زدنا هو :

                                    <!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>
    <!-- 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 container-fluid ف bootstrap

ل class container-fluid  ف bootstrap حتى هي كتجمع العناصر كاملة بحال container غير الفرق هو انها كتاخد العرض ديال الملف كامل وهاد ل class كنخدموا بها غالبا فل menu.
الكود لي زدنا هو نفس الكود السابق فقط غيرنا من container ل container-fluid الكود لي زدنا هو :

                                    <!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>
    <!-- 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>