كيفية تثبيت Bootstrap في Angular؟ 5 طرق سهلة

نشرت: 2023-05-24

تعمل صفحة الويب بشكل أفضل عندما تكون تفاعلية. ومع ذلك ، لا يبدو أنه من الممكن تطوير صفحة ويب جديدة بين عشية وضحاها.

هذا هو الوقت الذي قد تشعر فيه بالحاجة إلى الوصول إلى صفحة ويب قد تكون شائعة ولكن يمكن تعديلها بسهولة عبر الرموز المخصصة. هذا هو المكان الذي يأتي فيه Bootstrap للعب.

دعونا نبدأ بفهم كيفية تثبيت Bootstrap في Angular من أجل إنشاء تطبيقات ويب سريعة الاستجابة وحيوية على Angular!

جدول المحتويات

فهم Bootstrap: دليل أولي

يعد Bootstrap إطار عمل أمامي يوفر مجموعة من الأدوات والمكونات من CSS و HTML و JavaScript لإنشاء صفحات ويب ديناميكية. Bootstrap مفتوح المصدر بالإضافة إلى أنه مجاني. في حين أن Angular بحد ذاته إطار عمل قادر على إنشاء مواقع ويب قوية من صفحة واحدة ، فإن دمجها مع Bootstrap يزيد من قوتها في إنشاء صفحات ويب سريعة الاستجابة وديناميكية.

اكتسب Bootstrap شعبية كبيرة ، وحوالي 25.8٪ من جميع مواقع الويب القائمة على JavaScript تستخدم Bootstrap ، مما يدل على أهميتها في السوق.

Bootstrap: لمحة عن تاريخها

في البداية ، تم إنشاؤه كأداة داخلية لموقع التواصل الاجتماعي الشهير Twitter ، قرر المهندسون Jacob Thornton و Mark Otto نشر Bootstrap للاستخدام العام في أغسطس 2011 على مستودع مفتوح المصدر GitHub.

بعد ملاءمته وشعبيته بين الجمهور ، يواصل المبدعون العمل على إنشاء إصدارات أحدث من Bootstrap ، وتزويدها بمكونات واجهة مستخدم محسّنة ودعم أفضل.

أسقط المبدعان مارك وجاكوب أحدث إصدار من Bootstrap- Bootstrap 5.3.0 في عام 2023.

تحقق مندوراتنا التكنولوجية المجانيةلتتفوق على المنافسة.

هل يجب عليك استخدام Bootstrap؟

يمكنك الوصول إلى إجابة على السؤال من خلال فهم عدد كبير من الفوائد التي يقدمها هذا المشروع. بادئ ذي بدء ، فإنه يوفر CSS فائقة الاستجابة. هذا يجعلها قابلة للتكيف مع أجهزة الكمبيوتر المكتبية وعلامات التبويب وكذلك الهواتف. كما أن لديها قابلية حسابية عبر معظم المتصفحات الرئيسية.

أضف إلى ذلك ميزة أقل متطلبات الإعداد ، وستحصل على تصميم في غضون ساعة ، إن لم يكن أقل. يعد Bootstrap مفيدًا للاستخدام لأنه لا يحتاج إلى أن يكون المستخدم بارعًا في CASS أو حتى HTML إلا إذا كنت بحاجة إلى بدء تعديلات قائمة على واجهة المستخدم.

الميزات الأكثر ملاءمة التي تجعل Bootstrap خيارًا شائعًا للتضمين في Angular أو لإضافةتثبيت Angular Bootstrap هي-

جانب المكون

من أشرطة التنقل إلى النماذج ، يوفر Bootstrap سجلًا للمكونات للتطبيقات عندما تقرر كيفية إضافة Bootstrap في Angular.بمساعدة هذه المكونات ، يصبح تصميم موقع أو تطبيق إبداعي أمرًا سهلاً للغاية. تحظى هذه الوظيفة مع Bootstrap in Angular بشعبية كبيرة بين المطورين.

