একটি কৌণিক-ক্লাইপ প্রকল্পে কীভাবে বুটস্ট্র্যাপ যুক্ত করা যায়

Question

কৌণিক-ক্লিপ 1.0.0-বিটা.5 (ডাব্লু / নোড ভি 6.1.0) দিয়ে তৈরি আমাদের অ্যাপে আমরা বুটস্ট্র্যাপ 4 (4.0.0-alpha.2) ব্যবহার করতে চাই।

এনপিএমের সাথে বুটস্ট্র্যাপ এবং এর নির্ভরতা পাওয়ার পরে, আমাদের প্রথম পদ্ধতির মধ্যে এগুলি যুক্ত করে angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

এবং আমাদের এগুলি আমদানি করুন index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

এটি এর সাথে দুর্দান্ত কাজ করেছে ng serveতবে আমরা -prodপতাকা সহ একটি বিল্ড তৈরি করার সাথে সাথে এই সমস্ত নির্ভরতা dist/vendor(আশ্চর্য!) অদৃশ্য হয়ে গেল ।

আমরা কীভাবে কৌণিক-ক্লাইমে উত্পন্ন কোনও প্রকল্পে এই জাতীয় দৃশ্য (যেমন বুটস্ট্র্যাপ স্ক্রিপ্টগুলি লোড করা) পরিচালনা করব?

আমাদের নিম্নলিখিত চিন্তাভাবনাগুলি ছিল তবে কোন উপায়টি যেতে হবে তা আমরা সত্যই জানি না ...

• সিডিএন ব্যবহার করবেন? তবে আমরা এই ফাইলগুলি উপলভ্য হবে তা গ্যারান্টি হিসাবে পরিবেশন করব

• dist/vendorআমাদের পরে অনুলিপি কপি ng build -prod? তবে এটি মনে হয় যে কৌণিক-ক্লিপটি এমন কিছু সরবরাহ করতে হবে যেহেতু এটি বিল্ড অংশটির 'যত্ন নেয়'?

• jquery, বুটস্ট্র্যাপ এবং টিথার যুক্ত করে src/system-config.tsএবং কোনওভাবে এগুলিকে আমাদের বান্ডিলটিতে টানুন main.ts? তবে এটি ভুল বলে মনে হয়েছিল যে আমরা এগুলি আমাদের অ্যাপ্লিকেশনের কোডগুলিতে স্পষ্টভাবে ব্যবহার করব না (উদাহরণস্বরূপ moment.js বা লোডাসের মতো কিছু)।

Comments

আপনার কি সেগুলি আপনার সিস্টেম-কনফিগারেশন ফাইলগুলিতে রয়েছে? আপনি তাদের মানচিত্র আছে।

— mjwrazor

নীচের উত্তরগুলির মধ্যে অনেকগুলি এনজিএক্স-বুটস্ট্র্যাপ ব্যবহারের পরামর্শ দেয়। আমি দেখতে পেয়েছি যে এটি বুটস্ট্র্যাপের জ্যাকুরি প্লাগইনগুলির জন্য সম্পূর্ণ প্রতিস্থাপন নয় এবং কখনও কখনও আপনাকে এখনও সেই "নেটিভ" জ্যাকুরি প্লাগইনগুলি ব্যবহার করতে হবে, যেমন টেবিলগুলিতে পতনের কার্যকারিতা। সেক্ষেত্রে নীচের উত্তরগুলির মধ্যে একটি সন্ধান করুন যা ব্যাখ্যা করে কীভাবে স্পষ্টভাবে .angular-cli.json ফাইল থেকে jquery স্ক্রিপ্ট আমদানি করতে হয়।

— ক্রিস্টফ

stackoverflow.com/questions/43557321/…

— মোহাম্মদ ফয়সাল

কেবল এনজি-বুটস্ট্র্যাপ ng-bootstrap.github.io/#/home

— লিয়াম

Answer 1

গুরুত্বপূর্ণ আপডেট: এনজি 2-বুটস্ট্র্যাপ এখন এনজিএক্স-বুটস্ট্র্যাপ দ্বারা প্রতিস্থাপিত হয়েছে

এনজিএক্স-বুটস্ট্র্যাপ উভয়ই কৌনিক 3 এবং 4 সমর্থন করে।

আপডেট: 1.0.0-beta.11-ওয়েবপ্যাক বা উপরের সংস্করণগুলি

টার্মিনালে নিম্নলিখিত কমান্ডটি দিয়ে প্রথমে আপনার কৌণিক-ক্লাইব সংস্করণটি পরীক্ষা করুন :

ng -v

যদি আপনার কৌণিক- ক্লিপ সংস্করণটি 1.0.0-beta.11-ওয়েবপ্যাকের চেয়ে বেশি হয় , তবে আপনার এই পদক্ষেপগুলি অনুসরণ করা উচিত:

1. এনজিএক্স-বুটস্ট্র্যাপ এবং বুটস্ট্র্যাপ ইনস্টল করুন :

   npm install ngx-bootstrap bootstrap --save

এই লাইনটি আজকাল বুটস্ট্র্যাপ 3 ইনস্টল করে তবে ভবিষ্যতে বুটস্ট্র্যাপ 4 ইনস্টল করতে পারে। মনে রাখবেন এনজিএক্স-বুটস্ট্র্যাপ উভয় সংস্করণ সমর্থন করে।

2. Src / app / app.module.ts খুলুন এবং যুক্ত করুন:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })
   

3. কৌণিক- Cli.json খুলুন ( কৌণিক 6 এবং পরে ফাইলের নামটি কৌনিক.জসনে পরিবর্তিত হয়েছে ) এবং stylesঅ্যারেতে একটি নতুন প্রবেশ প্রবেশ করান :

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

