एक कोणीय परियोजना में बूटस्ट्रैप का उपयोग कैसे करें?

170

मैं अपना पहला कोणीय अनुप्रयोग शुरू कर रहा हूं और मेरा मूल सेटअप किया गया है।

मैं अपने आवेदन में बूटस्ट्रैप कैसे जोड़ सकता हूं ?

यदि आप एक उदाहरण प्रदान कर सकते हैं तो यह एक बड़ी मदद होगी।

119

बशर्ते आप नई परियोजनाओं को बनाने के लिए कोणीय-सीएलआई का उपयोग करते हैं, वहाँ एक और तरीका है कि कोणीय 2/4 में बूटस्ट्रैप को सुलभ बनाया जाए ।

वाया कमांड लाइन इंटरफ़ेस प्रोजेक्ट फ़ोल्डर में नेविगेट करता है। फिर बूटस्ट्रैप स्थापित करने के लिए npm का उपयोग करें
$ npm install --save bootstrap:। --saveविकल्प निर्भरता में प्रदर्शित बूटस्ट्रैप कर देगा।
.Angular-cli.json फ़ाइल संपादित करें, जो आपकी परियोजना को कॉन्फ़िगर करती है। यह प्रोजेक्ट डायरेक्टरी के अंदर है। "styles"सरणी में संदर्भ जोड़ें । संदर्भ को npm के साथ डाउनलोड की गई बूटस्ट्रैप फ़ाइल के सापेक्ष पथ होना चाहिए। मेरे मामले में यह है:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

मेरा उदाहरण।

{
  "$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": {}
  }
}

अब बूटस्ट्रैप आपकी डिफ़ॉल्ट सेटिंग्स का हिस्सा होना चाहिए।

— LaPriWa
स्रोत

1

मुझे लगता है कि bootstrap.min.js को "स्क्रिप्ट" के साथ-साथ इस समाधान में भी जोड़ा जाना चाहिए। क्या आप सहमत हैं?

— हमलिव

1

@hamalaiv यह कम से कम अनिवार्य नहीं है।

— लैप्रोवा

3

मैंने चरण 1 का उपयोग करके बूटस्ट्रैप स्थापित किया और फिर @import "../node_modules/bootstrap/dist/css/bootstrap.min.css" प्रविष्ट किया; मेरे src / styl.css फ़ाइल में निम्न पोस्ट stackoverflow.com/a/40054193/3777549 के रूप में वर्णित है । इस पद के लिए चरण 2 मेरे लिए आवश्यक नहीं था, मैं @ कोणीय / cli का उपयोग कर रहा हूँ: 1.3.1

— user3777549

77

Ang2 के साथ एक एकीकरण एनजी 2-बूटस्ट्रैप परियोजना के माध्यम से भी उपलब्ध है : https://github.com/valor-software/ng2-bootstrap ।

इसे स्थापित करने के लिए बस इन फ़ाइलों को अपने मुख्य HTML पेज में डालें:

<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 {
}

— थियरी टेम्पलियर
स्रोत

1

यदि एनजी 2-बूटस्ट्रैप संस्करण का उपयोग कर रहे हैं तो क्या आप बंडल किए गए सीएसएस का उपयोग करने वाले नहीं हैं? मुझे यकीन नहीं है कि आप सीडीएन सीएसएस का उपयोग क्यों करेंगे या यह है कि यह कैसे किया जाना चाहिए? मैं इसके लिए भी नया हूं।

— स्टीफन यॉर्क

6

New angular2 में @component

— Master Yoda

38

आपको बस अपने index.html फ़ाइल के अंदर बूस्टर css शामिल करना है।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

— user2263572
स्रोत

1

क्या सीडीएन के बजाय स्थानीय संसाधन से इसे शामिल करने का कोई तरीका है?

— स्पार्क

1