تحقق مندورات تطوير البرمجياتupGrad لتطوير مهاراتك.

جانب التخصيص

عند إجراءتثبيت Bootstrap في Angular ، يمكنك تصميم نقاط توقف مخصصة حتى لعمود وإدراج فواصل ، أيضًا ، بأحجام حسب حاجتك.كما أنه يبسط التخصيص على أساس الشبكة المتجاوبة للإطار.

التوفير في الوقت

يؤدي إطار عمل Bootstrap ، عند تضمينه في Angular ، إلى توفير كبير للوقت على بت المخطط الزمني. بفضل الكتل الجاهزة في Bootstrap ، ليست هناك حاجة للبدء مباشرة من البداية عند تثبيتBootstrap 5 في الزاوية .إن مجرد إعادة تنظيم العناصر المضمنة وجعلها قابلة للاستخدام مع مدخلاتك يفي بالغرض بل ويضيف تفردًا لمنتجك النهائي.

المتطلبات الأساسية لتثبيت Bootstrap في Angular

فيما يلي قائمة بالمتطلبات الأساسية لإضافة Bootstrap إلى Angular. تأكد من تكوين الأدوات المدرجة بعد تثبيتها لإنشاء تطبيق Angular.

  • Git : هذا هو إعداد وحدة تحكم في الإصدار الموزع لاستخدامه لمزامنة المستودع.
  • IDE - يعد استخدام بيئة تطوير متكاملة لها واجهة رسومية أمرًا حيويًا لتطوير التطبيقات ، بما في ذلك Angular.
  • Node.js و npm : الأول هو برنامج كود JavaScript لوقت التشغيل.بينما يأتي الأخير ، npm ، كمدير حزم يستخدم لـ Node.js. تعمل جميع تطبيقات Angular بناءً على الاثنين ، بينما تساعد هذه التطبيقات أيضًا في تثبيت المكتبة.
  • Angular CLI: تعتمد أداة الأداة المساعدة هذه على سطر الأوامر لإنشاء بنية قاعدة Angular.

خذ تلميحًا من دورات هندسة البرمجيات المختلفة المتاحة من أعضاء هيئة التدريس الخبراء في upGrad ، مثل ماجستير العلوم في علوم الكمبيوتر ، وعزز مهاراتك التنموية بشكل كبير.

الطريقة الأولى: تثبيت Bootstrap عبر CDN

اتبع الخطوات ذات الصلة لتثبيت Bootstrap على Angular عبر CDN.

  • حدد موقع المجلد "src" وافتح ملف مشروع Angular " index.html ".
  • قم بتضمين الروابط التالية في قسم " <head> ".

<link rel = ”stylesheet” href = ”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

<script src = ”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”> </script>

  • يتم تضمين ملفات JavaScript و CSS الخاصة بـ Bootstrap في سطور التعليمات البرمجية هذه من عناوين URL المحددة لـ CDN.
  • احفظ التغييرات النهائية في ملف " index.html " الخاص بك.

سيستخدم مشروع Angular الخاص بك أنماط Bootstrap وإمكانيات JavaScript التي يوفرها CDN بمجرد تضمين روابط CDN هذه. أنت الآن جاهز للاستفادة من مكونات Bootstrap في مشاريع Angular الخاصة بك!

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

يمكن تثبيت Bootstrap باستخدام مدير npm باتباع الخطوات البسيطة المحددة.

  • افتح موجه الأوامر أو المحطة الطرفية.
  • انتقل إلى الدليل الجذر لمشروع Angular الخاص بك.
  • قم بتثبيت Bootstrap والاعتماديات المرتبطة به عن طريق تشغيل الأمر " npm install bootstrap" .سيقوم الأمر ذي الصلة بتنزيل Bootstrap وتوابعه ذات الصلة في دليلك المسمى"node_modules".
  • بعد التثبيت ، تحتاج إلى دمج أنماط Bootstrap و Javascript عن طريق فتح ملف "angular.json" من الدليل الجذر وإضافة الإدخال التالي داخل مصفوفة "الأنماط".

