नीचे दिए गए विस्तृत चरणों और काम करने के उदाहरण के लिए, आप 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
या
वैकल्पिक: स्थानीय बूटस्ट्रैप सीएसएस
एक विकल्प के रूप में, आप बूटस्ट्रैप सीएसएस को भी डाउनलोड कर सकते हैं और इसे स्थानीय रूप से अपनी परियोजना में जोड़ सकते हैं। मैंने वेबसाइट से बूटस्ट्रैप को दान कर दिया और एक फ़ोल्डर शैलियों (शैलियों के समान स्तर) का निर्माण किया।
नोट:
अपनी स्थानीय CSS फाइलों को संपत्ति फ़ोल्डर में न रखें। जब हम उत्पादन का निर्माण कोणीय सीएलआई के साथ करते हैं, तो .angular-cli.json में घोषित CSS फाइलों को छोटा किया जाएगा और सभी शैलियों को एक ही शैलियों में बांटा जाएगा। संपत्ति फ़ोल्डर को निर्माण प्रक्रिया के दौरान डिस्ट फ़ोल्डर में कॉपी किया जाता है (सीएसएस कोड डुप्लिकेट किया जाएगा)। यदि आप उन्हें सीधे index.html में आयात कर रहे हैं, तो संपत्ति के अंतर्गत अपनी स्थानीय CSS फाइलें रखें।
CSS 1
को आयात करना। हमारे पास CSS को बूटस्ट्रैप से आयात करने के लिए दो विकल्प हैं जो NPM से स्थापित किया गया था:
मजबूत पाठ 1: कॉन्फ़िगर करें। आयताकार-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: सीधे src / style.css या src / style.scss में आयात करें:
@import '~bootstrap/dist/css/bootstrap.min.css';
मैं व्यक्तिगत रूप से अपनी सभी शैलियों को src / style.css में आयात करना पसंद करता हूं क्योंकि यह पहले ही घोषित किया जा चुका है।
3.1 वैकल्पिक: स्थानीय बूटस्ट्रैप सीएसएस
यदि आपने बूटस्ट्रैप सीएसएस फ़ाइल को स्थानीय रूप से जोड़ा है, तो इसे .angular-cli.son में आयात करें।
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
या
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: एनएक्सएक्स-बूटस्ट्रैप के साथ बूटस्ट्रैप जावास्क्रिप्ट घटक (विकल्प 1)
के मामले में आपको बूटस्ट्रैप जावास्क्रिप्ट घटकों (जिसे JQuery की आवश्यकता होती है) का उपयोग करने की आवश्यकता नहीं है, यह वह सभी सेटअप है जिसकी आपको आवश्यकता है। लेकिन अगर आपको मॉडल्स, अकॉर्डियन, डेटपिकर, टूलटिप्स या किसी अन्य घटक का उपयोग करने की आवश्यकता है, तो हम इन घटकों को jQuery स्थापित किए बिना कैसे उपयोग कर सकते हैं?
बूटस्ट्रैप के लिए एक कोणीय आवरण पुस्तकालय है जिसे एनएक्सएक्स-बूटस्ट्रैप कहा जाता है जिसे हम एनपीएम से भी स्थापित कर सकते हैं:
npm install ngx-bootstrap --save
ध्यान दें एनजी 2-बूटस्ट्रैप और एनजीएक्स-बूटस्ट्रैप एक ही पैकेज हैं। ngits-bootstrap को #itsJustAngular के बाद ngx-बूटस्ट्रैप का नाम दिया गया था।
यदि आप अपने कोणीय CLI प्रोजेक्ट बनाते समय बूटस्ट्रैप और एनजीएक्स-बूटस्ट्रैप को उसी समय स्थापित करना चाहते हैं:
npm install bootstrap ngx-bootstrap --save
4.1: 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 () विधि (ngx-बूटस्ट्रैप मॉड्यूल प्रदाताओं के कारण) को कॉल करते हैं, आपके प्रोजेक्ट (वैश्विक गुंजाइश) के सभी घटकों और मॉड्यूल में फ़ंक्शंस उपलब्ध होंगे।
एक विकल्प के रूप में, यदि आप एनजीएक्स-बूटस्ट्रैप को एक अलग मॉड्यूल में व्यवस्थित करना चाहते हैं (सिर्फ संगठन के प्रयोजनों के लिए यदि आपको कई बीएस मॉड्यूल आयात करने की आवश्यकता है और अपने app.module को अव्यवस्थित नहीं करना चाहते हैं), तो आप एक मॉड्यूल बना सकते हैं 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 में आयात करना न भूलें।
आयात {AppBootstrapModule} './app-bootstrap/app-bootstrap.module' से;
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-बूटस्ट्रैप बूटस्ट्रैप 3 और 4 के साथ काम करता है। और मैंने कुछ परीक्षण भी किए हैं और अधिकांश फ़ंक्शंस बूटस्ट्रैप 2.x के साथ भी काम करते हैं (हां, मेरे पास अभी भी कुछ विरासत कोड बनाए रखने के लिए है)।
आशा है कि यह किसी की मदद करो!
