Ahmed Yehia2 نشر 20 ديسمبر 2021 أرسل تقرير مشاركة نشر 20 ديسمبر 2021 كيف يمكن تثبيت وإعداد بوتستراب في تطبيق React؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 20 ديسمبر 2021 أرسل تقرير مشاركة نشر 20 ديسمبر 2021 بالطبع يمكنك ذلك، ويتم تثبيته وإعداده بخطوات بسيطة. في الحقيقة، يوجد ثلاث طرق لعمل ذلك نلخصها في التالي: التثبيت والإستعمال عن طريق CDN خارجي. تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm. إستعمال واحدة من حزم React Bootstrap. الطريقة الأولى: التثبيت والإستعمال عن طريق CDN خارجي ولعلها أسهل طريقة، أين يمكن مباشرة تضمين ملفات التنسيقات والجافاسكربت وإرفاقها بروابط صالحة، فملفات التنسيقات تضمن في وسم head كالتالي: <link rel="stylesheet" href="[BOOTSTRAP_CSS_HERE]"> ويتم تضمين ملفات الجافاسكربت لها كالتالي: <!-- تضمين ملف جيكويري --> <script src="[JQUERY_CDN_LINK_HERE]"></script> <!-- popper تضمين ملف --> <script src="[POPPERJS_CDN_LINK_HERE]"></script> <!-- bootstrap تضمين ملف --> <script src="[BOOTSTRAP_JS_HERE]"></script> الطريقة الثانية: تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm أين ستحتاج في هذا تثبيت حزمة bootstrap عن طريق مدير الحزم npm كالتالي: npm install bootstrap ثم تضمين ملفات تنسيقات بوتستراب وأيضا jQuery و popper في ملف index.js كالتالي: import 'bootstrap/dist/css/bootstrap.min.css'; import $ from 'jquery'; import Popper from 'popper.js'; import 'bootstrap/dist/js/bootstrap.bundle.min'; import React from 'react'; ان لم تكن قد قمت بتثبيت jquery و popper فتأكد من ذلك أولا عن طريق طباعة الأمر: npm install jquery popper.js لأن بوتستراب يستعمل كلا منهما. الطريقة الثالثة: إستعمال واحدة من حزم React Bootstrap لعل الأكثر شيوعا من بين هاته الحزم هي حزمة react-bootstrap، يتم تثبيتها عن طريق طباعة الأمر: npm install react-bootstrap bootstrap@5.1.3 ثم بتضمين المكون المستهدف لإستعماله: import { Button } from 'react-bootstrap'; الإستعمال: <Button variant="primary">زر بوتستراب</Button> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Ahmed Yehia2
كيف يمكن تثبيت وإعداد بوتستراب في تطبيق React؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.