"node_modules / bootstrap / dist / css / bootstrap.min.css"

  • علاوة على ذلك ، أضف الأمر التالي داخل مصفوفة "البرامج النصية" .

"node_modules / bootstrap / dist / js / bootstrap.min.js"

  • احفظ جميع التغييرات التي تم إجراؤها على ملف " angular.json" .

أنت الآن جاهز لاستخدام فئات JavaScript و CSS من Bootstrap في مكونات وقوالب Angular الخاصة بك.

استكشف دوراتنا التدريبية الشهيرة في هندسة البرمجيات

ماجستير العلوم في علوم الكمبيوتر من جامعة جون مورس بليفربول و IIITB برنامج شهادة الأمن السيبراني من معهد كاليفورنيا للتكنولوجيا CTME
برنامج تدريب تطوير المكدس الكامل برنامج PG في Blockchain
برنامج PG التنفيذي في تطوير Full Stack
عرض جميع دوراتنا أدناه
دورات هندسة البرمجيات

الطريقة الثالثة: تثبيت Bootstrap عبر Angular CLI

فيما يلي دليل سهل المتابعة لمساعدتك في تثبيت Bootstrap عبر Angular CLI.

  • افتح موجه الأوامر الخاص بك.
  • قم بتشغيل الأمر "ng new my-app" لاستخدام Angular CLI وإنشاء مشروع Angular جديد.يمكنك استبدال"تطبيقي" باسم من اختيارك.
  • غيّر إلى دليل المشروع.

cd بلدي التطبيق

  • كرر عملية تثبيت Bootstrap باستخدام npm ، كما هو مذكور أعلاه.

لقد قمت الآن بإنشاء مشروع Angular جديد باستخدام CLI ، بالإضافة إلى تثبيت Bootstrap لمشروعك!

الطريقة الرابعة: تثبيت Bootstrap عبر Bower package manager

  • تأكد من تثبيت كل من npm و bower على مستوى العالم.
  • قم بتشغيل الأمر المحدد في موجه الأوامر - npm install -g bower
  • بمجرد تثبيت bower ، انتقل إلى مجلد المشروع واكتب

تعريشة تثبيت التمهيد

تعريشة تثبيت مسج

ستعمل الخطوات المذكورة أعلاه على تثبيت ملفات تثبيت Bootstrap ذات الصلة في مجلد "bower_components" الذي تم إنشاؤه حديثًا .

  • ستكون الخطوة الأخيرة هي تضمين ملفات Bootstrap و jquery في ملف مشروعك.

في حين أن هذه هي جميع الخطوات لتثبيت Bootstrap في Angular ، ضع في اعتبارك أنه لم يعد من المستحسن استخدام bower لتثبيت Bootstrap.

استكشف دوراتنا المجانية في تطوير البرمجيات

أساسيات الحوسبة السحابية أساسيات JavaScript من البداية هياكل البيانات والخوارزميات
تقنية Blockchain رد فعل للمبتدئين أساسيات Java الأساسية
جافا Node.js للمبتدئين جافا سكريبت متقدم

الطريقة الخامسة: تثبيت Bootstrap عبر بنية مخصصة

