আমি আমার প্রথম কৌণিক অ্যাপ্লিকেশন শুরু করছি এবং আমার বেসিক সেটআপটি সম্পন্ন হয়েছে।
আমি কীভাবে আমার অ্যাপ্লিকেশনটিতে বুটস্ট্র্যাপ যুক্ত করতে পারি?
আপনি যদি একটি উদাহরণ সরবরাহ করতে পারেন তবে এটি একটি দুর্দান্ত সহায়তা হবে।
আমি আমার প্রথম কৌণিক অ্যাপ্লিকেশন শুরু করছি এবং আমার বেসিক সেটআপটি সম্পন্ন হয়েছে।
আমি কীভাবে আমার অ্যাপ্লিকেশনটিতে বুটস্ট্র্যাপ যুক্ত করতে পারি?
আপনি যদি একটি উদাহরণ সরবরাহ করতে পারেন তবে এটি একটি দুর্দান্ত সহায়তা হবে।
উত্তর:
আপনি নতুন প্রকল্প উত্পন্ন করতে কৌণিক-সিএলআই ব্যবহার করে , কৌণিক 2/4 এ বুটস্ট্র্যাপ অ্যাক্সেসযোগ্য করার আরও একটি উপায় আছে ।
$ npm install --save bootstrap
। --save
বিকল্প নির্ভরতা মধ্যে প্রদর্শিত বুটস্ট্র্যাপ করতে হবে।"styles"
অ্যারেতে একটি রেফারেন্স যুক্ত করুন । রেফারেন্সটি এনপিএম সহ ডাউনলোড করা বুটস্ট্র্যাপ ফাইলের আপেক্ষিক পথ হতে হবে। আমার ক্ষেত্রে এটি:"../node_modules/bootstrap/dist/css/bootstrap.min.css",
আমার উদাহরণ .angular-cli.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "bootstrap-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
এখন বুটস্ট্র্যাপ আপনার ডিফল্ট সেটিংসের অংশ হওয়া উচিত।
এনগুলার 2 এর সাথে একটি সংহতকরণ এনজি 2-বুটস্ট্র্যাপ প্রকল্পের মাধ্যমেও পাওয়া যায় : https://github.com/valor-software/ng2-bootstrap ।
এটি ইনস্টল করতে কেবল এই ফাইলগুলিকে আপনার মূল এইচটিএমএল পৃষ্ঠাতে রেখে দিন:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
তারপরে আপনি এটিকে আপনার উপাদানগুলিতে এভাবে ব্যবহার করতে পারেন:
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
আপনাকে যা করতে হবে তা হ'ল আপনার সূচি। Html ফাইলের মধ্যে বুস্ট্র্যাপ সিএসএস অন্তর্ভুক্ত।
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
app.component.html
। অনুগ্রহ করে আমাদেরকে বলুন.
আরেকটি খুব ভাল (আরও ভাল?) বিকল্প হ'ল কৌণিক-ইউআই টিমের তৈরি উইজেটের একটি সেট ব্যবহার করা: https://ng-bootstrap.github.io
আপনি যদি এই থ্রেডে উল্লিখিত কৌণিক-ইউআই টিমের এনজি-বুটস্ট্র্যাপের সাথে প্রয়োজনীয় বুটস্ট্র্যাপ 4 ব্যবহার করার পরিকল্পনা করেন , আপনি পরিবর্তে এটি ব্যবহার করতে চাইবেন (দ্রষ্টব্য: আপনার জেএস ফাইল অন্তর্ভুক্ত করার দরকার নেই):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
আপনি SASS ব্যবহার করছেন তা ধরে নিলে npm install bootstrap@4.0.0-alpha.6 --save
আপনার styles.scss
ফাইলের ফাইলটির দিকে ইশারা করে আপনি স্থানীয়ভাবে এটি উল্লেখ করতে পারেন :
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import
এটি আপনার SASS ফাইলে। যদি তা না হয় তবে আপনি এটি আপনার vendor.ts
ফাইলে যুক্ত করার চেষ্টা করতে পারেন , তবে আমি এটি আমার কোডটিতে ব্যবহার করছি না।
সর্বাধিক জনপ্রিয় বিকল্পটি হল এনজি 2-বুটস্ট্র্যাপ প্রকল্প https://github.com/valor-software/ng2- বুটস্ট্র্যাপ বা কৌণিক UI বুটস্ট্র্যাপ লাইব্রেরির মতো এনপিএম প্যাকেজ হিসাবে বিতরণ করা কিছু তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করা ।
আমি ব্যক্তিগতভাবে এনজি 2-বুটস্ট্র্যাপ ব্যবহার করি। এটি কনফিগার করার বিভিন্ন উপায় রয়েছে কারণ আপনার কৌণিক প্রকল্পটি কীভাবে তৈরি হয় তার উপর কনফিগারেশন নির্ভর করে। আমি কৌনিক 2 কুইকস্টার্ট প্রকল্পের উপর ভিত্তি করে উদাহরণ কনফিগারেশন পোস্ট করি https://github.com/angular/quickstart
প্রথমত আমরা আমাদের প্যাকেজ.জসনে নির্ভরতা যুক্ত করি
{ ...
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
...
"bootstrap": "^3.3.7",
"ng2-bootstrap": "1.1.16-11"
},
... }
তারপরে আমাদের systemjs.config.js এর যথাযথ URL- তে নামগুলি ম্যাপ করতে হবে
(function (global) {
System.config({
...
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
//bootstrap
'moment': 'npm:moment/bundles/moment.umd.js',
'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
...
});
})(this);
আমাদের সূচী। Html এ বুটস্ট্র্যাপ। সিএসএস ফাইল আমদানি করতে হবে। আমরা এটি আমাদের হার্ড ড্রাইভের / node_modules / বুটস্ট্র্যাপ ডিরেক্টরি থেকে (কারণ আমরা বুটস্ট্র্যাপ ৩.৩..7 নির্ভরতা যুক্ত করেছি) বা ওয়েব থেকে পেতে পারি। সেখানে আমরা এটি ওয়েব থেকে পেয়েছি:
<!DOCTYPE html>
<html>
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
আমাদের / অ্যাপ ডিরেক্টরি থেকে আমাদের app.module.ts ফাইলটি সম্পাদনা করা উচিত
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
//bootstrap alert import part 2
imports: [ BrowserModule, AlertModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
এবং পরিশেষে / অ্যাপ ডিরেক্টরি থেকে আমাদের app.componal.ts ফাইল
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}
তারপরে আমাদের অ্যাপ্লিকেশন চালানোর আগে আমাদের আমাদের বুটস্ট্র্যাপ এবং এনজি 2-বুটস্ট্র্যাপ নির্ভরতা ইনস্টল করতে হবে। আমাদের প্রকল্প ডিরেক্টরিতে গিয়ে টাইপ করা উচিত
npm install
শেষ পর্যন্ত আমরা আমাদের অ্যাপ্লিকেশনটি শুরু করতে পারি
npm start
এনজি 2-বুটস্ট্র্যাপ প্রকল্প গিথুবে অনেকগুলি কোড স্যাম্পল রয়েছে যা দেখায় যে কীভাবে বিভিন্ন কৌণিক 2 প্রকল্প বিল্ডগুলিতে এনজি 2-বুটস্ট্র্যাপ আমদানি করতে হয়। এমনকি plnkr নমুনা আছে। ভালোর-সফ্টওয়্যার (লাইব্রেরির লেখক) ওয়েবসাইটেও এপিআই ডকুমেন্টেশন রয়েছে।
কৌণিক-আবহাওয়ার পরিবেশে, আমি খুঁজে পেয়েছি সবচেয়ে সোজা উপায় নীচে:
1. সেক্সি স্টাইলশীট সহ পরিবেশে সমাধান
npm install bootstrap-sass —save
স্টাইল.এসএসএসে:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
নোট 1: ~
অক্ষরটি নোড_মডিউলগুলির ফোল্ডারের একটি উল্লেখ ।
নোট 2: যেহেতু আমরা স্ক্যাস ব্যবহার করছি, আমরা আমাদের চাই সমস্ত বুস্ট্র্যাপ ভেরিয়েবল কাস্টমাইজ করতে পারি।
2. সিএসসি স্টাইলশিট সহ পরিবেশে সমাধান
npm install bootstrap —save
স্টাইল। সিএসএসে:
@import '~bootstrap/dist/css/bootstrap.css';
বুটস্ট্র্যাপের সাথে কৌণিক 2 কনফিগার করার বিভিন্ন উপায় রয়েছে, এর বেশিরভাগ সর্বাধিক পাওয়ার একটি উপায় হ'ল এনজি-বুটস্ট্র্যাপ ব্যবহার করা, এই কনফিগারেশনটি ব্যবহার করে আমরা আমাদের ডিওএমের উপর অ্যালগুলার 2 এর সম্পূর্ণ নিয়ন্ত্রণ প্রদান করি, জিকিউরি এবং বুস্ট্র্যাপ ব্যবহারের প্রয়োজনীয়তা এড়িয়ে চলে .js।
1-একটি সূচনা পয়েন্ট হিসাবে ধরুন একটি নতুন প্রকল্প অ্যাংুলার-সিএলআই দিয়ে তৈরি করা হয়েছে এবং কমান্ড লাইনটি ব্যবহার করে এনজি-বুটস্ট্র্যাপ ইনস্টল করুন:
npm install @ng-bootstrap/ng-bootstrap --save
দ্রষ্টব্য: https://ng-bootstrap.github.io/#/getting-st সূত্রে আরও তথ্য
2-তারপরে আমাদের সিএসএস এবং গ্রিড সিস্টেমের জন্য বুটস্ট্র্যাপ ইনস্টল করতে হবে।
npm install bootstrap@4.0.0-beta.2 --save
দ্রষ্টব্য: https://getbootstrap.com/docs/4.0/getting-st সূত্র / ডাউনলোড/ এ আরও তথ্য
এখন আমাদের পরিবেশ সেটআপ হয়েছে এবং তার জন্য আমাদের .angular-cli.json পরিবর্তন করতে হবে শৈলীতে:
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
এখানে একটি উদাহরণ:
"apps": [
{
"root": "src",
...
],
"index": "index.html",
...
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
পরবর্তী পদক্ষেপটি হ'ল আমাদের প্রকল্পে এনজি-বুস্ট্রেপ মডিউল যুক্ত করা, এটি করার জন্য আমাদের অ্যাপ.মডিউল.টস যোগ করতে হবে:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
তারপরে অ্যাপ্লিকেশন অ্যাপ্লিকেশনটিতে নতুন মডিউল যুক্ত করুন: এনগিবডমডিউল.ফরুট ()
উদাহরণ:
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
এখন আমরা আমাদের কৌনিক 2/5 প্রকল্পে বুটস্ট্র্যাপ 4 ব্যবহার শুরু করতে পারি।
আমার একই প্রশ্ন ছিল এবং এই নিবন্ধটি সত্যিই পরিষ্কার সমাধান সহ পেয়েছি:
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
এখানে নির্দেশাবলী, কিন্তু আমার সরলিকৃত সমাধান সহ:
বুটস্ট্র্যাপ 4 ইনস্টল করুন ( নির্দেশাবলী ):
npm install --save bootstrap@4.0.0-alpha.6
যদি প্রয়োজন হয় তবে আপনার এসসিআর / স্টাইলস সিএসএসের নাম পরিবর্তন করে স্টাইলসএসএসএস করুন এবং পরিবর্তনটি প্রতিবিম্বিত করতে .angular-cli.json আপডেট করুন :
"styles": [
"styles.scss"
],
তারপরে এই লাইনটি স্টাইলস.এসএসএসে যুক্ত করুন :
@import '~bootstrap/scss/bootstrap';
কেবলমাত্র আপনার প্যাকেজ.জসন ফাইল পরীক্ষা করুন এবং বুটস্ট্র্যাপের জন্য নির্ভরতা যুক্ত করুন
"dependencies": {
"bootstrap": "^3.3.7",
}
তারপরে .angular-cli.json
ফাইলের নীচে কোড যুক্ত করুন
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
শেষ অবধি আপনি টার্মিনাল ব্যবহার করে স্থানীয়ভাবে আপনার এনপিএম আপডেট করুন
$ npm update
-> কৌণিক-ক্লিপ.জসন ফাইলটিতে যান, শৈলীর বৈশিষ্ট্য সন্ধান করুন এবং কেবল পরবর্তী স্টিং যুক্ত করুন: "../node_modules/bootstrap/dist/css/bootstrap.min.css", এটি দেখতে এর মতো দেখাবে:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
কৌণিক 6+ এবং বুটস্ট্র্যাপ 4+ সহ পদ্ধতি:
npm install --save bootstrap@4.1.3
npm install --save jquery 1.9.1
npm audit fix
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
অথবা
এই লাইনটি আপনার মূল সূচক html ফাইলে যুক্ত করুন: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
আমি একই উত্তর খুঁজছিলাম এবং অবশেষে আমি এই লিঙ্কটি খুঁজে পেয়েছি। আপনার কৌণিক 2 প্রকল্পে বুটস্ট্র্যাপ সিএসএস যুক্ত করার জন্য আপনি তিনটি ভিন্ন উপায় ব্যাখ্যা করতে পারেন find এটা আমাকে সাহায্য করেছে।
এখানে লিঙ্কটি দেওয়া হয়েছে: http://codingthesmartway.com/used-bootstrap-with-angular/
আমার সুপারিশটি এটি জেসন স্টাইলাসে ঘোষণার পরিবর্তে এটি স্ক্যাসে রাখার জন্য হবে যাতে সবকিছু সংকলিত হয় এবং এক জায়গায় থাকে।
1) এনপিএম সহ বুটস্ট্র্যাপ ইনস্টল করুন
npm install bootstrap
2) আমাদের স্টাইলগুলির সাথে সিএসএসে বুটস্ট্র্যাপ এনপিএম ঘোষণা করুন
তৈরি করুন _bootstrap-custom.scss
:
// Required
@import "bootstrap-custom-required";
// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
...
..
.
3) স্টাইলস.এসএসএস এর মধ্যে আমরা সন্নিবেশ করান
@import "bootstrap-custom";
সুতরাং আমরা আমাদের সমস্ত কোর সংকলন এবং এক জায়গায় থাকবে
আপনি Prettyfox UI 'তে লাইব্রেরি ব্যবহার করার চেষ্টা করতে পারেন http://ng.prettyfox.org
এই লাইব্রেরিতে বুটস্ট্র্যাপ 4 টি স্টাইল ব্যবহার করা হয়েছে এবং জ্যাকুয়ের দরকার নেই।
আপনি যদি কৌণিক ক্লিপ ব্যবহার করেন, প্যাকেজ.জসনে বুটস্ট্র্যাপ যুক্ত করার পরে এবং প্যাকেজটি ইনস্টল করার পরে, আপনার কেবলমাত্র বুস্ট্র্যাপ.মিন.এসএসএসকে .angular-cli.json এর "স্টাইল" বিভাগে যুক্ত করতে হবে।
একটি গুরুত্বপূর্ণ বিষয় হ'ল "আপনি যখন .angular-cli.json এ পরিবর্তন করেন আপনি কনফিগারেশন পরিবর্তনগুলি গ্রহণ করতে এনজি সার্ভিসটি পুনরায় শুরু করতে হবে" "
সূত্র:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
আরেকটি খুব ভাল বিকল্প হ'ল কঙ্কাল কৌণিক 2/4 + বুটস্ট্র্যাপ 4 ব্যবহার করা
1) জিপ ডাউনলোড এবং জিপ ফোল্ডার
2) এনজি পরিবেশন