4. Src / app / app.componal.html খুলুন এবং যুক্ত করুন:

   <alert type="success">hello</alert>

1.0.0-beta.10 বা নীচের সংস্করণগুলি:

এবং, যদি আপনার কৌণিক- ক্লিপ সংস্করণটি 1.0.0-beta.10 বা নীচে হয় তবে আপনি নীচের পদক্ষেপগুলি ব্যবহার করতে পারেন।

প্রথমে প্রকল্প ডিরেক্টরিতে যান এবং টাইপ করুন:

npm install ngx-bootstrap --save

তারপরে, আপনার কৌণিক-ক্লিপ-বিল্ড.জেগুলি খুলুন এবং এই লাইনটি যুক্ত করুন:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

এখন, আপনার src / system-config.ts খুলুন এবং তারপর লিখুন:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...এবং:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Comments

ঠিক এনজি 2-বুটস্ট্র্যাপ কী। কৌণিক 2 এ দেশীয় বুটস্ট্র্যাপ যুক্ত করার অর্থ কী? দুঃখিত আমি বিভ্রান্ত হয়েছি এবং এটি সন্ধান করেছি তবে এখনও আমি বিভ্রান্ত। আমি তৃতীয় পক্ষের এনজি 2-বুটস্ট্র্যাপ ব্যবহার না করে বুটস্ট্র্যাপ ডাউনলোড করতে এই একই পদক্ষেপগুলি নিতে পারি না কেন।

— mjwrazor

@ এমজেউরাজর এটি কারণ বুটস্ট্র্যাপ কেবল স্টাইলই নয়। এটি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। এনজি 2-বুটস্ট্র্যাপের সাথে রেটিং উপাদানটি ব্যবহার করে স্পষ্ট চেক আউট করতে এবং কোডগুলি প্রয়োগ করার জন্য আপনি কী লিখবেন সে সম্পর্কে চিন্তাভাবনা করুন।

— আলী ঘানাভাটিয়ান

ভবিষ্যতের পাঠকদের জন্য কেবল একটি ছোট্ট বিজ্ঞপ্তি: কৌণিক সিএলআই বিটা .১৪ সহ সিস্টেমজেএস থেকে ওয়েবপ্যাকে স্যুইচ করেছে। এই উত্তরটি এখন পুরানো, কারণ এটি সিস্টেমজেএস ভিত্তিক একটি সমাধান সরবরাহ করে provides

— jbandi

এনজি 2-বুটস্ট্র্যাপ ব্যবহার করার ধারণার জন্য ধন্যবাদ, আমি এখানে গিথুব পৃষ্ঠায় কৌণিক ক্লাইয়ের জন্য একটি ইনস্টলেশন ম্যানুয়াল পেয়েছি। github.com/valor-software/ng2-bootstrap/blob/de વિકાસment/docs/… আমার ক্ষেত্রে আমদানিতে সতর্কতা মডেল.ফরট () কল অনুপস্থিত ছিল।

— bruno.bologna

আমার সাথে একই সমস্যা ছিল angular-cli@1.1.3& ngx-bootstrap@1.7.1। এ পার্থক্য সঙ্গে এই পদক্ষেপগুলি অনুসরণ app.module.tsউল্লেখ না ngx-বুটস্ট্র্যাপ এ 'ngx-বুটস্ট্র্যাপ / ngx-বুটস্ট্র্যাপ' দ্বারা কিন্তু এই উদাহরণ হিসাবে 'ngx-বুটস্ট্র্যাপ' দ্বারা GitHub আমার সমস্যা ফিক্স।

— এডমন্ড

Answer 2

Https://github.com/angular/angular-cli- তে গ্লোবাল লাইব্রেরি ইনস্টলেশন সম্পর্কিত মূল শব্দটির সন্ধান করা উত্তর খুঁজে পেতে আপনাকে সহায়তা করে।

তাদের দস্তাবেজ অনুসারে, আপনি বুটস্ট্র্যাপ লাইব্রেরি যুক্ত করতে নিম্নলিখিত পদক্ষেপ নিতে পারেন।

প্রথমে এনপিএম থেকে বুটস্ট্র্যাপ ইনস্টল করুন:

npm install bootstrap@next

তারপরে অ্যাপ্লিকেশনগুলিতে প্রয়োজনীয় স্ক্রিপ্ট ফাইলগুলি [0]। কৌণিক-ক্লিপ.জসন ফাইলের স্ক্রিপ্টগুলিতে যুক্ত করুন:

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

অবশেষে অ্যাপ্লিকেশনগুলিতে বুটস্ট্র্যাপ সিএসএস যুক্ত করুন [0]। স্টাইলস অ্যারে:

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

আপনি যদি এটি চালনা করেন তবে পুনরায় চালু করুন, এবং বুটস্ট্র্যাপ 4 আপনার অ্যাপে কাজ করা উচিত।

এটি সেরা সমাধান। তবে আপনি এনজিটি পুনরায় চালু না করলে এটি কখনই কাজ করে না। এই শেষ ক্রিয়াটি করার জন্য দৃ strongly়ভাবে সুপারিশ করা হয়।

Comments

আমি টাইপ করার সাথে সাথে এটিই একমাত্র সমাধান যা কৌণিক-ক্লাইমের সর্বশেষতম সংস্করণটি ব্যবহার করে বলে মনে হয়।

— ফ্রিতেহিজ

বুটস্ট্র্যাপ.জেএস অবশ্যই প্রয়োজন নেই! যেহেতু আপনি এর জন্য জুকারি বুটস্ট্র্যাপ.জেএস ব্যবহার করতে চান না, আপনাকে অবশ্যই বুটস্ট্র্যাপের এনজি 2 নির্দেশিকা ইনস্টল করতে হবে।

— পাস্কাল

