নীচের বিশদ পদক্ষেপ এবং কার্যকারী উদাহরণের জন্য, আপনি https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ দেখতে পারেন
যথাযথ ব্যাখ্যা সহ খুব বিশদ পদক্ষেপ।
পদক্ষেপ:
এনপিএম থেকে বুটস্ট্র্যাপ ইনস্টল করা
এর পরে, আমাদের বুটস্ট্র্যাপ ইনস্টল করতে হবে। আমরা তৈরি প্রকল্পে ডিরেক্টরিটি পরিবর্তন করুন (সিডি কৌণিক-বুটস্ট্র্যাপ-উদাহরণ) এবং নিম্নলিখিত কমান্ডটি কার্যকর করুন:
বুটস্ট্র্যাপ 3 এর জন্য:
npm install bootstrap --save
বুটস্ট্র্যাপ 4 এর জন্য (বর্তমানে বিটাতে):
npm install bootstrap@next --save
বা
বিকল্প: স্থানীয় বুটস্ট্র্যাপ সিএসএস
বিকল্প হিসাবে, আপনি বুটস্ট্র্যাপ সিএসএস ডাউনলোড করতে এবং এটিকে স্থানীয়ভাবে আপনার প্রকল্পে যুক্ত করতে পারেন। আমি ওয়েবসাইট থেকে বুটস্ট্র্যাপটি ডোন্ডলোড করেছি এবং একটি ফোল্ডার শৈলী তৈরি করেছি (স্টাইলস সিএসএসের সমান স্তর):
দ্রষ্টব্য:
আপনার স্থানীয় সিএসএস ফাইলগুলি সম্পদ ফোল্ডারের নিচে রাখবেন না। যখন আমরা কৌণিক সিএলআই দিয়ে প্রযোজনা তৈরি করি, তখন .angular-cli.json এ ঘোষিত সিএসএস ফাইলগুলি মিনিমাইজ করা হবে এবং সমস্ত শৈলী একক স্টাইলস সিএসএসে বান্ডিল হবে। বিল্ড প্রক্রিয়া চলাকালীন সম্পদ ফোল্ডারটি ডিস্ট ফোল্ডারে অনুলিপি করা হয় (সিএসএস কোডটি নকল হবে)। কেবলমাত্র আপনার স্থানীয় সিএসএস ফাইলগুলিকে সম্পদের অধীনে রাখুন যদি আপনি সেগুলি সরাসরি সূচক। Html এ আমদানি করেন।
সিএসএস আমদানি করা
1. আমাদের কাছে এনপিএম থেকে ইনস্টল হওয়া বুটস্ট্র্যাপ থেকে সিএসএস আমদানির দুটি বিকল্প রয়েছে:
শক্ত পাঠ 1: .angular-cli.json কনফিগার করুন:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: এসসিআর / স্টাইল.কম বা এসসিআর / স্টাইল.এসএসএসে সরাসরি আমদানি করুন:
@import '~bootstrap/dist/css/bootstrap.min.css';
আমি ব্যক্তিগতভাবে আমার সমস্ত শৈলীগুলি এসআরসি / স্টাইল সিএসএসে আমদানি করতে পছন্দ করি কারণ এটি ইতিমধ্যে .angular-cli.json এ ঘোষিত হয়েছে।
৩.১ বিকল্প: স্থানীয় বুটস্ট্র্যাপ সিএসএস
আপনি যদি স্থানীয়ভাবে বুটস্ট্র্যাপ সিএসএস ফাইল যুক্ত করেন তবে কেবল এটি .angular-cli.json এ আমদানি করুন
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
অথবা
src / style.css .c
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: এনজিএক্স-বুটস্ট্র্যাপ সহ বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট উপাদান (বিকল্প 1)
আপনার যদি বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট উপাদানগুলি ব্যবহার করার প্রয়োজন না হয় প্রয়োজন হয়), এটি আপনার প্রয়োজন সমস্ত সেটআপ। তবে আপনার যদি মডেলগুলি, অ্যাকর্ডিয়ন, ডেটপিকার, টুলটিপস বা অন্য কোনও উপাদান ব্যবহার করতে হয় তবে আমরা কীভাবে jQuery ইনস্টল না করে এই উপাদানগুলি ব্যবহার করতে পারি?
এনজিএক্স-বুটস্ট্র্যাপ নামে বুটস্ট্র্যাপের জন্য একটি কৌণিক র্যাপার লাইব্রেরি রয়েছে যা আমরা এনপিএম থেকেও ইনস্টল করতে পারি:
npm install ngx-bootstrap --save
বিঃদ্রঃ এনজি 2-বুটস্ট্র্যাপ এবং এনজিএক্স-বুটস্ট্র্যাপ একই প্যাকেজ। #itsJustAngular এর পরে এনজি 2-বুটস্ট্র্যাপের নাম পরিবর্তন করে এনজিএক্স-বুটস্ট্র্যাপ করা হয়েছে।
আপনি যখন নিজের কৌণিক সিএলআই প্রকল্পটি তৈরি করবেন তখন আপনি একই সময়ে বুটস্ট্র্যাপ এবং এনজিএক্স-বুটস্ট্র্যাপ ইনস্টল করতে চান:
npm install bootstrap ngx-bootstrap --save
৪.১: app.module.ts এ প্রয়োজনীয় বুটস্ট্র্যাপ মডিউল যুক্ত করা হচ্ছে
এনজিএক্স-বুটস্ট্র্যাপের মাধ্যমে যান এবং আপনার app.module.ts এ প্রয়োজনীয় মডিউল যুক্ত করুন। উদাহরণস্বরূপ, ধরুন আমরা ড্রপডাউন, টুলটিপ এবং মডেল উপাদানগুলি ব্যবহার করতে চাই:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
যেহেতু আমরা প্রতিটি মডিউলটির জন্য .forRoot () পদ্ধতিটি কল করি (এনজিএক্স-বুটস্ট্র্যাপ মডিউল সরবরাহকারীদের কারণে), কার্যকারিতা আপনার প্রকল্পের সমস্ত উপাদান এবং মডিউলগুলিতে (বৈশ্বিক সুযোগ) পাওয়া যাবে available
বিকল্প হিসাবে, আপনি যদি অন্য কোনও মডিউলে এনজিএক্স-বুটস্ট্র্যাপটি সংগঠিত করতে চান (শুধুমাত্র সংস্থার উদ্দেশ্যে যদি আপনাকে অনেক বিএস মডিউল আমদানি করতে হয় এবং আপনার অ্যাপ্লিকেশনকে মডেল করতে চান না) তবে আপনি একটি মডিউল তৈরি করতে পারেন app-bootstrap.module.ts, বুটস্ট্র্যাপ মডিউলগুলি আমদানি করুন (forRoot () ব্যবহার করে) এবং এগুলি এক্সপোর্ট বিভাগে ঘোষণা করুন (যাতে তারা অন্যান্য মডিউলগুলিতেও উপলব্ধ হয়ে ওঠে)।
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
শেষ অবধি, আপনার app.module.ts এ আপনার বুটস্ট্র্যাপ মডিউলটি আমদানি করতে ভুলবেন না।
'./app-bootstrap/app-bootstrap.module' থেকে import AppBootstrapModule import আমদানি করুন;
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
এনজিএক্স-বুটস্ট্র্যাপ বুটস্ট্র্যাপ 3 এবং 4 এর সাথে কাজ করে এবং আমি কয়েকটি পরীক্ষাও করেছি এবং বেশিরভাগ কার্যকারিতা বুটস্ট্র্যাপ ২.x এর সাথেও কাজ করে (হ্যাঁ, এখনও আমার কিছু উত্তরাধিকার রক্ষণাবেক্ষণের জন্য রয়েছে)।
আশা করি এই সাহায্য কারও!
