เราต้องการใช้ bootstrap 4 (4.0.0-alpha.2) ในแอพของเราที่สร้างขึ้นด้วย angular-cli 1.0.0-beta.5 (w / node v6.1.0)

หลังจากรับ bootstrap และการขึ้นต่อกันด้วย npm แนวทางแรกของเราประกอบด้วยการเพิ่มใน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(ประหลาดใจ!)

เรามีจุดประสงค์ในการจัดการสถานการณ์ดังกล่าว (เช่นการโหลดสคริปต์ bootstrap) ในโครงการที่สร้างด้วย angular-cli อย่างไร

เรามีความคิดต่อไปนี้ แต่เราไม่รู้จริงๆว่าจะไปทางไหน ...

• ใช้ CDN หรือไม่ แต่เราต้องการให้บริการไฟล์เหล่านี้เพื่อรับประกันว่าจะสามารถใช้งานได้

• คัดลอกการอ้างอิงไปdist/vendorหลังจากที่เราng build -prod? แต่ดูเหมือนว่าสิ่งที่ควรจะให้ angi-cli เพราะ 'ดูแล' ส่วนสร้าง?

• เพิ่ม jquery, bootstrap และ tether in src/system-config.tsและดึงมันเข้าไปในมัดของเราmain.tsหรือไม่? แต่ดูเหมือนว่าผิดเพราะเราจะไม่ใช้มันอย่างชัดเจนในโค้ดแอปพลิเคชันของเรา

UPDATE สำคัญ: NG2-บูตจะถูกแทนที่โดยขณะนี้NGX-บูต

ngx-bootstrapรองรับทั้ง Angular 3 และ 4

อัปเดต: 1.0.0-beta.11-webpack หรือเวอร์ชันที่สูงกว่า

ก่อนอื่นตรวจสอบเวอร์ชันเชิงมุมของคุณด้วยคำสั่งต่อไปนี้ในเทอร์มินัล:

ng -v

หากเวอร์ชันเชิงมุมของคุณมากกว่า1.0.0-beta.11-webpackคุณควรทำตามขั้นตอนเหล่านี้:

1. ติดตั้งngx-bootstrapและbootstrap :

   npm install ngx-bootstrap bootstrap --save

บรรทัดนี้ติดตั้ง Bootstrap 3 ทุกวันนี้ แต่สามารถติดตั้ง Bootstrap 4 ได้ในอนาคต โปรดทราบ ngx-bootstrapรองรับทั้งสองเวอร์ชัน

2. เปิดsrc / app / app.module.tsและเพิ่ม:

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

3. เปิดangular-cli.json (สำหรับชื่อไฟล์ angular6 และต่อมาเปลี่ยนเป็นangular.json ) และแทรกรายการใหม่ลงในstylesอาร์เรย์:

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

4. เปิดsrc / app / app.component.htmlและเพิ่ม:

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

1.0.0-beta.10 หรือรุ่นต่ำกว่า:

และหากเวอร์ชันเชิงมุมของคุณเป็น1.0.0-beta.10หรือต่ำกว่าคุณสามารถใช้ขั้นตอนด้านล่าง

ก่อนอื่นให้ไปที่ไดเรกทอรีโครงการและประเภท:

npm install ngx-bootstrap --save

จากนั้นเปิดangular-cli-build.js ของคุณและเพิ่มบรรทัดนี้:

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

ค้นหาคำสำคัญ> การติดตั้งห้องสมุดทั่วโลกในhttps://github.com/angular/angular-cliช่วยให้คุณค้นหาคำตอบ

ตามเอกสารคุณสามารถทำตามขั้นตอนต่อไปนี้เพื่อเพิ่มห้องสมุด Bootstrap

ติดตั้ง Bootstrap เป็นครั้งแรกตั้งแต่ npm:

npm install bootstrap@next

จากนั้นเพิ่มไฟล์สคริปต์ที่จำเป็นลงในแอพ [0] .scripts ในไฟล์ angular-cli.json:

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

ในที่สุดเพิ่ม Bootstrap CSS ในแอพ [0]. อาร์เรย์สไตล์:

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

รีสตาร์ท ng ให้บริการหากคุณใช้งานและ Bootstrap 4 ควรทำงานบนแอปของคุณ