আপনি যদি কেবলমাত্র CSS এর বিপরীতে বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট ব্যবহার করতে চান না তবে আপনাকে এর নির্ভরতাগুলি স্ক্রিপ্ট অ্যারেতে অন্তর্ভুক্ত করতে হবে: "../node_modules/jquery/dist/jquery.slim.js", "../ নোড_মডিউলস / টিথার / ডিএস / জেএস / টিথার.জেএস "," .. "নন / মডুলস / বুটস্ট্র্যাপ / ডিস্ট / জেএস / বুটস্ট্র্যাপ.জেএস"

— হাওয়ার্ড

আপনার স্ক্রিপ্ট ঘোষণায় আপনি আরও ভালভাবে bootstrap.bundle.js ব্যবহার করুন যা পপার.জেএসও রয়েছে।

— দেজাজমচ

কাজ করার জন্য শেষ পয়েন্টটিng serve আবার চালানো মিস করবেন না । এছাড়াও কেন কৌনিক সিএলআই স্বয়ংক্রিয়ভাবে এটি যুক্ত করতে পারে না? এটির জন্য আমাদের কাছে বিকল্প থাকলে ভাল হবে good

— শাইজুট

Answer 3

নিম্নলিখিতগুলি করুন:

npm i bootstrap@next --save

এটি আপনার প্রকল্পে বুটস্ট্র্যাপ 4 যুক্ত করবে।

এর পরে আপনার src/style.scssবা src/style.cssফাইলে যান (আপনি যে কোনওটিই ব্যবহার করছেন চয়ন করুন) এবং বুটস্ট্র্যাপ সেখানে আমদানি করুন:

স্টাইল। CSS এর জন্য

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

স্টাইল.এসএসএস এর জন্য

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

স্ক্রিপ্টগুলির জন্য আপনাকে এখনও এ জাতীয় কৌণিক-ক্লাই.জসন ফাইলটিতে ফাইল যুক্ত করতে হবে ( কৌণিক সংস্করণ 6 এ, এই সম্পাদনাটি কৌণিক.জসন ফাইলটিতে করা দরকার ) :

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

Comments

আইএমএইচও এটি একটি দুর্দান্ত বিকল্প, বিশেষত কৌণিক-ক্লাইমের সর্বশেষতম সংস্করণগুলির সাথে। দুর্দান্ত সুবিধাটি হ'ল গ্রহণযোগ্য উত্তরে উল্লিখিত এনপিএম প্যাকেজ থেকে গ্রন্থাগারটি আপডেট করার ক্ষেত্রে এই পদ্ধতিটি নির্ভর করে না; তদ্ব্যতীত, এটি আমাদের সিএসএস ফাইলগুলি সরাসরি সংকলিত না করে SASS ব্যবহার করে বুটস্ট্র্যাপ ভেরিয়েবলগুলিকে ওভাররাইড করতে সক্ষম করে।

— মার্টিন

হ্যাঁ, এটি পরিষ্কার এবং আরও মডুলার, সুতরাং আমি এটি পছন্দ করি!

— মহাতমানিচ

এই কাজটি আমার জন্য, কোনও পূর্বশর্ত অনুসরণ করার জন্য কাজ করে, আমি কৌনিক এবং বুটস্ট্র্যাপের সর্বশেষ সংস্করণটি ব্যবহার করছি এবং উপরের সমস্ত পরিবর্তনগুলি যুক্ত করেছি, এইভাবে কাজ করে নি তবে <লিঙ্ক rel = "স্টাইলশিট" টাইপ = "পাঠ্য / সিএসএস" href যুক্ত করার জন্য কাজ করেছি = "বিক্রেতার / বুটস্ট্র্যাপ / ডিএসটি / সিএসএস / বুটস্ট্র্যাপ.মিন.সি.এস.এস.এস">

— ইনডেক্স html

এটি ক্লাইপ সেটআপ ব্যবহার করছে!

— মহাতমানিচ

একটি ক্লিনার পদ্ধতি হ'ল ইমপোর্ট '~ বুটস্ট্র্যাপ / ডিএসটি / সিএসএস / বুটস্ট্র্যাপ'; নোড_মডিউলগুলি ফোল্ডার থেকে সরাসরি মডিউলটির মতো আমদানির জন্য ~ চিহ্ন ব্যবহার করুন। এখানে একটি ব্যাখ্যা পাওয়া গেছে: stackoverflow.com/questions/39535760/…

— এআই

Answer 4

প্রথমে, আপনাকে এই কমান্ডগুলির সাহায্যে টিথার, জ্যাকোয়ারি এবং বুটস্ট্র্যাপ ইনস্টল করতে হবে

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

আপনার কৌণিক- cli.json (সংস্করণ 6 থেকে অ্যাংুলার.জসন) ফাইলটিতে এই লাইনগুলি যুক্ত করার পরে

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Comments

আপনার অর্থ কি $ প্রকল্পের রুট / .angular-cli.json?

Answer 5

যেহেতু কেউ এখনও বুটস্ট্র্যাপ কীভাবে অন্তর্ভুক্ত করবেন সে সম্পর্কে অফিসিয়াল (কৌণিক-ক্লাইম টিম) গল্পটির উল্লেখ করেনি: https://github.com/angular/angular-cli/wiki/stories-incolve-bootstrap

বুটস্ট্র্যাপ অন্তর্ভুক্ত করুন

বুটস্ট্র্যাপ একটি জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক যা একটি কৌণিক প্রকল্পের মধ্যে ব্যবহার করা যেতে পারে। এই গাইডটি আপনাকে আপনার কৌণিক সিএলআই প্রকল্পে বুটস্ট্র্যাপ যুক্ত করে বুটস্ট্র্যাপ ব্যবহারের জন্য কনফিগার করার মধ্য দিয়ে যাবে।

সিএসএস ব্যবহার করে