हां, href केवल आपकी स्थानीय फ़ाइल के पथ पर सेट होना चाहिए। यदि आपके पास समस्याएँ हैं, तो मैं सुझाव दूंगा कि आप जो भी वेब सर्वर का उपयोग कर रहे हैं, उससे "स्टैटिक फ़ाइल की सेवा करना"।

— user2263572

यह index.html के अलावा अन्य फ़ाइलों के लिए कोणीय 6+ पर काम नहीं करता है। जैसे। app.component.html। कृपया बताओ।

— गणेशधाममुख

21

एक और बहुत अच्छा (बेहतर?) विकल्प कोणीय-यूआई टीम द्वारा बनाए गए विगेट्स के एक सेट का उपयोग करना है: https://ng-bootstrap.github.io

— pkozlowski.opensource
स्रोत

16

यदि आप बूटस्ट्रैप 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">

आप अपनी npm install bootstrap@4.0.0-alpha.6 --saveफ़ाइल में फ़ाइल को इंगित करके चलाने के बाद स्थानीय रूप से भी इसका संदर्भ दे सकते हैं styles.scss, यह मानते हुए कि आप SASS का उपयोग कर रहे हैं:

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

— occasl
स्रोत

1

क्या आप बता सकते हैं कि आपको जेएस फाइल को शामिल करने की आवश्यकता क्यों नहीं है। यह इसलिए है क्योंकि एनपीएम इसे स्थापित करता है? इसके अलावा, थिएरी टेम्पलर के उदाहरण में, वह एनजी 2-बूटस्ट्रैप / एनजी 2-बूटस्ट्रैप को एक चेतावनी का उपयोग करने के लिए आयात करता है। क्या बूटस्ट्रैप 4 के लिए भी वही उपयोग है?

— बीबासिंगर

धन्यवाद। मैंने आपका दूसरा उदाहरण आजमाया। मुझे एक त्रुटि मिली कि संसाधन नोड_मॉड्यूल्स से लोड करने में विफल रहा।

— बीबीसिंगर

1

अद्यतन उत्तर देखें। यदि आप SASS का उपयोग कर रहे हैं तो आप बस वही कर सकते हैं जो मैंने किया था और @importयह आपकी SASS फाइल में है। यदि नहीं, तो आप इसे अपनी vendor.tsफ़ाइल में जोड़ने का प्रयास कर सकते हैं , लेकिन मैं अपने कोड में इसका उपयोग नहीं कर रहा हूं।

— कभी

10

सबसे लोकप्रिय विकल्प एनपीएम पैकेज के रूप में वितरित कुछ थर्ड पार्टी लाइब्रेरी का उपयोग करना है जैसे एनजी 2-बूटस्ट्रैप प्रोजेक्ट https://github.com/valor-software/ng2-bootstrap या कोणीय यूआई बूटस्ट्रैप लाइब्रेरी।

मैं व्यक्तिगत रूप से ng2-बूटस्ट्रैप का उपयोग करता हूं। इसे कॉन्फ़िगर करने के कई तरीके हैं, क्योंकि कॉन्फ़िगरेशन इस बात पर निर्भर करता है कि आपका कोणीय प्रोजेक्ट कैसे बना है। नीचे मैं Angular 2 QuickStart परियोजना 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);

