วิธีใช้ Bootstrap ในโครงการแองกูลาร์

ฉันเริ่มแอปพลิเคชันAngularแรกของฉันและการตั้งค่าพื้นฐานของฉันเสร็จสิ้น

ฉันจะเพิ่มBootstrapในแอปพลิเคชันของฉันได้อย่างไร

หากคุณสามารถยกตัวอย่างแล้วมันจะเป็นความช่วยเหลือที่ดี

ให้คุณใช้เชิงมุม-CLIในการสร้างโครงการใหม่มีวิธีที่จะทำให้บูตสามารถเข้าถึงได้ในอีกเชิงมุม 2/4

1. ผ่านอินเตอร์เฟสบรรทัดคำสั่งนำทางไปยังโฟลเดอร์โครงการ จากนั้นใช้NPM
   $ npm install --save bootstrapในการติดตั้งบูต: --saveตัวเลือกที่จะทำให้บูตปรากฏในการอ้างอิง
2. แก้ไขไฟล์ .angular-cli.json ซึ่งกำหนดค่าโครงการของคุณ มันอยู่ในไดเรกทอรีโครงการ เพิ่มการอ้างอิงไปยัง"styles"อาร์เรย์ การอ้างอิงต้องเป็นพา ธ สัมพัทธ์กับไฟล์ bootstrap ที่ดาวน์โหลดด้วย npm ในกรณีของฉันมันคือ:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

ตัวอย่างของฉัน. triangle-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": {}
  }
}

ตอนนี้ bootstrap ควรเป็นส่วนหนึ่งของการตั้งค่าเริ่มต้นของคุณ

การบูรณาการกับ Angular2 ยังสามารถใช้ได้ผ่านทางNG2-บูตโครงการ: 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 {
}

สิ่งที่คุณต้องทำคือเพิ่ม boost css ไว้ในไฟล์ index.html ของคุณ

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

อีกทางเลือกที่ดี (ดีกว่า) คือการใช้ชุดเครื่องมือที่สร้างขึ้นโดยทีม angular-ui: https://ng-bootstrap.github.io

หากคุณวางแผนที่จะใช้ Bootstrap 4 ซึ่งจำเป็นสำหรับทีมng-bootstrapของ angular-ui ที่กล่าวถึงในหัวข้อนี้คุณจะต้องใช้สิ่งนี้แทน (หมายเหตุ: คุณไม่จำเป็นต้องรวมไฟล์ JS):

  <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';

ตัวเลือกที่ได้รับความนิยมมากที่สุดคือการใช้ไลบรารี่ของบุคคลที่สามที่แจกจ่ายเป็นแพคเกจ npm เช่นโครงการ ng2-bootstrap https://github.com/valor-software/ng2-bootstrapหรือ Angular UI Bootstrap

ฉันใช้ ng2-bootstrap เป็นการส่วนตัว มีหลายวิธีในการกำหนดค่าเนื่องจากการกำหนดค่าขึ้นอยู่กับการสร้างโครงการเชิงมุมของคุณ ภายใต้ฉันโพสต์การกำหนดค่าตัวอย่างตามโครงการ Angular 2 QuickStart https://github.com/angular/quickstart

ประการแรกเราเพิ่มการอ้างอิงใน package.json ของเรา

    { ...
"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"
  },
... }

จากนั้นเราต้องจับคู่ชื่อกับ URL ที่ถูกต้องใน systemjs.config.js

(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);

เราต้องนำเข้าไฟล์ bootstrap .css ใน index.html เราสามารถหาได้จากไดเร็กทอรี / node_modules / bootstrap บนฮาร์ดไดรฟ์ของเรา (เพราะเราได้เพิ่มการพึ่งพา bootstrap 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.module.ts จากไดเรกทอรี / app

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.component.ts ของเราจาก / app ไดเรกทอรี

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

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

export class AppComponent {

    constructor() { }

}

จากนั้นเราต้องติดตั้ง bootstrap และ ng2-bootstrap ของเราก่อนที่เราจะเปิดแอพของเรา เราควรไปที่ไดเรกทอรีโครงการและประเภทของเรา

npm install

ในที่สุดเราก็สามารถเริ่มแอพของเราได้

npm start

มีตัวอย่างโค้ดจำนวนมากในโครงการ ng2-bootstrap github แสดงวิธีนำเข้า ng2-bootstrap ไปยังโปรเจ็กต์ Angular 2 ที่หลากหลาย แม้มีตัวอย่าง plnkr นอกจากนี้ยังมีเอกสาร API เกี่ยวกับเว็บไซต์ Valor-software (ผู้แต่งห้องสมุด)

ในสภาพแวดล้อมเชิงมุมวิธีที่ตรงไปตรงมาที่สุดที่ฉันพบคือ:

1. การแก้ปัญหาในสภาพแวดล้อมที่มีสไตล์ชีท s̲c̲s̲s

npm install bootstrap-sass —save

ใน style.scss:

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

หมายเหตุ 1: ~ตัวละครเป็นการอ้างอิงไปยังโฟลเดอร์nodes_modules
Note2: ในขณะที่เรากำลังใช้ scss เราสามารถปรับแต่งตัวแปร boostrap ทั้งหมดที่เราต้องการ

2. โซลูชันในสภาพแวดล้อมที่มีสไตล์ชีทของ

npm install bootstrap —save

ใน style.css:

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

มีหลายวิธีในการกำหนดค่า angular2 ด้วย Bootstrap ซึ่งเป็นหนึ่งในวิธีที่สมบูรณ์แบบที่สุดในการใช้ประโยชน์มากที่สุดคือการใช้ ng-bootstrap โดยใช้การกำหนดค่านี้เราให้ algular2 ควบคุม DOM ของเราอย่างสมบูรณ์โดยไม่จำเป็นต้องใช้ JQuery และ Boostrap .js

1- ใช้เป็นจุดเริ่มต้นของโครงการใหม่ที่สร้างด้วย Angular-CLI และใช้บรรทัดคำสั่งติดตั้ง ng-bootstrap:

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

หมายเหตุ: ข้อมูลเพิ่มเติมที่https://ng-bootstrap.github.io/#/getting-started

2- จากนั้นเราต้องติดตั้ง bootstrap สำหรับ css และระบบกริด

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

หมายเหตุ: ข้อมูลเพิ่มเติมที่https://getbootstrap.com/docs/4.0/getting-started/download/

ตอนนี้เรามีการตั้งค่าสภาพแวดล้อมและการที่เราต้องเปลี่ยน. triangle-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"
      }
    }
  ]