শুরু হচ্ছে

একটি নতুন প্রকল্প তৈরি করুন এবং প্রকল্পে নেভিগেট করুন

ng new my-app
cd my-app

বুটস্ট্র্যাপ ইনস্টল করা হচ্ছে

নতুন প্রকল্পটি তৈরি এবং প্রস্তুত হয়ে আপনাকে পরবর্তী সময়ে নির্ভরতা হিসাবে আপনার প্রকল্পে বুটস্ট্র্যাপ ইনস্টল করতে হবে। --saveবিকল্পটি ব্যবহার করে নির্ভরতা প্যাকেজ.জসনে সংরক্ষণ করা হবে

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

প্রকল্প কনফিগার করা হচ্ছে

এখন যে প্রকল্পটি সেট আপ হয়েছে এটি বুটস্ট্র্যাপ সিএসএস অন্তর্ভুক্ত করতে অবশ্যই কনফিগার করা উচিত।

• .angular-cli.jsonআপনার প্রকল্পের মূল থেকে ফাইলটি খুলুন ।
• সম্পত্তির অধীনে সেই appsঅ্যারেতে প্রথম আইটেমটি ডিফল্ট অ্যাপ্লিকেশন।
• এমন একটি সম্পত্তি রয়েছে stylesযা আপনার আবেদনে বাহ্যিক বৈশ্বিক শৈলী প্রয়োগ করতে দেয় allows
• পাথ নির্দিষ্ট করুন bootstrap.min.css

আপনার কাজ শেষ হওয়ার পরে এটি নীচের মতো হওয়া উচিত:

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

দ্রষ্টব্য: আপনি যখন পরিবর্তন করবেন তখন কনফিগারেশন পরিবর্তনগুলি .angular-cli.jsonপুনরায় শুরু ng serveকরতে হবে।

পরীক্ষার প্রকল্প

app.component.htmlনিম্নলিখিত মার্কআপটি খুলুন এবং যুক্ত করুন:

<button class="btn btn-primary">Test Button</button>

অ্যাপ্লিকেশনটি কনফিগার করা সহ, ng serveআপনার অ্যাপ্লিকেশনটি বিকাশ মোডে চালানোর জন্য চালান। আপনার ব্রাউজারে অ্যাপ্লিকেশন নেভিগেট করুন localhost:4200। বুটস্ট্র্যাপ স্টাইলযুক্ত বোতাম প্রদর্শিত হবে যাচাই করুন।

SASS ব্যবহার করে

শুরু হচ্ছে

একটি নতুন প্রকল্প তৈরি করুন এবং প্রকল্পে নেভিগেট করুন

ng new my-app --style=scss
cd my-app

বুটস্ট্র্যাপ ইনস্টল করা হচ্ছে

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

প্রকল্প কনফিগার করা হচ্ছে

একটি খালি ফাইল তৈরি _variables.scssমধ্যে src/।

আপনি যদি ব্যবহার করে থাকেন bootstrap-sassতবে নিম্নলিখিতগুলিতে এতে যুক্ত করুন _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

ইন styles.scssনিম্নলিখিত যোগ করুন:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

পরীক্ষার প্রকল্প

app.component.htmlনিম্নলিখিত মার্কআপটি খুলুন এবং যুক্ত করুন:

<button class="btn btn-primary">Test Button</button>

অ্যাপ্লিকেশনটি কনফিগার করা সহ, ng serveআপনার অ্যাপ্লিকেশনটি বিকাশ মোডে চালানোর জন্য চালান। আপনার ব্রাউজারে অ্যাপ্লিকেশন নেভিগেট করুন localhost:4200। বুটস্ট্র্যাপ স্টাইলযুক্ত বোতাম প্রদর্শিত হবে যাচাই করুন। আপনার ভেরিয়েবলগুলি খালি ব্যবহার করা হয়েছে তা নিশ্চিত করতে _variables.scssএবং নিম্নলিখিতগুলি যুক্ত করুন:

$brand-primary: red;

ফন্টের রঙ পরিবর্তিত দেখতে ব্রাউজারটি ফিরুন।

Comments

এই সমাধানটি বুটস্ট্র্যাপের জন্য জাভাস্ক্রিপ্ট ফাইলগুলি যুক্ত করে না, কেবল সিএসএস

— রবিন ভ্যান ডার কানাপ ২

এই অন্যান্য গল্পটি দেখুন: github.com/angular/angular-cli/wiki/stories-global-lib । এটি স্ক্রিপ্ট ফাইল যুক্ত করার বর্ণনা দেয়, উদাহরণস্বরূপ বুটস্ট্র্যাপ 4 গ্রহণ করে।

— রবিন ভ্যান ডার কেনাপ

$brand-primary: red;আমার জন্য কাজ করে না। তবে $primary: red;কি!

— জোহান ফ্রিক

বুটস্ট্র্যাপ বনাম

— বুস্ট্র্যাপের

Answer 6

V1.0.0-beta.26 আপডেট করুন

আপনি বুটস্ট্র্যাপ আমদানি করার জন্য নতুন উপায় জন্য দস্তাবেজে দেখতে পারেন এখানে

যদি এটি এখনও কাজ না করে, এনজি সার্ভিং কমান্ডটি দিয়ে পুনরায় চালু করুন

1.0.0 বা নীচের সংস্করণ:

আপনার ইনডেক্স.ইচটিএমএল ফাইলে আপনার কেবল বুটস্ট্র্যাপ সিএসএস লিঙ্ক প্রয়োজন (জেএস স্ক্রিপ্টের দরকার নেই)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

এবং

npm install ng2-bootstrap --save
npm install moment --save

ইনস্টল থাকার পর NG2-বুটস্ট্র্যাপ মধ্যে my_project / src / সিস্টেম-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