हमें index.html में .sts फ़ाइल को बूटस्ट्रैप आयात करना होगा। हम इसे अपनी हार्ड ड्राइव पर / node_modules / बूटस्ट्रैप निर्देशिका से प्राप्त कर सकते हैं (क्योंकि हमने बूटस्ट्रैप 3.3.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 निर्देशिका से अपनी 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 निर्देशिका से हमारे app.component.ts फ़ाइल

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

फिर हमें अपना ऐप चलाने से पहले अपने बूटस्ट्रैप और ng2-बूटस्ट्रैप निर्भरता को स्थापित करना होगा। हमें अपनी परियोजना निर्देशिका और प्रकार पर जाना चाहिए

npm install

अंत में हम अपना ऐप शुरू कर सकते हैं

npm start

Ng2-bootstrap प्रोजेक्ट github पर कई कोड नमूने हैं जो दिखाते हैं कि विभिन्न Angular 2 प्रोजेक्ट बिल्ड में ng2-बूटस्ट्रैप को कैसे आयात किया जाए। यहां तक कि plnkr नमूना भी है। Valor-software (पुस्तकालय के लेखक) वेबसाइट पर एपीआई प्रलेखन भी है।

— ल्यूक
स्रोत

9

कोणीय-क्ली वातावरण में, मैंने जो सबसे सरल तरीका पाया है वह निम्नलिखित है:

1. s̲c̲s inshe स्टाइलशीट के साथ वातावरण में समाधान

npm install bootstrap-sass —save

Style.scss में:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

नोट 1: ~चरित्र nodes_modules फ़ोल्डर का संदर्भ है ।
नोट 2: जैसा कि हम scss का उपयोग कर रहे हैं, हम अपने इच्छित बूस्टर वेरिएबल को कस्टमाइज़ कर सकते हैं।

2. c̲s̲s in स्टाइलशीट के साथ एक वातावरण में समाधान

npm install bootstrap —save

Style.css में:

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

— माइकल पी। बाजोस
स्रोत

6

बूटस्ट्रैप के साथ कोणीय 2 को कॉन्फ़िगर करने के कई तरीके हैं, जिनमें से अधिकांश को प्राप्त करने के लिए सबसे पूर्ण तरीकों में से एक है एनजी-बूटस्ट्रैप का उपयोग करना, इस कॉन्फ़िगरेशन का उपयोग करके हम अपने डोम पर एल्ग्रुलर 2 पूर्ण नियंत्रण को देते हैं, _____ और बूस्ट्रैप का उपयोग करने से बचते हैं। .js।

1-कोणीय-सीएलआई के साथ बनाई गई एक नई परियोजना को एक प्रारंभिक बिंदु के रूप में लें और कमांड लाइन का उपयोग करके एनजी-बूटस्ट्रैप स्थापित करें:

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

नोट: https://ng-bootstrap.github.io/#/getting-started पर अधिक जानकारी

2-फिर हमें css और ग्रिड सिस्टम के लिए बूटस्ट्रैप को स्थापित करने की आवश्यकता है।

npm install bootstrap@4.0.0-beta.2 --save

नोट: https://getbootstrap.com/docs/4.0/getting-started/download/ पर अधिक जानकारी

अब हमारे पास पर्यावरण है और इसके लिए हमें .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"
      }
    }
  ]

अगला कदम एनजी-बूस्टर मॉड्यूल को हमारी परियोजना में जोड़ना है, ऐसा करने के लिए हमें app.module.gov पर जोड़ना होगा:

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

फिर एप्लिकेशन एप्लिकेशन में नया मॉड्यूल जोड़ें: NgbModule.forRoot ()

उदाहरण:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

अब हम अपने angular2 / 5 प्रोजेक्ट पर bootstrap4 का उपयोग शुरू कर सकते हैं।

— UHDante
स्रोत

3

मेरे पास एक ही सवाल था और इस लेख को वास्तव में स्वच्छ समाधान के साथ मिला:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

यहाँ निर्देश हैं, लेकिन मेरे सरलीकृत समाधान के साथ:

बूटस्ट्रैप 4 ( निर्देश ) स्थापित करें :

npm install --save bootstrap@4.0.0-alpha.6

यदि आवश्यक हो, तो परिवर्तन को प्रतिबिंबित करने के लिए अपने src / styl.css को style.scss और update .angular-cli.json का नाम बदलें।

"styles": [
  "styles.scss"
],

फिर इस पंक्ति को शैलियों में जोड़ें। एसएमएस :

@import '~bootstrap/scss/bootstrap';

— jared_flack
स्रोत

3

बस अपने package.json फ़ाइल की जाँच करें और बूटस्ट्रैप के लिए निर्भरता जोड़ें

"dependencies": {

   "bootstrap": "^3.3.7",
}