นี่เป็นทางออกที่ดีที่สุด แต่ถ้าคุณไม่รีสตาร์ท ng ให้บริการมันจะไม่ทำงาน ขอแนะนำอย่างยิ่งให้ทำสิ่งสุดท้ายนี้

ทำดังต่อไปนี้:

npm i bootstrap@next --save

สิ่งนี้จะเพิ่ม bootstrap 4 ให้กับโครงการของคุณ

ถัดไปไปที่ไฟล์src/style.scssหรือของคุณsrc/style.css(เลือกสิ่งที่คุณกำลังใช้) และนำเข้า bootstrap ที่นั่น:

สำหรับ style.css

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

สำหรับ style.scss

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

สำหรับสคริปต์คุณจะต้องเพิ่มไฟล์ในไฟล์ angular-cli.json เช่นนี้ ( ใน Angular เวอร์ชัน 6 การแก้ไขนี้ต้องทำในไฟล์angular.json ) :

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

ตอนแรกคุณต้องติดตั้ง tether, jquery และ bootstrap ด้วยคำสั่งเหล่านี้

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

หลังจากเพิ่มบรรทัดเหล่านี้ในไฟล์ angular-cli.json (angular.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"
  ]

เนื่องจากไม่มีใครพูดถึงเรื่องราวอย่างเป็นทางการของทีม (angular-cli) เกี่ยวกับวิธีรวม Bootstrap เลย: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

รวมBootstrap

Bootstrapเป็นเฟรมเวิร์ก CSS ที่เป็นที่นิยมซึ่งสามารถใช้ภายในโครงการ Angular คู่มือนี้จะแนะนำคุณเกี่ยวกับการเพิ่ม bootstrap ให้กับโครงการ Angular CLI ของคุณและกำหนดค่าให้ใช้ bootstrap

ใช้ CSS

เริ่มต้นใช้งาน

สร้างโครงการใหม่และนำทางไปยังโครงการ

ng new my-app
cd my-app

การติดตั้ง Bootstrap

ด้วยโปรเจ็กต์ใหม่ที่สร้างขึ้นและพร้อมคุณจะต้องติดตั้ง bootstrap ในโปรเจ็กต์ของคุณเป็นการพึ่งพา การใช้--saveตัวเลือกการพึ่งพาจะถูกบันทึกไว้ใน package.json

# version 3.x
npm install bootstrap --save

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

การกำหนดค่าโครงการ

ในตอนนี้โครงการได้รับการตั้งค่าแล้วจะต้องกำหนดค่าให้รวม bootstrap CSS

• เปิดไฟล์.angular-cli.jsonจากรูทของโครงการของคุณ
• ภายใต้คุณสมบัติappsรายการแรกในอาร์เรย์นั้นคือแอปพลิเคชันเริ่มต้น
• มีคุณสมบัติstylesที่อนุญาตให้ใช้สไตล์โกลบอลภายนอกกับแอปพลิเคชันของคุณ
• ระบุเส้นทางไปยัง 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

การติดตั้ง Bootstrap

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

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

การกำหนดค่าโครงการ

สร้างไฟล์ที่ว่างเปล่าใน_variables.scsssrc/

หากคุณกำลังใช้อยู่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;

กลับเบราว์เซอร์เพื่อดูสีแบบอักษรที่เปลี่ยนไป

อัปเดต v1.0.0-beta.26

คุณสามารถดูเอกสารสำหรับวิธีการใหม่สำหรับการนำเข้า bootstrap ที่นี่

หากยังใช้งานไม่ได้ให้รีสตาร์ทด้วยคำสั่ง ng เสิร์ฟ

1.0.0 หรือรุ่นต่ำกว่า:

ในไฟล์ index.html ของคุณคุณเพียงต้องการลิงค์ bootstrap css (ไม่จำเป็นต้องมีสคริปต์ js)

<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-bootstrapในmy_project / src / system-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'
  }
};

และในmy_project / angular-cli-build.js:

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

อย่าลืมคำสั่งนี้เพื่อให้โมดูลของคุณในผู้ขาย:

ng build

เพื่อนำเข้าจากโมดูลอื่นที่เป็นหลักการเดียวกัน