এবং আমার_প্রজেক্ট / কৌণিক-ক্লিপ-বিল্ড.জেজে:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

আপনার মডিউলটি বিক্রেতাকে রাখার জন্য এই আদেশটি ভুলে যাবেন না:

ng build

একই নীতি অন্য মডিউল থেকে আমদানি করতে।

Comments

এটি কীভাবে বুটস্ট্র্যাপটিকে jquery ব্যবহার করতে সক্ষম করে? আমি এটি করেছি এবং এটি কাজ করে না।

— mjwrazor

উদাহরণস্বরূপ এটি পাওয়া গেল এবং এটি কাজ করেছিল। আমি কিছুক্ষণের জন্য এটি বুঝতে পারি না।

— mjwrazor

Answer 7

আমি অনুমান করি যে উপরের পদ্ধতিগুলি প্রকাশের পরে পরিবর্তিত হয়েছে, এই লিঙ্কটি দেখুন

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

প্রকল্প শুরু

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

এনজি-বুটস্ট্র্যাপ এবং বুটস্ট্র্যাপ ইনস্টল করুন

npm install ng2-bootstrap bootstrap --save

src / app / app.module.ts খুলুন এবং যুক্ত করুন

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

কৌণিক- cli.json খুলুন এবং শৈলীর অ্যারেতে একটি নতুন এন্ট্রি প্রবেশ করান

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

src / app / app.componal.html খুলুন এবং যোগ করে সমস্ত কাজ পরীক্ষা করুন

<alert type="success">hello</alert>

Comments

আহমেদ হামেডি থেকে পদ্ধতি কাজ করে, আপাতত কোড আপডেটের ঘটনা ঘটে। সমাধান সহ তাঁর বার্তা আপডেট করেছেন।

— পিটারএইচ

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করতে চান তবে আপনাকে "এনপিএম ইনস্টল এনজি 2-বুটস্ট্র্যাপ বুটস্ট্র্যাপ - সেভ" হতে "এনপিএম এনজি 2-বুটস্ট্র্যাপ বুটস্ট্র্যাপ @ 4.0.0-alpha.6 --save" পরিবর্তন করতে হবে .... পুরোপুরি নয় ডকুমেন্টেশনে সুস্পষ্ট (বুটস্ট্র্যাপ সিএসএসে 'কার্ড-' এর জন্য এটি কাজ করেছে কিনা তা অনুসন্ধান করুন) ... নোট করুন যে এটি বর্তমানে আলফা 6 এটি কোনও সন্দেহের পরিবর্তন করবে ... বর্তমান এনপিএম নির্দেশের জন্য বুটস্ট্র্যাপ সাইটটি দেখুন

— 72 জিএম

Answer 8

কৌণিক 5 এ বুটস্ট্র্যাপ 4 এর জন্য পদক্ষেপ

1. কৌণিক 5 প্রকল্প তৈরি করুন

   এনজিও নতুন অ্যাঙ্গুলার বুটস্ট্র্যাপটেষ্ট

2. প্রকল্প ডিরেক্টরিতে সরান

   সিডি AngularBootstrapTest

3. বুটস্ট্র্যাপ ডাউনলোড করুন

   এনপিএম বুটস্ট্র্যাপ ইনস্টল করুন

4. প্রকল্পে বুটস্ট্র্যাপ যুক্ত করুন

   4.1 ওপেন .াঙ্গুলার-ক্লাই.জসন

   ৪.২ জসনের "স্টাইল" বিভাগটি সন্ধান করুন

   4.3 নীচের মত বুটস্ট্র্যাপ সিএসএস পাথ যোগ করুন

   ।

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

এখন আপনি কৌনিক 5 প্রকল্পে সফলভাবে বুটস্ট্র্যাপ সিএসএস যুক্ত করেছেন

পরীক্ষা বুটস্ট্র্যাপ

5. খোলা src/app/app.component.html
6. বুটস্ট্র্যাপ বোতাম উপাদান যোগ করুন

।

<button type="button" class="btn btn-primary">Primary</button>

