افزودن بوت استرپ (Bootstrap) به انگولار

بنده دوره انگولار شما رو خریداری کردم و بابت نحوه آموزشتون و فن بیان بسیار عالیتون بسیار راضی هستم. ولی الان به یک مشکل بر خوردم و آن هم درباره کلاس های بوت استرپ (Bootstrap) در انگولار است. با اینکه من بوت استرپ رو به برنامه خودم اضافه کردم ولی هنوز کلاس های مانند card , margin-top و ... رو نمیشناسه باید چیکار کنم؟

از اینکه همراه شما هستیم بسیار خوشحالیم. برای افزودن بوت استرپ (Bootstrap) به انگولار دو راه حل کلی وجود دارد که در ادامه توضیح می دهم:

روش اول) سایت اصلی بوت استرپ و انگولار

در این روش ابتدا دستور زیر را برای نصب بوت استرپ در cmd وارد می کنید:

npm install bootstrap@next

سپس فایل angular.json را در روت پروژه باز کرده و آدرس دهی زیر را برای script جاوا اسکریپت بوت استرپ انجام می دهید:

"scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
 ],

حال باید فایل های CSS را مجددا به فایل angular.json بیافزایید:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],

پس از انجام اینکار مجددا دستور ng serve را اجرا نمایید. توجه داشته باشید که اگر دستور ng serve را نزنید تغییرات فوق اعمال نمی شود.

روش دوم) استفاده از پکیج ng-bootstrap

یکی از بهترین پکیج های انگولاری، پکیج ng-bootstrap می باشد. در این پکیج شما به اکثر امکانات فریم ورک بوت استرپ در قالب انگولار دسترسی خواهید داشت. روش استفاده از آن به صورت زیر است:

ابتدا باید دستور زیر را در cmd و angular cli نصب کنید که پکیج نصب شود (به مسیر روت پروژه انگولاری رفته و سپس دستور را وارد کنید):

ng add @ng-bootstrap/ng-bootstrap

در مرحله بعد باید متناسب با امکاناتی که استفاده می کنید ماژول های آن را در فایل ماژول اصلی انگولار import کنید. (برای اینکار به مستندات وب سایت ng-bootstrap مراجعه کنید)