ฉันเดาว่าวิธีการข้างต้นเปลี่ยนไปหลังจากการเปิดตัวลองดูที่ลิงค์นี้

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

ติดตั้ง ng-bootstrap และ bootstrap

npm install ng2-bootstrap bootstrap --save

เปิด src / app / app.module.ts และเพิ่ม

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

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

เปิด angular-cli.json และแทรกรายการใหม่ลงในอาร์เรย์สไตล์

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

เปิด src / app / app.component.html และทดสอบงานทั้งหมดโดยการเพิ่ม

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

ขั้นตอนสำหรับ Bootstrap 4 ใน Angular 5

1. สร้างโครงการเชิงมุม 5

   ใหม่ new AngularBootstrapTest

2. ย้ายไปยังไดเรกทอรีโครงการ

   cd AngularBootstrapTest

3. ดาวน์โหลด bootstrap

   npm ติดตั้ง bootstrap

4. เพิ่ม Bootstrap ให้กับโครงการ

   4.1 open .angular-cli.json

   4.2 ค้นหาส่วน "สไตล์" ใน json

   4.3 เพิ่มเส้นทาง bootstrap css ดังนี้

   .

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

ตอนนี้คุณได้เพิ่ม bootstrap css ในโปรเจค angular 5 สำเร็จแล้ว

ทดสอบบูตสแตรป

5. เปิด src/app/app.component.html
6. เพิ่มองค์ประกอบปุ่ม bootstrap

.

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

คุณสามารถดูรูปแบบปุ่มได้ที่นี่ ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. บันทึกไฟล์

8. ดำเนินโครงการ

   ng เสิร์ฟ - เปิด

ตอนนี้คุณจะเห็นปุ่มสไตล์บูตในหน้า

หมายเหตุ: หากคุณเพิ่มเส้นทางบู๊ตสแตรปหลังจากรับบริการ ngคุณต้องหยุดและรันบริการซ้ำเพื่อสะท้อนการเปลี่ยนแปลง

ตั้งแต่นี้กลายเป็นความสับสนและคำตอบที่นี่ผสมทั้งหมดฉันจะแนะนำไปกับทีม ui อย่างเป็นทางการสำหรับ repo BS4 (ใช่มี repos เหล่านั้นมากมายสำหรับ NG-Bootstrap

เพียงทำตามคำแนะนำที่นี่https://github.com/ng-bootstrap/ng-bootstrapเพื่อรับ BS4

การอ้างอิงจาก lib:

ไลบรารีนี้ถูกสร้างขึ้นตั้งแต่ต้นโดยทีม ui-bootstrap เราใช้ TypeScript และกำหนดเป้าหมายเฟรมเวิร์ก CSS ของ Bootstrap 4

เช่นเดียวกับ Bootstrap 4 ไลบรารีนี้กำลังดำเนินการอยู่ โปรดตรวจสอบรายการปัญหาของเราเพื่อดูทุกสิ่งที่เรากำลังดำเนินการ รู้สึกอิสระที่จะแสดงความคิดเห็นที่นั่น

เพียงคัดลอกวางสิ่งที่มีเพื่อประโยชน์ของมัน:

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

เมื่อติดตั้งแล้วคุณจะต้องนำเข้าโมดูลหลักของเรา:

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

ส่วนที่เหลือเพียงอย่างเดียวคือการแสดงรายการโมดูลที่นำเข้าในโมดูลแอปพลิเคชันของคุณ วิธีที่แน่นอนจะแตกต่างกันเล็กน้อยสำหรับโมดูลรูท (ระดับบนสุด) ซึ่งคุณควรท้ายด้วยโค้ดที่คล้ายกับ (สังเกต NgbModule.forRoot ()):

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

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

โมดูลอื่น ๆ ในแอปพลิเคชันของคุณสามารถนำเข้า NgbModule ได้ง่ายๆ:

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

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

นี่เป็นพฤติกรรมที่สอดคล้องกันมากที่สุด

1. ติดตั้ง bootstrap

   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. เพิ่ม bootstrap.css ไปที่ code style.scss ของคุณ

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

4. รีสตาร์ทเซิร์ฟเวอร์ภายในเครื่องของคุณ

ทำตามขั้นตอนต่อไปนี้:

1. npm install --save bootstrap

2. และใน. triangle-cli.json ของคุณให้เพิ่มในส่วนสไตล์:

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

หลังจากนั้นคุณต้องรีสตาร์ท ng บริการของคุณ

สนุก

1. ติดตั้ง Bootstrap โดยใช้ npm

   npm install bootstrap

2. ติดตั้ง Popper.js

npm install --save popper.js

3. ไปที่angular.jsonใน Angular 6 project / .angular-cli.jsonใน Angular 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"
        ]