আপনি এখানে বাটন শৈলীগুলি উল্লেখ করতে পারেন ( https://getbootstrap.com/docs/4.0/compferences/buttons/ )

7. ফাইল সংরক্ষণ করুন

8. প্রকল্প চালান

   এনজি পরিবেশন - ওপেন

এখন আপনি পৃষ্ঠাতে বুটস্ট্র্যাপ স্টাইল বোতামটি দেখতে পাবেন

দ্রষ্টব্য: আপনি যদি এনজি সার্ভিসের পরে বুটস্ট্র্যাপের পথটি জুড়ে থাকেন , আপনাকে অবশ্যই পরিবর্তনগুলি প্রতিবিম্বিত করতে এনজি সার্ভিসটি থামাতে হবে এবং পুনরায় চালু করতে হবে

Answer 9

যেহেতু এটি এত বিভ্রান্তিকর হয়ে উঠেছে এবং উত্তরগুলি এখানে পুরোপুরি মিশ্রিত হয়েছে আমি কেবল বিএস 4 রেপোর জন্য অফিসিয়াল ইউআই-টিমের সাথে যাওয়ার পরামর্শ দেব (হ্যাঁ এনজি-বুটস্ট্র্যাপের জন্য এমন অনেকগুলি রেপো রয়েছে।

BS4 পেতে এখানে কেবল https://github.com/ng-bootstrap/ng-bootstrap নির্দেশাবলী অনুসরণ করুন ।

লিব থেকে উদ্ধৃতি:

এই লাইব্রেরিটি স্ক্র্যাচ থেকে ইউআই-বুটস্ট্র্যাপ টিম তৈরি করেছে। আমরা টাইপস্ক্রিপ্ট ব্যবহার করছি এবং বুটস্ট্র্যাপ 4 সিএসএস ফ্রেমওয়ার্কটি লক্ষ্যবস্তু করছি।

বুটস্ট্র্যাপ 4-এর মতো এই গ্রন্থাগারটিও কাজ চলছে। আমরা প্রয়োগ করছি এমন সমস্ত জিনিস দেখতে দয়া করে আমাদের সমস্যার তালিকাটি দেখুন। সেখানে মন্তব্য করতে নির্দ্বিধায়।

এর খাতিরে যা আছে তা পেস্ট করার জন্য কেবল অনুলিপি করুন:

npm install --save @ng-bootstrap/ng-bootstrap

ইনস্টল হয়ে গেলে আপনার আমাদের মূল মডিউলটি আমদানি করতে হবে:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

কেবলমাত্র অবশিষ্ট অংশটি হ'ল আপনার অ্যাপ্লিকেশন মডিউলে আমদানি করা মডিউলটি তালিকাভুক্ত করা। রুট (শীর্ষ-স্তর) মডিউলটির জন্য সঠিক পদ্ধতিটি কিছুটা আলাদা হবে যার জন্য আপনার কোডটি (নোটিশ এনগিবোমডুল.রোট ()) এর অনুরূপ কোডের সাথে শেষ করা উচিত:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

আপনার অ্যাপ্লিকেশনের অন্যান্য মডিউলগুলি সহজেই এনজিবিমডিউল আমদানি করতে পারে:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

এটি এখন পর্যন্ত সবচেয়ে সামঞ্জস্যপূর্ণ আচরণ বলে মনে হচ্ছে

Answer 10

1. বুটস্ট্র্যাপ ইনস্টল করুন

   npm install bootstrap@next

2. .Angular-cli.json এ কোড যুক্ত করুন:

   "styles": [
     "styles.css",
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ],
   "scripts": [
     "../node_modules/jquery/dist/jquery.js",
     "../node_modules/tether/dist/js/tether.js",
     "../node_modules/bootstrap/dist/js/bootstrap.js"
   ],

3. আপনার কোড স্টাইল.এসএসএস-এ বুটস্ট্র্যাপ.এসএস যুক্ত করুন

   @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

4. আপনার স্থানীয় সার্ভার পুনরায় চালু করুন

Comments

যদিও এনজিএক্স-বুটস্ট্র্যাপ এটি সমর্থন করে এমন উপাদানগুলির জন্য দুর্দান্ত, কখনও কখনও আপনার এখনও "নেটিভ" জ্যাকুয়ারি প্লাগইন ব্যবহার করা দরকার যেমন টেবিলগুলিতে ক্রম কার্যকারিতা। তারপরে আপনাকে এখনও স্পষ্টভাবে jquery স্ক্রিপ্ট আমদানি করতে হবে যা এই উত্তরটি দেখায়।

— ক্রিস্টোফ

পয়েন্ট 4 এর জন্য উত্সাহিত (আপনার স্থানীয় সার্ভারটি পুনরায় চালু করুন) আমি ---> এনপিএম এনজিএক্স-বুটস্ট্র্যাপ বুটস্ট্র্যাপ ইনস্টল করছি - সেভ

— পলানীকুমার

Answer 11

নিম্নলিখিত পদক্ষেপগুলি করুন:

1. npm install --save bootstrap

2. এবং আপনার .angular-cli.json এ, শৈলী বিভাগে যুক্ত করুন:

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

এর পরে, আপনাকে অবশ্যই আপনার এনজি সার্ভিস পুনরায় চালু করতে হবে

উপভোগ করুন

Answer 12

1. এনপিএম ব্যবহার করে বুটস্ট্র্যাপ ইনস্টল করুন

   npm install bootstrap

২.পপ্পার.জেএস ইনস্টল করুন

npm install --save popper.js

3.Goto angular.json কৌণিক 6 প্রকল্প / এ .angular-cli.json কৌণিক 5 এবং তালিকাভুক্ত যোগ করুন:

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

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

Answer 13

এটা চেষ্টা কর

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

Answer 14

আপনি এই ভিডিওটি মাইকে ব্রোচিও দেখতে পারেন যাতে আপনার অ্যাংুলার-ক্লাইভ উত্পাদিত প্রকল্পে বুটস্ট্র্যাপ কীভাবে যুক্ত করা যায় সে সম্পর্কে দরকারী তথ্য রয়েছে। https://www.youtube.com/watch?v=obbdFFbjLIU (প্রায় 13 মিনিটের সময়)

Answer 15

1. বাশ চালান npm install ng2-bootstrap bootstrap --save
2. নিম্নলিখিতটি যুক্ত / পরিবর্তন করুন angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Answer 16

সংশ্লিষ্ট প্রকল্প ডিরেক্টরিতে টার্মিনাল / কমান্ড প্রম্পট খুলুন এবং নিম্নলিখিত আদেশটি টাইপ করুন।

npm install --save bootstrap

তারপরে .angular-cli.json ফাইলটি খুলুন, সন্ধান করুন

"styles": [ "styles.css" ],

যে পরিবর্তন

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

সব শেষ.

Answer 17

এখন নতুন এনজি-বুটস্ট্র্যাপের সাথে 1.0.0-beta.5 সংস্করণ বুটস্ট্র্যাপের মার্কআপ এবং সিএসএসের উপর ভিত্তি করে বেশিরভাগ নেটিভ কৌণিক নির্দেশকে সমর্থন করে।

এটির সাথে কাজ করার জন্য একমাত্র নির্ভরতা bootstrap। ব্যবহারের করার কোন প্রয়োজন jQuery এবং popper.js নির্ভরতা।

এনজি-বুটস্ট্র্যাপ উপাদানগুলির জন্য জাভাস্ক্রিপ্ট বাস্তবায়ন সম্পূর্ণরূপে প্রতিস্থাপন করা হয়। সুতরাং আপনাকে bootstrap.min.jsআপনার .angular-cli.json এর স্ক্রিপ্ট বিভাগে অন্তর্ভুক্ত করার দরকার নেই।

যখন আপনি কৌণিক-ক্লাইম সর্বশেষ সংস্করণ সহ উত্পন্ন প্রকল্পের সাথে বুটস্ট্র্যাপ সংহত করছেন তখন এই পদক্ষেপগুলি অনুসরণ করুন।

• Inculde bootstrap.min.cssআপনার .angular-cli.json, শৈলী বিভাগে।

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

• এনজি-বুটস্ট্র্যাপ নির্ভরতা ইনস্টল করুন ।

  npm install --save @ng-bootstrap/ng-bootstrap

• এটি আপনার প্রধান মডিউল শ্রেণিতে যুক্ত করুন।

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

• আপনার মূল মডিউল আমদানি বিভাগে নিম্নলিখিতটি অন্তর্ভুক্ত করুন।

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })

