انشاء اول موقع باستخدام Bootstrap 5

-

في هذا الدرس بنتعلم كيف بنعمل صفحة انترنت بسيطه باستخدام Bootstrap 5

نبدا بمثال

افتح ملف جديد في Visual studio code من نوع HTML وبعدها اضف الكود التالي :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Welcome, Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Welcome, My First Bootstrap Page</h1>
  <p>Hello, from inside a .container class.</p>
  <p>Hello, The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة :

تمام نفهم شو عملنا في الكود:

تحديد نوع المستند

اول سطر حددنا نوع المستند الي هو عبارة عن HTML5  وحددنا اللغة المستخدمه بالاضافة الى charset  الكود:
<!DOCTYPE html><html lang="en"> <head>     <title>Welcome, Bootstrap Example</title>     <meta charset="utf-8"> </head> </html>
من الضروي في صفحات HTMLتحديد النوع وذلك لان Bootstrap 5 يستخدم HTML elements وCSS properties التي تتطلب نوع مستند HTML5.

ويفضل اضافة العنوان و charset ايضا في بداية الصفحة

نهج mobile-first في Bootstrap 5 

لان Bootstrap 5 من اهم خصائصها هي responsive بحيث يتم تعديل الصفحة بشكل تلقائي حسب حجم الجهاز لذا من الضروري اضافة الكود الي بيعمل على هاذ الاشي :
<meta name="viewport" content="width=device-width, initial-scale=1">
الغرض من هذا الكود ضمان يكون عرض الصفحه بشكل صحيح حسب نوع الجهاز . وهذا الامر لازم يكون موجود داخل head> element>
الكود width=device-width هو المسؤول عن التحكم بحجم الشاشة، وبختلف حسب حجم الجهاز.
الكود initial-scale=1 المسؤول عن مستوى التكبير الأولي initial zoom عند تحميل الصفحة لأول مرة بواسطة المستعرض. 

الجزء الخاص ب <body>
 من الاشياء المهمة في Bootstrap 5 هو container class. الي بكون هو  الحاوية الي بتحتوي مكونات الصفحه. مشان هيك اول سطر بعد Body كان :
<div class="container">
 تمام بعد هذا الكود اضفنا مكونات الصفحه.
<div class="container">
        <h1>Welcome,  First Bootstrap Page</h1>
        <p>Hello, from inside a .container class.</p>
        <p>Hello, .container class provides a responsive fixed width container.</p>
    </div>

هناك نوعان من container classes للاختيار من بينها:

  • container. بكون العرض ثابت حسب حجم الشاشة واكيد بكون قابل للتعديل التلقائي عند التكبير والتصغير حسب الحجم.
  • container-fluid. بكون الحجم بحجم الشاشة كاملة full width container، تغطي العرض الكامل لإطار العرض width of the viewport

الصورة التالية بتوضح الفرق بين النوعين :

حتي نفهم الفرق بين النوعين نرجع للكود السابق ونطبق النوعين ونشوف الفرق. 

النوع الأول : 

container

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Welcome,  First Bootstrap Page</h1>
        <p>Hello, from inside a .container class.</p>
        <p>Hello, .container class provides a responsive fixed width container.</p>
    </div>
</body>
</html>

نتيجة التنفيذ بتكون : 

شوف كيف النتيجة تم عرض مكونات الصفحة بحجم ثابت في الصفحة (شوف margin يمين ويسار) حاول تغير حجم الشاشة وشوف النتيجة.

النوع الثاني container-fluid

غير الكود السابق الى :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome, Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <h1>Welcome,  First Bootstrap Page</h1>
        <p>Hello, from inside a .container class.</p>
        <p>Hello, .container class provides a responsive fixed width container.</p>
    </div>
</body>
</html>

شغل الصفحة وشوف النتيجة :

شوف كيف تم عرض المكونات بحجم الصفحة كاملة.