ลองสิ่งนี้

npm install bootstrap@next

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

คุณยังสามารถดูวิดีโอนี้โดย Mike Brocchi ซึ่งมีข้อมูลที่เป็นประโยชน์เกี่ยวกับวิธีเพิ่ม bootstrap ให้กับโครงการที่สร้างโดย Angular-Cli https://www.youtube.com/watch?v=obbdFFbjLIU (ประมาณนาที 13:00)

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

เปิด Terminal / พรอมต์คำสั่งในไดเรกทอรีโครงการที่เกี่ยวข้องและพิมพ์คำสั่งต่อไปนี้

npm install --save bootstrap

จากนั้นเปิดไฟล์ .angular-cli.json, ค้นหา

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

เปลี่ยนเป็น

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

ทุกอย่างเสร็จเรียบร้อย.

ขณะนี้ด้วยng-bootstrap 1.0.0-beta.5เวอร์ชันใหม่รองรับคำสั่ง Angular ส่วนใหญ่โดยอิงตามมาร์กอัปและ CSS ของ Bootstrap

bootstrapพึ่งพาเฉพาะที่จำเป็นในการทำงานกับนี้คือ ไม่จำเป็นต้องใช้การพึ่งพาjqueryและpopper.js

ng-bootstrap คือการแทนที่การใช้งาน JavaScript อย่างสมบูรณ์สำหรับส่วนประกอบ ดังนั้นคุณไม่จำเป็นต้องรวมbootstrap.min.jsไว้ในส่วนสคริปต์ใน. triangle-cli.json ของคุณ

ทำตามขั้นตอนเหล่านี้เมื่อคุณรวม bootstrap กับโครงการที่สร้างขึ้นด้วย angular-cli เวอร์ชันล่าสุด

• รวมไว้bootstrap.min.cssใน .angular-cli.json ของคุณในส่วนของสไตล์

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

• ติดตั้งการพึ่งพาng-bootstrap

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

• เพิ่มไปยังคลาสโมดูลหลักของคุณ

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

• รวมสิ่งต่อไปนี้ในส่วนการนำเข้าโมดูลหลักของคุณ

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

• ทำสิ่งต่อไปนี้ในโมดูลย่อยของคุณหากคุณจะใช้ส่วนประกอบ ng-bootstrap ภายในคลาสโมดูลเหล่านั้น

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

• ตอนนี้โปรเจ็กต์ของคุณพร้อมที่จะใช้คอมโพเนนต์ ng-bootstrap ที่มีอยู่

1. ติดตั้ง bootstrap, popper.js

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

3. ในsrc / styles.cssนำเข้าสไตล์ของ bootstrap

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

ขั้นตอนที่ 1:
npm install bootstrap@latest --save-dev นี่จะติดตั้ง bootstrap เวอร์ชันล่าสุดอย่างไรก็ตามสามารถติดตั้งเวอร์ชั่นที่ระบุได้โดยเพิ่มหมายเลขเวอร์ชัน

ขั้นที่ 2: เปิด styles.css และเพิ่มรายการต่อไปนี้ @import "~bootstrap/dist/css/bootstrap.css"

สำหรับการเพิ่ม Bootstrap และ Jquery

npm install bootstrap@3 jquery --save

หลังจากรันคำสั่งนี้โปรดไปข้างหน้าและตรวจสอบโฟลเดอร์ node_modules ของคุณคุณควรจะเห็น bootstrap และ jquery เพิ่มเข้าไป

angular-cliตอนนี้มีหน้าวิกิเฉพาะซึ่งคุณสามารถค้นหาทุกสิ่งที่คุณต้องการ TLDR ติดตั้งbootstrapผ่านnpmและเพิ่มลิงค์สไตล์ในส่วน "สไตล์" ใน.angular-cli.jsonไฟล์ของคุณ

