Bootstrap

BootStrap Introduction
مقدمة في اطار عمل BootStrap

سوف تتعلم في هذا الدرس  اطار عمل BootStrap  ومميزاته واستخدامه ودوره في تطبيقات الويب.

التاريخ

31 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1401

المواضيع

6
الشروحات chevron_left BootStrap Introduction chevron_left Bootstrap

BootStrap Introduction
مقدمة في اطار عمل BootStrap

</> ? What is Bootstrap
ما هو بوتستراب

Bootstrap هو اطار عمل مجاني ومفتوح المصدر تم تصميمه لتسهيل عملية تطوير تطبيقات ويب متجاوبة باستخدام مجموعة من التصميمات المعدة مسبقا وتم بناءه بشكل اساسي اعتمادا على لغة HTML  و CSS و JavaScript.


اهم ما يميز اطار عمل bootstrap:

  • technologies: يتكون bootstrap من مجموعة مهام برمجية متكونه من مجموعة لغات ومكتبات وهي HTML5,CSS3,JavaScript,jQuery.
  • popularity: يعتبر bootstrap من اشهر اطارات العمل التي تنتج تطبيقات ويب متجاوبة مع جميع الاجهزة.
  • components: يتكون  bootstrap من components مكونات مجهزه مسبقاً مثل typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins مما يسهل عليك استخدامها بدلاً من كتابتها من الصفر .
هام

What is Responsive Web Design ما هي صفحات الويب المتجاوبة؟

 Responsive Web Design هو تجاوب تطبيقات الويب تلقائياً مع جميع الاجهزة Desktop,Labtop,Mobile,Tablet حيث تتغير احجام العناصر ويتم اعادة هيكلة الصفحة تلقائيا اعتمادا على حجم شاشة كل زائر.

</> Bootstrap Advantages
مميزات بوتستراب

ما يميز اطار عمل bootstarp:

  • تطبيقات ويب متجاوبة: تصميم تطبيقات ويب متجاوبة مع جميع الاجهزة Desktop,Labtop,Tablet,Mobile.
  • توفير الوقت والجهد: يعتمد  bootstrap علي components مكونات اساسية يستخدمها المطورين بشكل مستمر.
  • سهل الاستخدام: يمكن لاي شخص استخدامة لا يتطلب الا اساسيات ال HTML وال CSS.
  • التجاوب مع الهواتف الذكية: من اولويات ال bootstrap عمل تطبيقات تعمل علي الهواتف الذكية.
  • التوافق مع المتصفحات:  bootstrap متوافق مع جميع المتصفحات الحديثة.
  • اكتب القليل ونفذ الكثير: بأوامر قليلة يمكن اختصار عدد سطور برمجية كثيره.
  • Responsive Grid: ياتي بوتستراب مع grid system نظام شبكة معرفا مسبقا يتكون هذا النظام من اعمدة وصفوف تجعلك في غنى عن استخدام اي media queries داخل ملف CSS.
  • Image System: يعمل بوتستراب بنظام classes واحد اهم هذه ال classes هو هذا image-responsive. هذه الجملة البرمجية البسيطة في بوتستراب كفيلة بجعل الصورة ذات حجم متجاوب تلقائيا مع جميع الشاشات بجيمع ابعادها.
  • Bootstrap Documentation: يوفر بوتستراب وثائق للمطورين الذين يرغبون في تعلم كيفية استخدامه لأول مرة. يمكنك زيارة صفحة توثيق بوتستراب من هنا.

</> Bootstrap Installation
تثبيت بوتستراب

تحصل علي الاصدار الاحدث من Bootstrap بطريقتين:

  • استخدام  Bootstrap 5 عن طريق ال CDN.
  • استخدام  Bootstrap 5 عن طريق تحميله من موقعه من هنا.

ملحوظة: CDN هي اختصار لمصطلح Content Delivery Network وتعتبر الطريقة المفضلة في الاستخدام لانها ترفع من اداء تطبيقات الويب وعرض الصفحات بطريقة اسرع.

CDN

استخدام اطار عمل bootstrap بروابط مباشرة من شبكة bootstrap.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- Popper JS -->
<script src=https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
CDN

إحدى الميزات الكبيرة لاستخدام ال CDN المستضاف من CDN Network:

اذا قام احد المستخدمين المواقع بزيارة موقع اخر يستخدم مكتبة  bootstrap مستضافة من CDN قبل زيارة موقعك الخاص. نتيجة لذلك ، سيتم تحميله من ذاكرة التخزين المؤقت عندما يزورون موقعك ، مما يؤدي إلى وقت تحميل أسرع. أيضًا ، ستتأكد معظم شبكات CDN من أنه بمجرد أن يطلب المستخدم ملفًا منه ، سيتم تقديمه من الخادم الأقرب إليهم ، مما يؤدي أيضًا إلى وقت تحميل أسرع.

لتحميل ال bootstrap واستضافته علي جهازك او للتدريب يمكن زيارة موقعه الرسمي getbootstrap.com

</> Starter template
نموذج البداية

يجب عليك التحقق من عدة نقاط لضمان استخدام ال bootstrap بطريقة صحيحه :

  • اضافة meta tag من النوع viewport
    يحتوي عنصر meta على خاصيتين هما name و content.
  • اضافة ملف  Bootstrap CSS في عنصر head.
  • اضافة ملف JS وهو Bootstrap Bundle قبل <body/>.
Starter Template

مجموعة اوامر تتيح لك البدء في استخدام اطار عمل bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
  
  </body>
</html>
Optional
الروابط الموجودة في اسفل ملف HTML قبل نهاية عنصر body والمكتوبة بعد تعليق option 2 هي اختيارية على حسب الحاجة.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.