• আপনি যদি এই মডিউল ক্লাসের মধ্যে এনজি-বুটস্ট্র্যাপ উপাদান ব্যবহার করতে চলেছেন তবে আপনার সাব মডিউলগুলিতে নিম্নলিখিতগুলিও করুন।

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• এখন আপনার প্রকল্পটি উপলব্ধ এনজি-বুটস্ট্র্যাপ উপাদানগুলি ব্যবহারের জন্য প্রস্তুত।

Answer 18

1. বুটস্ট্র্যাপ, পপ্পার.জেএস ইনস্টল করুন

npm install --save bootstrap npm install --save popper.js

3. ইন src / styles.css , আমদানি বুটস্ট্র্যাপ শৈলী

@import '~bootstrap/dist/css/bootstrap.min.css';

Answer 19

ধাপ 1:
npm install bootstrap@latest --save-dev এটি বুটস্ট্র্যাপের সর্বশেষ সংস্করণটি ইনস্টল করবে, তবে নির্দিষ্ট সংস্করণটি সংস্করণ নম্বর যুক্ত করে ইনস্টল করা যাবে

পদক্ষেপ 2: স্টাইলস.এসএস খুলুন এবং নিম্নলিখিতগুলি যুক্ত করুন @import "~bootstrap/dist/css/bootstrap.css"

Comments

মুছে ফেলা ছাড়া বেশিরভাগই বর্তমান সেরা উত্তর - সেভ-ডেভ। আপনি যেমন বুটস্ট্র্যাপটি আপনার অ্যাপ্লিকেশন সহ স্থাপন করতে চান।

— সিডওয়েল

Answer 20

বুটস্ট্র্যাপ এবং জ্যাকুরি উভয় যুক্ত করার জন্য

npm install bootstrap@3 jquery --save

এই কমান্ডটি চালানোর পরে, দয়া করে এগিয়ে যান এবং আপনার নোড_মডিউলগুলি ফোল্ডারটি পরীক্ষা করুন যাতে আপনি এতে বুটস্ট্র্যাপ এবং jquery যুক্ত দেখতে সক্ষম হন।

Comments

শীতল পাশাপাশি Jquery যোগ করা।

— সূর্য আর প্রবীণ

Answer 21

angular-cliএখন একটি উত্সর্গীকৃত উইকি পৃষ্ঠা রয়েছে যেখানে আপনি আপনার প্রয়োজনীয় সমস্ত কিছু সন্ধান করতে পারেন। টিএলডিআর, bootstrapমাধ্যমে ইনস্টল করুন npmএবং আপনার .angular-cli.jsonফাইলে "স্টাইল" বিভাগে শৈলীর লিঙ্ক যুক্ত করুন

Answer 22

কৌণিক-ক্লি এবং সিএসএস ব্যবহারের ক্ষেত্রে কার্যকারী উদাহরণ:

1. ইনস্টল বুটস্ট্র্যাপ

এনপিএম বুটস্ট্র্যাপ টিথার জেকারি - সেভ ইনস্টল করুন

2.Adular to .angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

Answer 23

এনপিএম ব্যবহার করে বুস্ট্র্যাপ ইনস্টল করুন

npm install boostrap@next --save

তারপরে boostrap.css ফাইলের জন্য আপনার নোড_মডিউলগুলি ফোল্ডারটি পরীক্ষা করুন (ডিস্টের মধ্যে) সাধারণত পথ

"../node_modules/bootstrap/dist/css/bootstrap.css",

এই পথ যোগ করুন | স্টাইল। CSS বা স্টাইল.এসএসএসের মধ্যে বুস্ট্র্যাপ আমদানি করুন

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

এটাই.

Comments

এটি স্টাইলের অ্যারেতে রাখার বিষয়ে কী angular-cli.json? Neccessary না?

— কোডি বাগস্টিন

না এটি প্রয়োজনীয় নয়। যেহেতু আমরা আমাদের অ্যারেতে স্টাইল.এসএস ফাইল অন্তর্ভুক্ত করছি। আমরা আমাদের স্টাইল.এসএস বা স্টাইল.এসএসএস "@ ইম্পোর্ট" ~@angular/matory/prebuilt-themes/indigo-pink.css ";" @ ইম্পোর্ট ".. / নোড_মডিউলস / বুটস্ট্র্যাপ / ডিস্ট / সিএসএসে অন্যান্য সিএসএস ফাইল আমদানি করতে পারি /bootstrap.css ";

— চানাকা ফার্নান্দো

আহ ঠিক আছে .. তবে আমি মনে করি এটি অন্তর্ভুক্ত angular-cli.jsonকরা সম্ভবত আরও ভাল

— কোডিবাগস্টিন