ตัวอย่างการทำงานในกรณีที่ใช้ angular-cli และ css:

1. ติดตั้ง bootstrap

npm ติดตั้ง bootstrap tether jquery --save

2. เพิ่มไปยัง .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"
  ],

ติดตั้ง Boostrap โดยใช้ NPM

npm install boostrap@next --save

จากนั้นตรวจสอบโฟลเดอร์ node_modules ของคุณเพื่อหาไฟล์ boostrap.css (ในระยะไกล) โดยปกติเส้นทางคือ

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

เพิ่มเส้นทางนี้ นำเข้า boostrap ภายใน style.css หรือ style.scss

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

แค่นั้นแหละ.

เรียกใช้คำสั่งต่อไปนี้ภายในโครงการ

npm install --save @bootsrap@4

และถ้าคุณได้รับการยืนยันเช่นนี้

+ bootstrap@4.1.3
updated 1 package in 8.245s

หมายความว่าติดตั้ง Boostrap 4 สำเร็จแล้ว อย่างไรก็ตามในการใช้งานคุณจะต้องอัปเดตอาร์เรย์ "สไตล์" ภายใต้ไฟล์ angular.json

อัปเดตด้วยวิธีต่อไปนี้เพื่อให้ bootstrap สามารถแทนที่สไตล์ที่มีอยู่ได้

"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จากนั้นคุณสามารถใช้ Boostrap ได้ดี

ไม่เห็นอันนี้ที่นี่:

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

ฉันเพิ่งเพิ่มบรรทัดนี้ใน style.scss ในกรณีของฉันฉันยังต้องการแทนที่ตัวแปร bootstrap

หากคุณเพิ่งเริ่มต้นด้วย angular และ bootstrap คำตอบง่ายๆจะอยู่ด้านล่างขั้นตอน: 1. เพิ่มโหนดแพ็คเกจของ bootstrap เป็นการพึ่งพา dev

npm install --save bootstrap

2. นำเข้า bootstrap stylessheet ในไฟล์ angular.json

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

3. และคุณพร้อมที่จะใช้ bootstrap สำหรับใส่สไตล์ตาราง ฯลฯ

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

ส่วนที่ดีที่สุดของสิ่งนี้ที่ฉันพบคือเรากำลังกำกับโดยใช้ bootstrap โดยไม่ต้องพึ่งพาโมดูลบุคคลที่สาม เราสามารถอัพเกรด bootstrap ได้ทุกเวลาโดยเพียงแค่อัพเดทคำสั่งnpm install --save bootstrap@4.4ฯลฯ

คุณมีหลายวิธีในการเพิ่ม Bootstrap 4 ในโครงการแองกูลาร์ของคุณ :

• รวมถึงไฟล์ Bootstrap CSS และ JavaScript ในส่วนของไฟล์ index.html ของโครงการเชิงมุมด้วย a และแท็ก

• การอิมพอร์ตไฟล์ Bootstrap CSS ในไฟล์ global styles.css ของโครงการ Angular ของคุณด้วยคำสำคัญ @import

• การเพิ่มไฟล์ Bootstrap CSS และ JavaScript ในสไตล์และสคริปต์อาร์เรย์ของไฟล์ angular.json ของโครงการของคุณ

เรียกใช้คำสั่งนี้

npm install bootstrap@3

คุณ Angular.json

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

คุณสามารถติดตั้ง bootstrap ในมุมโดยใช้npm install bootstrapคำสั่ง

และเส้นทางการตั้งค่า bootstrap ถัดไปในangular.jsonไฟล์และstyle.cssไฟล์

คุณสามารถอ่านบล็อกเต็มเกี่ยวกับวิธีการติดตั้งและการตั้งค่า bootstrap ในเชิงมุมคลิกที่นี่เพื่ออ่านบล็อกเต็มเกี่ยวกับเรื่องนี้

ตัวอย่างการทำงานในกรณีที่ใช้ angular-cli:

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

ใช้งานได้กับ css และ scss Bootstrap v3 และ v4 พร้อมใช้งาน

ข้อมูลเพิ่มเติมเกี่ยวกับบูต-แผนงานโปรดหาที่นี่