ขั้นตอนต่อไปคือการเพิ่มโมดูล ng-boostrap ในโครงการของเราเพื่อให้เราต้องเพิ่มใน app.module.ts:

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

จากนั้นเพิ่มโมดูลใหม่ไปยังแอปพลิเคชัน: NgbModule.forRoot ()

ตัวอย่าง:

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

ตอนนี้เราสามารถเริ่มใช้ bootstrap4 ในโครงการ angular2 / 5 ของเรา

ฉันมีคำถามเดียวกันและพบบทความนี้ด้วยโซลูชั่นที่สะอาดจริงๆ:

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

นี่คือคำแนะนำ แต่ด้วยโซลูชันที่เรียบง่ายของฉัน:

ติดตั้ง Bootstrap 4 ( คำแนะนำ ):

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

หากจำเป็นให้เปลี่ยนชื่อsrc / styles.cssของคุณเป็นstyles.scssและอัปเดต . angular-cli.jsonเพื่อแสดงถึงการเปลี่ยนแปลง:

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

จากนั้นเพิ่มบรรทัดนี้ในstyles.scss :

@import '~bootstrap/scss/bootstrap';

เพียงตรวจสอบไฟล์ package.json ของคุณและเพิ่มการพึ่งพาสำหรับ bootstrap

"dependencies": {

   "bootstrap": "^3.3.7",
}

จากนั้นเพิ่มรหัสด้านล่างใน.angular-cli.jsonไฟล์

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

ในที่สุดคุณก็แค่อัพเดต npm ของคุณในเครื่องโดยใช้เทอร์มินัล

$ npm update

1. npm ติดตั้ง - บันทึก bootstrap

2. ไปที่ -> ไฟล์angular-cli.jsonค้นหาคุณสมบัติของสไตล์และเพิ่ม sting ถัดไป: "../node_modules/bootstrap/dist/css/bootstrap.min.css", มันอาจจะเป็นแบบนี้:

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

ขั้นตอนกับ Angular 6+ และ Bootstrap 4+:

1. เปิดเปลือกในโฟลเดอร์ของโครงการของคุณ
2. ติดตั้ง bootstrap ด้วยคำสั่ง: npm install --save bootstrap@4.1.3
3. Bootstrap ต้องการ jQuery ที่ขึ้นต่อกันดังนั้นถ้าคุณไม่มีคุณสามารถติดตั้งได้ด้วยคำสั่ง: npm install --save jquery 1.9.1
4. คุณอาจต้องแก้ไขช่องโหว่ด้วยคำสั่ง: npm audit fix
5. ในไฟล์ style.scss หลักของคุณเพิ่มบรรทัดต่อไปนี้: @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">

ฉันกำลังมองหาคำตอบเดียวกันและในที่สุดก็พบลิงค์นี้ คุณสามารถค้นหาคำอธิบายได้สามวิธีในการเพิ่ม bootstrap css ในโปรเจค angular 2 ของคุณ มันช่วยฉัน

นี่คือลิงค์: http://codingthesmartway.com/using-bootstrap-with-angular/

คำแนะนำของฉันจะแทนที่จะประกาศใน json stylus เพื่อวางไว้ใน scss เพื่อให้ทุกอย่างรวบรวมและในที่เดียว

1) ติดตั้ง bootstrap ด้วย npm

 npm install bootstrap

2) ประกาศ bootstrap npm ใน css ด้วยสไตล์ของเรา

สร้าง_bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) ภายในสไตล์. cscs เราใส่

@import "bootstrap-custom";

ดังนั้นเราจะรวบรวมแกนทั้งหมดของเราและรวมไว้ในที่เดียว

คุณสามารถลองใช้ไลบรารี Prettyfox UI ได้ที่http://ng.prettyfox.org

ไลบรารีนี้ใช้ bootstrap 4 style และไม่ต้องการ jquery

เพิ่มบรรทัดต่อไปนี้ในหน้า 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">

หากคุณใช้มุมเชิงมุมหลังจากเพิ่ม bootstrap ใน package.json และติดตั้งแพคเกจสิ่งที่คุณต้องมีก็คือเพิ่ม boostrap.min.css ในส่วน "สไตล์" ของ .angular-cli.json

สิ่งสำคัญสิ่งหนึ่งคือ "เมื่อคุณทำการเปลี่ยนแปลงกับ. triangle-cli.json คุณจะต้องเริ่มการทำงานของ ng เพื่อรับการเปลี่ยนแปลงการกำหนดค่าอีกครั้ง"

Ref:

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

อีกทางเลือกที่ดีมากคือการใช้โครงกระดูก Angular 2/4 + Bootstrap 4

1) ดาวน์โหลด ZIP และแตกไฟล์ zip

2) รับใช้