Bootstrap هو إطار عمل (Framework) أمامي (Front-end) مفتوح المصدر مبني على HTML و CSS و JavaScript. تم تطويره أصلاً في Twitter وأُصدر كمشروع مفتوح المصدر. يوفر مجموعة واسعة من المكونات والأدوات التي تسهل عملية تطوير واجهات المستخدم للمواقع والتطبيقات.
ميزات تشمل الاتي :
1. نظام الشبكة (Grid System): يوفر نظام الشبكة في بوتستراب إمكانية تقسيم الصفحة إلى أعمدة وصفوف، مما يسمح بترتيب وتنظيم المحتوى بشكل مرن واستجابي.
2. مكونات واجهة المستخدم (UI Components): يحتوي بوتستراب على مجموعة كبيرة من المكونات المسبقة مثل الأزرار وأشرطة التنقل والنماذج والجداول والبطاقات وغيرها، مما يسهل إضافتها واستخدامها في تصميم الصفحات.
3. التنسيقات الجاهزة (Pre-styled Components): يتضمن بوتستراب تنسيقات مسبقة للعديد من العناصر مما يساعد على إضافة الأنماط وتخصيص التصميم بسهولة.
4. استجابية التصميم (Responsive Design): يُصمم بوتستراب ليكون متجاوبًا، حيث يتكيف بشكل جيد مع مختلف أحجام الشاشات والأجهزة مثل الهواتف الذكية والأجهزة اللوحية وأجهزة الكمبيوتر.
5. توثيق ممتاز: يأتي بوتستراب مع وثائق شاملة ومفصلة تحتوي على أمثلة واضحة وشروحات واضحة لاستخدام كل عنصر.
6. شبكة دعم قوية: توجد مجتمعات ومنتديات كبيرة تدعم بوتستراب وتوفر المساعدة والموارد للمطورين.
Bootstrap يساعد على إنشاء واجهات مستخدم جميلة وسريعة الاستجابة بسهولة، مما يجعله خيارًا شائعًا بين المطورين لتسريع عملية تطوير المواقع والتطبيقات.
ربط bootstrap مع laravel
لربط Bootstrap مع Laravel، يمكنك اتباع الخطوات التالية:
تثبيتة عبر npm:
- قم بتثبيتة باستخدام npm في مشروع Laravel الخاص بك. في الطرفية، أدخل الأمر التالي:
npm install bootstrap
تجميع Bootstrap مع Laravel Mix:
- في ملف
webpack.mix.js
الخاص بمشروع Laravel، قم بإضافة بوتستراب لعملية الجمع مع Laravel Mix:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');
استخدام Bootstrap في العرض الخاص بك:
قم بتضمين ملفات بوتستراب في عرض Laravel الخاص بك. افتح ملف العرض الرئيسي (مثل
app.blade.php
) وضمن العناصر<head>
، قم بإضافة روابط CSS لـ بوتستراب:
ثم، قم بإضافة الرابط الخاص بملف JavaScript:
إعادة تجميع الملفات:
- بعد تغييراتك، قم بإعادة تجميع الملفات باستخدام Laravel Mix. استخدم الأمر:
npm run dev
او
npm run watch
بهذه الطريقة، ستتمكن من ربط Bootstrap بمشروعك Laravel واستخدام مكوناته وأنماطه في الواجهات التي تقوم بتطويرها. تأكد من استدعاء ملفات بوتستراب في الأماكن المناسبة داخل عرض Laravel الخاص بك لضمان تطبيق التصميمات والمكونات الخاصة به بشكل صحيح.
امثـــــــــــــلة Bootstrap
Ex1: Navbar بوتستراب
في ملف العرض الخاص بك (app.blade.php
مثلاً)، يمكنك استخدام بوتستراب لإنشاء Navbar:
Bootstrap Navbar Example
Ex2: Cards بوتستراب
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Ex3: Buttons زرّ بوتستراب
Ex4: Forms نموذج بوتستراب
Ex5: Alerts تنبيهات بوتستراب
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
Ex6: Modals نافذة نمودجية بوتستراب
Modal title
...
هذه أمثلة لاستخدام bootstrap في Laravel لإنشاء أزرار، نماذج، تنبيهات، ونوافذ نمودجية. يمكنك استخدام هذه المكونات والأنماط في مشروع Laravel الخاص بك وتعديلها وفقًا لاحتياجاتك المحددة. استفد من قوة وسهولة بوتستراب في تصميم واجهات المستخدم الخاصة بك.
معلومات اضافية لتعلم bootstrap
1. الموقع الرسمي لـ Bootstrap:
يحتوي على الوثائق الرسمية والأمثلة التفاعلية.
– [Bootstrap Documentation](https://getbootstrap.com/docs/)
2. كورسات على الإنترنت:
– [Coursera – Front-End Web UI Frameworks and Tools](https://www.coursera.org/learn/bootstrap-4)
– [Udemy – Bootstrap 4 From Scratch With 5 Projects](https://www.udemy.com/course/bootstrap-4-from-scratch-with-5-projects/)
3. قنوات يوتيوب:
– [Academind – Bootstrap 4 Tutorial for Beginners](https://www.youtube.com/watch?v=hnCmSXCZEpU)
– [Traversy Media – Bootstrap Crash Course](https://www.youtube.com/watch?v=9cKsq14Kfsw)
4. كتب:
– “Learning Bootstrap 4” by Matt Lambert
– “Bootstrap 4 Quick Start” by Jacob Lett
5. مواقع التعلم عبر الإنترنت:
– [W3Schools – Bootstrap Tutorial](https://www.w3schools.com/bootstrap/)
– [MDN Web Docs – Bootstrap](https://developer.mozilla.org/en-US/docs/Archive/Web/Bootstrap)
6. أمثلة ومشاريع عملية:
– قم بإنشاء مشاريع صغيرة باستخدام Bootstrap لتطبيق المفاهيم التي تعلمتها.
– استعرض الأمثلة الموجودة في موقع الوثائق الرسمي.
7. Bootstrap Expo:
– [Bootstrap Expo](https://expo.getbootstrap.com/): قائمة بمشاريع الويب التي تستخدم Bootstrap، وهي مصدر رائع للإلهام وفهم كيف يتم تنفيذ ميزات معينة.
8. مجتمع Bootstrap:
– قم بزيارة منتديات Bootstrap والمجتمعات عبر الإنترنت للحصول على المساعدة وتبادل الأفكار.
– [Bootstrap Forum](https://forum.getbootstrap.com/)
تأكد من توخي الاستمرارية في التدريب والتطبيق العملي للمفاهيم التي تعلمتها.
Sharing to