مقدمة في Bootstrap

-

بنتعلم في هذا الكورس عن Bootstrap وشو الفائدة منها. وبنحكي هون عن 5 Bootstrap وهو أحدث إصدار من Bootstrap، وهو عبارة عن HTML, CSS, and JavaScript framework. يستخدم لانشاء مواقع الانترنت بحيث تكون سريعة الاستجابه ومتوافقه مع الاجهزة المختلفه (Computer, Mobile, IPad) وغيرها. يجب الانتباه الى ان  Bootstrap 5  لا يدعم في Internet Explorer 11 والإصدارات الأقدم 

Bootstrap 5 vs. Bootstrap 3 & 4

Bootstrap 5 هو أحدث إصدار من Bootstrap ؛ بمكونات جديدة و stylesheet أسرع واستجابة أكثر more responsiveness.

يدعم Bootstrap 5 أحدث الإصدارات لجميع المتصفحات وplatforms. ومع ذلك ، لا يدعم Internet Explorer 11 والإصدارات الأقدم.

تتمثل الاختلافات الرئيسية بين Bootstrap 5 و Bootstrap 3 و 4 في أن Bootstrap 5 قد تحول إلى JavaScript بدلاً من jQuery. لذا اذا كان لديك تطبيق او موقع يستخدم  Internet Explorer 11 فننصح باستخدام jQuery


جافا سكريبت JavaScript؟

في Bootstrap 5 يستخدم JavaScript لمكونات مختلفة (مثل modals ، وtooltips ، وpopovers ... إلخ). ومع ذلك ، إذا كنت تستخدم فقط جزء CSS من Bootstrap ، فلن تحتاجه.


ما هو Bootstrap؟

Bootstrap هو front-end framework لتطوير الويب بشكل أسرع وأسهل
يتضمن Bootstrap مجموعه من templates للتصميم تستند إلى HTML و CSS وتستخدم for typography, forms, buttons, tables, navigation, modals, image carousels وغيرها من المكونات الأخرى ، بالإضافة إلى مكونات JavaScript الإضافية الاختيارية
يمنحك Bootstrap أيضًا القدرة على إنشاء تصميمات سريعة الاستجابة بسهولة responsive designs

شو يعني Responsive Web Design

Responsive web design هو تصميم صفحات ومواقع الانترنت بحيث تكون سريعة الاستجابة ومتوافقه مع جميع الأجهزة بحيث يتم اعادة الضبط بشكل تلقائي ( الهواتف الصغيرة، أجهزة الكمبيوتر الكبيرة، اجهزة IPad).

مزايا Bootstrap

  • سهل الاستخدام: يحتاج الى معرفه بسيطه فقط في HTML و CSS.
  • ميزات الاستجابة Responsive : يستخدم Bootstraps responsive CSS بحيث يتوافق مع phones و tablets و desktops
  • Mobile-first approach: في Bootstrap ، تعد أنماط الجوال أولاً جزءًا من core framework
  • متوافق مع المتصفحات Browser compatibility: في Bootstrap 5 متوافق مع جميع المتصفحات الحديثة (Chrome و Firefox و Edge و Safari و Opera). 
  • في حال كنت تستخدم Internet Explorer 11 او اصدار اقدم يجب استخدام الاصدرات الاقدم BS4 or BS3

Bootstrap مجاني 100 % 

تحميل Bootstrap 5؟

حتى نستخدم Bootstrap 5 في مواقع الانترنت ممكن يتم بطريقتين وهم :

  • تضمين Bootstrap 5 من CDN (شبكة توصيل المحتوى) في صفحات المواقع
  • تنزيل Bootstrap 5 من موقع getbootstrap.com

الفرق بين الطريقتين هو: الطريقة الاولي يتم اضافة رابط ملفات Bootstrap من الموقع cdn مباشرة، اما الطريقة الثانية نعمل على تحميل هذه الملفات الى الموقع الخاص بنا واستخدام هذه الملفات. 

يوفر jsDelivr دعم CDN لكل من Bootstraps CSS و JavaScript:


مثال على استخدام الطريقة الأولى: 

فقط اضافة الرابط كامل للملفات كما في الكود التالي:

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


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


استخدام الطريقة الثانية (تحميل ملفات Bootstrap )

يمكن تحميل ملفات Bootstrap  من موقع https://getbootstrap.com مباشرة بحيث تكون استضافة هذه الملفات في الموقع الخاص بك مباشره

ننصح باستخدام هذه الطريقة بحيث بتم قراءة الملفات مباشرة ولا حاجة الى الاتصال باي موقع خارجي 

بعد التحميل بنزل ملف على جهازك باسم bootstrap-5.1.3-dist وبكون مضغوط 

افتح الملف اكيد بتحاج ملف فط الضغط مثل WinRAR 

بعد فتح الملف بنزل عند مجموعه من ملفات CSS و JavaScript الخاصه ب bootstrap-5.1.3




هاي الملفات الموجوده هون هي الي بنستخدمها في مواقع الانترنت.