فيما يلي الخطوات البسيطة لتثبيت Bootstrap عبر بنية مخصصة

  • قم بتنزيل اختيارك لإصدار Bootstrap من الموقع الرسمي إلى جانب ملفات Javascript و CSS الخاصة به.
  • قم باستخراج الملف المضغوط وانسخ "bootstrap.min.css " منه .
  • في مشروع Angular الخاص بك ، انتقل إلى دليل " src " وأنشئ واحدًا جديدًا يسمى " الأصول". تأكد من إنشاء دليل آخر ضمن "الأصول" يسمى " css".
  • الصق"bootstrap.min.css " داخل دليل " css".
  • مرة أخرى ، في دليل "الأصول " ، قم بإنشاء دليل جديد يسمى " js" والصق "bootstrap.min.js" المستخرج من المجلد المضغوط داخل هذا الدليل الجديد.
  • افتح "angular.json " في الدليل الجذر وانتقل إلى مصفوفة " الأنماط"باتباع شريحةالمهندس المعماري> البناء> الخيارات.
  • أضف ملفات Bootstrap CSS باستخدام الأمر التالي -

"src / الأصول / css / bootstrap.min.css"

  • ابحث عن مصفوفة 'scripts' في نفسه والصق الأمر التالي-

"src / الأصول / js / bootstrap.min.js"

  • احفظ التغييرات في ملف " angular.json ".

أفضل الممارسات التي يجب اتباعها عند تثبيت Bootstrap

في حين أن هناك عدة طرق لتثبيت Bootstrap في Angular ، فإن معرفة أفضل الممارسات يمكن أن يبسط العملية بشكل أكبر.

  • تأكد من استيراد ملفات Bootstrap CSS الصحيحة داخل الملفات والمجلدات الصحيحة في مشروع Angular الخاص بك.
  • بينما يقدم Bootstrap كتالوجًا واسعًا من فئات ومكونات CSS ، اختر فقط تلك ذات الصلة بمشروعك.
  • تجنب المكونات غير الضرورية لتحسين الأداء.
  • ابق على اطلاع بأحدث إصدار من Bootstrap.
  • بينما تتوفر مكونات جافا سكريبت ، استخدمها باعتدال. حاول الاستفادة من مكتبات Angular الخاصة.

من ناحية أخرى ، إذا كنت تستطيع إدارة الوقت وتأمل في أن تصبح مطورًا أفضل ، فلا شيء يمكن أن يكون أفضل من برنامج upGrad التنفيذي للدراسات العليا في تطوير البرمجيات- Full Stack ، المدعوم من IIIT-B.

خاتمة

هنا نختتم قائمتنا لبعض أفضل الطرق لتثبيت Bootstrap في Angular لتحسين تطوير صفحات الويب. من التصميم المتجاوب المحسّن إلى دمج الميزات الديناميكية الجديدة ، ستساعدك معرفة كيفية الاستفادة من مكونات Bootstrap الصحيحة بممارسات متسقة على اكتساب اليد العليا في الصناعة!

أثناء الانضمام إلى برنامج Bootcamp Full Stack Software Development Bootcamp من upGrad هو طريقة أخرى لتحسين حياتك المهنية في مجال التطوير من خلال المهارات المطلوبة وإرشادات الخبراء.

سجل الآن لتوسيع أفقك!

ما هي التركيبات الأخرى التي يجب إجراؤها باستخدام Bootstrap؟

التثبيتات الأخرى التي تحتاج إلى إجرائها باستخدام Bootstrap هي jQuery و popper.js. يمكنك استخدام npm لنفسه.

ما هو الحذاء المؤجل؟

قدم سلف Angular ، AngularJS ، فكرة التمهيد المؤجل. يشير إلى خيار تأجيل عملية التمهيد التلقائي لتطبيق AngularJS. نظرًا لأن AngularJS يقوم تلقائيًا بإقلاع أحد التطبيقات عند تحميل صفحة HTML ، يتيح التمهيد المؤجل تأجيل العملية يدويًا عند الحاجة.

أي نصائح أخيرة حول التعامل مع Bootstrap بسهولة؟

كما هو شائع في أي إطار عمل ، يمكنك فقط الحصول على صورة واضحة عندما تقرأ الوثائق أثناء اللعب بنفس الشيء لفترة من الوقت. تأكد من مراجعة الوثائق الرسمية لأفضل تنفيذ.