फिर .angular-cli.jsonफ़ाइल पर नीचे कोड जोड़ें

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

अंत में आप बस टर्मिनल का उपयोग करके अपने npm को स्थानीय रूप से अपडेट करते हैं

$ npm update

— तंजीब अहसन
स्रोत

2

npm स्थापित - save बूटस्ट्रैप
go to -> angular-cli.json फाइल, स्टाइल प्रॉपर्टीज खोजें और बस अगला स्टिंग जोड़ें: "../node_modules/bootstrap/dist/css/bootstrap.min.css", यह इस तरह लग सकता है:
```
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
```

— 31113
स्रोत

2

कोणीय 6+ और बूटस्ट्रैप 4+ के साथ प्रक्रिया:

अपने प्रोजेक्ट के फ़ोल्डर पर एक खोल खोलें
कमांड के साथ बूटस्ट्रैप स्थापित करें: npm install --save bootstrap@4.1.3
बूटस्ट्रैप को निर्भरता की आवश्यकता होती है, इसलिए यदि आपके पास यह नहीं है, तो आप इसे कमांड के साथ स्थापित कर सकते हैं: npm install --save jquery 1.9.1
आपको कमांड के साथ भेद्यता को ठीक करने की आवश्यकता हो सकती है: npm audit fix
अपनी मुख्य शैली में। Scs फ़ाइल, निम्न पंक्ति जोड़ें: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

या

इस लाइन को अपनी मुख्य index.html फ़ाइल में जोड़ें: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

— veben
स्रोत

1

मैं उसी जवाब की तलाश में था और आखिरकार मुझे यह लिंक मिल गया। आप तीन अलग-अलग तरीकों से समझा सकते हैं कि अपने कोणीय 2 प्रोजेक्ट में बूटस्ट्रैप सीएसएस कैसे जोड़ा जाए। इसने मेरी मदद की।

यहाँ लिंक है: http://codingthesmartway.com/using-bootstrap-with-angular/

— MiroslavStojakovic
स्रोत

1

मेरी सिफारिश यह होगी कि इसे जैंस स्टाइलस में घोषित करने के बजाय इसे एससीएस में रखा जाए, ताकि सब कुछ संकलित हो और एक ही स्थान पर हो।

1) npm के साथ बूटस्ट्रैप स्थापित करें

 npm install bootstrap

2) हमारी शैलियों के साथ सीएसएस में बूटस्ट्रैप npm की घोषणा करें

बनाएँ _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";

इसलिए हम अपने सभी कोर संकलित और एक जगह पर होंगे

— JMF
स्रोत

0

आप प्रिटीफॉक्स यूआई लाइब्रेरी http://ng.prettyfox.org का उपयोग करने का प्रयास कर सकते हैं

यह लाइब्रेरी बूटस्ट्रैप 4 शैलियों का उपयोग करती है और इसमें jquery की आवश्यकता नहीं होती है।

— Langaner
स्रोत

0

अपने HTML पृष्ठ में निम्न पंक्तियाँ जोड़ें

<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">

— sriram26
स्रोत

0

यदि आप संकुल.स्ट्रसन में बूटस्ट्रैप जोड़ने के बाद कोणीय क्ली का उपयोग करते हैं, और पैकेज को स्थापित करते हैं, तो आपको केवल बूस्टर .min.css को .angular-cli.json के "स्टाइल्स" खंड में जोड़ना होगा।

एक महत्वपूर्ण बात यह है कि "जब आप .angular-cli.json में परिवर्तन करते हैं, तो आपको कॉन्फ़िगरेशन परिवर्तन लेने के लिए एनजी सेवा को फिर से शुरू करना होगा।"

संदर्भ:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

— ninetiger
स्रोत

0

एक और बहुत अच्छा विकल्प कंकाल कोणीय 2/4 + बूटस्ट्रैप 4 का उपयोग करना है

1) ज़िप डाउनलोड करें और ज़िप फ़ोल्डर निकालें

2) एनजी सर्व करें

— Janka
स्रोत