@ কোডি বুগস্টাইন আমি নিশ্চিত নই যে এটি ".angular-cli.json" এ যুক্ত করার জন্য প্রয়োজনীয় "আরও ভাল" আছে কিনা। আপনার স্টাইলসএসএসএস ফাইলটিতে আপনি কেন আমদানি যুক্ত করতে চাইতে পারেন তার কয়েকটি কারণ এখানে রয়েছে: 1) আপনি এখানে বুটসওয়াচের উদাহরণের মতো একটি বুটস্ট্র্যাপ থিম সহজেই প্রয়োগ করতে পারেন: github.com/thomaspark/bootswatch 2) .জসন ফাইলগুলি সম্পাদনা করা আরও জটিল more .এসএসএস ফাইলগুলি সম্পাদনা করা কারণ জেএসএস ফাইলগুলি মন্তব্যের অনুমতি দেয় না এবং 3) নতুন বিকাশকারী স্টাইল.এসএসএস-কে .angular-cli.json এর পরিবর্তে সমস্ত CSS এর সূচনা পয়েন্ট হিসাবে দেখতে পারে।

— কিথ

Answer 24

প্রকল্পের ভিতরে নিম্নলিখিত কমান্ডটি চালান

npm install --save @bootsrap@4

এবং যদি আপনি এর মতো একটি নিশ্চিতকরণ পান

+ bootstrap@4.1.3
updated 1 package in 8.245s

এর অর্থ বুস্ট্রেপ 4 সফলভাবে ইনস্টল করা আছে। তবে এটি ব্যবহার করার জন্য আপনাকে কৌনিক.জসন ফাইলের নীচে "স্টাইলস" অ্যারে আপডেট করতে হবে।

এটি নিম্নলিখিত উপায়ে আপডেট করুন যাতে বুটস্ট্র্যাপ বিদ্যমান শৈলীর ওভাররাইড করতে সক্ষম হবে

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

সবকিছু সঠিকভাবে সেট আপ হয়েছে তা নিশ্চিত করতে, চালান ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, তারপরে আপনি বুস্ট্র্যাপ ব্যবহার করা ভাল।

Answer 25

এটি এখানে দেখেনি:

@import 'bootstrap/scss/bootstrap.scss';

আমি এই লাইনটি কেবল স্টাইল.এসএসএসে যুক্ত করেছি আমার ক্ষেত্রে আমি বুটস্ট্র্যাপ ভেরিয়েবলগুলি ওভাররাইড করতে চেয়েছিলাম।

Answer 26

আপনি যদি এখনই কৌণিক এবং বুটস্ট্র্যাপ দিয়ে শুরু করেছেন তবে সাধারণ উত্তর নীচের পদক্ষেপগুলির নীচে হবে: ১. ডিভ নির্ভরতা হিসাবে বুটস্ট্র্যাপের নোড প্যাকেজ যুক্ত করুন

npm install --save bootstrap

2. কৌণিক.জসন ফাইলে বুটস্ট্র্যাপ স্টাইলহীট আমদানি করুন।

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. এবং আপনি স্টাইলিং, গ্রিড ইত্যাদির জন্য বুটস্ট্র্যাপ ব্যবহার করতে প্রস্তুত

   <div class="container">My first bootstrap div</div>

এর সবচেয়ে ভাল অংশ যা আমি পেয়েছি তা হ'ল আমরা কোনও তৃতীয় পক্ষের মডিউল নির্ভরতা ছাড়াই বুটস্ট্র্যাপ ব্যবহার করে পরিচালনা করছি direct আমরা কেবল কমান্ড npm install --save bootstrap@4.4ইত্যাদি আপডেট করে যে কোনও সময় বুটস্ট্র্যাপ আপগ্রেড করতে পারি

Answer 27

আপনার কৌণিক প্রকল্পে আপনার কাছে বুটস্ট্র্যাপ 4 যুক্ত করার বিভিন্ন উপায় রয়েছে :

• একটি এবং ট্যাগ সহ আপনার কৌণিক প্রকল্পের index.html ফাইলের বিভাগে বুটস্ট্র্যাপ সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি সহ,

• একটি @ আমদানি কীওয়ার্ড সহ আপনার কৌণিক প্রকল্পের গ্লোবাল স্টাইলস সিএসএস ফাইলগুলিতে বুটস্ট্র্যাপ সিএসএস ফাইল আমদানি করা হচ্ছে।

• আপনার প্রকল্পের অ্যাঙ্গুলার.জসন ফাইলের স্টাইল এবং স্ক্রিপ্টস অ্যারেগুলিতে বুটস্ট্র্যাপ সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল যুক্ত করা হচ্ছে

Answer 28

এই আদেশটি চালান

npm install bootstrap@3

আপনার Angular.json

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

Answer 29

আপনি npm install bootstrapকমান্ড ব্যবহার করে কৌণিক বুটস্ট্র্যাপ ইনস্টল করতে পারেন ।

এবং angular.jsonফাইল এবং style.cssফাইলে পরবর্তী সেটআপ বুটস্ট্র্যাপ পাথ ।

আপনি কৌণিকভাবে কীভাবে ইনস্টল ও সেটআপ করবেন সে সম্পর্কে একটি সম্পূর্ণ ব্লগ পড়তে পারেন, এই সম্পর্কে সম্পূর্ণ ব্লগটি পড়তে এখানে ক্লিক করুন

Answer 30

কৌণিক-ক্লিপ ব্যবহারের ক্ষেত্রে একটি কার্যকারী উদাহরণ:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

CSS এবং scss এর জন্য কাজ করে। বুটস্ট্র্যাপ ভি 3 এবং ভি 4 পাওয়া যায়।

বুটস্ট্র্যাপ-স্কিম্যাটিক্স সম্পর্কে আরও তথ্য দয়া করে এখানে সন্ধান করুন ।