ฉันเป็นนักพัฒนาแบ็กเอนด์และฉันแค่เล่นกับ Angular4 ดังนั้นผมจึงไม่ได้ติดตั้งการกวดวิชานี้: https://www.youtube.com/watch?v=cdlbFEsAGXo
ด้วยเหตุนี้ฉันจะเพิ่ม bootstrap ลงในแอปได้อย่างไรเพื่อให้ฉันสามารถใช้คลาส "container-fluid" หรือ "col-md-6" และอะไรทำนองนั้นได้
คำตอบ:
npm install --save bootstrapหลังจากนั้นภายใน angular-cli.json (ภายในโฟลเดอร์รูทของโปรเจ็กต์) ค้นหาstylesและเพิ่มไฟล์ bootstrap css ดังนี้:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],UPDATE:
ในเชิงมุม 6+ angular-cli.json เปลี่ยนเป็นangular.json.
../node_modules [...]? /node_modules [...]สำหรับผมมันควรจะเป็นเพียงแค่
./srcสัมพันธ์กับรูทของแอป หากการตั้งค่าของคุณแตกต่างออกไปคุณสามารถปรับเส้นทางได้อย่างถูกต้อง
ดูวิดีโอหรือทำตามขั้นตอน
ติดตั้ง bootstrap 4 ในเชิงมุม 2 / เชิงมุม 4 / เชิงมุม 5 / เชิงมุม 6
มีสามวิธีในการรวม bootstrap ในโปรเจ็กต์ของคุณ
1) เพิ่ม CDN Link ในไฟล์ index.html
2) ติดตั้ง bootstrap โดยใช้ npm และกำหนด path ในangular.json แนะนำ
3) ติดตั้ง bootstrap โดยใช้ npm และกำหนด path ในไฟล์ index.html
ฉันแนะนำให้คุณทำตาม 2 วิธีที่ติดตั้ง bootstrap โดยใช้ npm เนื่องจากติดตั้งในไดเรกทอรีโครงการของคุณและคุณสามารถเข้าถึงได้อย่างง่ายดาย
วิธีที่ 1
เพิ่มเส้นทาง Bootstrap, Jquery และ popper.js CDN ไปยังไฟล์ index.html โครงการเชิงมุมของคุณ
Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js
วิธีที่ 2
1) ติดตั้ง bootstrap โดยใช้ npm
npm install bootstrap --saveหลังจากการติดตั้ง Bootstrap 4 เราต้องการแพ็คเกจจาวาสคริปต์เพิ่มเติมอีกสองแพ็คเกจนั่นคือ Jquery และ Popper.js หากไม่มีการบูตแพ็กเกจทั้งสองนี้จะไม่สมบูรณ์เนื่องจาก Bootstrap 4 ใช้แพ็คเกจ Jquery และ popper.js ดังนั้นเราจึงต้องติดตั้งด้วย
2) ติดตั้ง JQUERY
npm install jquery --save3) ติดตั้ง Popper.js
npm install popper.js --saveตอนนี้ Bootstrap ติดตั้งบน Project Directory ของคุณภายในnode_modules Folder
open angular.jsonไฟล์นี้มีอยู่ในไดเร็กทอรีเชิงมุมของคุณเปิดไฟล์นั้นและเพิ่มเส้นทางของไฟล์ bootstrap, jquery และ popper.js ภายในสไตล์ []และสคริปต์ []พา ธ ดูตัวอย่างด้านล่าง
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],หมายเหตุ:อย่าเปลี่ยนลำดับของไฟล์ js ควรเป็นแบบนี้
วิธีที่ 3
ติดตั้ง bootstrap โดยใช้ npm ทำตามวิธีที่ 2ในวิธีที่ 3 เราเพิ่งตั้งค่าเส้นทางภายในไฟล์ index.html แทนไฟล์angular.json
bootstrap.css
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css">Jquery.js
<script src="node_modules/jquery/dist/jquery.min.js"><br>Bootstrap.js
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>Popper.js
<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>ตอนนี้ Bootstrap ทำงานได้ดีตอนนี้
ในการกำหนดค่า / รวม / ใช้ Bootstrap ในเชิงมุมก่อนอื่นเราต้องติดตั้งแพ็คเกจ Bootstrap โดยใช้ npm
$ npm install bootstrap@4.0.0-alpha.6 --save // for specific version
or
$ npm install bootstrap --save // for latest versionหมายเหตุ: - คำสั่งบันทึกจะบันทึกการอ้างอิงในแอปเชิงมุมของเราภายในไฟล์ package.json
ตอนนี้เราได้ติดตั้งแพ็คเกจตามขั้นตอนข้างต้นแล้วตอนนี้เราสามารถบอก Angular CLI ได้แล้วว่าต้องโหลดสไตล์เหล่านี้โดยใช้ตัวเลือกใด ๆ ด้านล่างหรือทั้งสองอย่าง:
เราสามารถเพิ่มการอ้างอิงดังที่แสดงด้านล่าง:
@import "~bootstrap/dist/css/bootstrap.min.css";เราสามารถเพิ่มไฟล์ style css ลงในไฟล์ angular-cli.json หรือ angular.json ซึ่งอยู่ที่โฟลเดอร์รูทของแอพเชิงมุมของเราดังที่แสดงด้านล่าง:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]ขั้นแรกให้ติดตั้งbootstrapในโครงการของคุณโดยใช้คำสั่งด้านล่าง:
npm install --save bootstrap
จากนั้นเพิ่มบรรทัดนี้"../node_modules/bootstrap/dist/css/bootstrap.min.css"
ในไฟล์ angular-cli.json (โฟลเดอร์รูท) ในรูปแบบ
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],หลังจากติดตั้งการอ้างอิงข้างต้นแล้วให้ติดตั้งng-bootstrapผ่าน:
npm install --save @ng-bootstrap/ng-bootstrap
เมื่อติดตั้งแล้วคุณต้องนำเข้าโมดูลหลัก
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';หลังจากนี้คุณสามารถใช้วิดเจ็ต Bootstrap ทั้งหมด (เช่น carousel, modal, popovers, tooltips, tabs เป็นต้น) และสารพัดเพิ่มเติมอีกมากมาย (datepicker, rating, timepicker, typeahead)
ในAngular4เมื่อคุณจัดการกับระบบ@typesคุณควรทำสิ่งต่อไปนี้
ทำ,
1) npm install --save @types/jquery
2) npm install --save @types/bootstraptsconfig.json
ค้นหาอาร์เรย์ประเภทและเพิ่มรายการjqueryและbootstrap
"types": [
"jquery",
"bootstrap",
"node"
]Index.html
ในส่วนหัวเพิ่มรายการต่อไปนี้
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>และเริ่มใช้jqueryและbootstrapทั้งคู่
.angular-cli.jsonไฟล์แทนซึ่งบอกให้ Angular รวมกลุ่มกับส่วนที่เหลือและให้บริการแก่ลูกค้า
หากคุณใช้ Sass / Scss ให้ปฏิบัติตามนี้
ทำการติดตั้ง npm
npm install bootstrap --saveและเพิ่มimportคำสั่งลงในไฟล์ sass / scss ของคุณ
@import '~bootstrap/dist/css/bootstrap.css'สำหรับรายละเอียดขั้นตอนด้านล่างและตัวอย่างการทำงานคุณสามารถไปที่ https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
ขั้นตอนรายละเอียดมากพร้อมคำอธิบายที่เหมาะสม
ขั้นตอน: การติดตั้ง Bootstrap จาก NPM
ต่อไปเราต้องติดตั้ง Bootstrap เปลี่ยนไดเร็กทอรีเป็นโปรเจ็กต์ที่เราสร้างขึ้น (cd angular-bootstrap-example) และดำเนินการคำสั่งต่อไปนี้:
สำหรับ Bootstrap 3:
npm install bootstrap --saveสำหรับ Bootstrap 4 (ปัจจุบันอยู่ในรุ่นเบต้า):
npm install bootstrap@next --saveหรือ ทางเลือกอื่น: Local Bootstrap CSS คุณยังสามารถดาวน์โหลด Bootstrap CSS และเพิ่มลงในโปรเจ็กต์ของคุณได้อีกด้วย ฉันไม่ได้โหลด Bootstrap จากเว็บไซต์และสร้างรูปแบบโฟลเดอร์ (ระดับเดียวกับ styles.css):
หมายเหตุ: อย่าวางไฟล์ CSS ในเครื่องของคุณไว้ในโฟลเดอร์ assets เมื่อเราสร้างการผลิตด้วย Angular CLI ไฟล์ CSS ที่ประกาศใน .angular-cli.json จะถูกย่อขนาดและสไตล์ทั้งหมดจะรวมอยู่ในสไตล์เดียว. css โฟลเดอร์ assets จะถูกคัดลอกไปยังโฟลเดอร์ dist ในระหว่างขั้นตอนการสร้าง (โค้ด CSS จะซ้ำกัน) วางไฟล์ CSS ในเครื่องของคุณไว้ใต้เนื้อหาในกรณีที่คุณนำเข้าโดยตรงใน index.html
การนำเข้า CSS 1 เรามีสองตัวเลือกในการนำเข้า CSS จาก Bootstrap ที่ติดตั้งจาก NPM:
ข้อความที่ชัดเจน 1: กำหนดค่า .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]2: นำเข้าโดยตรงใน src / style.css หรือ src / style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';โดยส่วนตัวฉันชอบที่จะนำเข้าสไตล์ทั้งหมดของฉันใน src / style.css เนื่องจากมีการประกาศใน .angular-cli.json แล้ว
3.1 ทางเลือกอื่น: Local Bootstrap CSS หากคุณเพิ่มไฟล์ Bootstrap CSS ไว้ในเครื่องเพียงแค่นำเข้าใน .angular-cli.json
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],หรือ src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';4: Bootstrap คอมโพเนนต์ JavaScript ด้วย ngx-bootstrap (ตัวเลือกที่ 1) ในกรณีที่คุณไม่จำเป็นต้องใช้คอมโพเนนต์ Bootstrap JavaScript (ที่ต้องใช้ JQuery) นี่คือการตั้งค่าทั้งหมดที่คุณต้องการ แต่ถ้าคุณจำเป็นต้องใช้ modals, accordion, datepicker, tooltips หรือส่วนประกอบอื่น ๆ เราจะใช้ส่วนประกอบเหล่านี้โดยไม่ต้องติดตั้ง jQuery ได้อย่างไร?
มี Angular wrapper library สำหรับ Bootstrap ที่เรียกว่า ngx-bootstrap ซึ่งเราสามารถติดตั้งจาก NPM ได้ด้วย:
npm install ngx-bootstrap --saveบันทึก ng2-bootstrap และ ngx-bootstrap เป็นแพ็คเกจเดียวกัน ng2-bootstrap ถูกเปลี่ยนชื่อเป็น ngx-bootstrap หลังจาก #itsJustAngular
ในกรณีที่คุณต้องการติดตั้ง Bootstrap และ ngx-bootstrap พร้อมกันเมื่อคุณสร้างโครงการ Angular CLI ของคุณ:
npm install bootstrap ngx-bootstrap --save4.1: การเพิ่มโมดูล Bootstrap ที่จำเป็นใน app.module.ts
ผ่าน ngx-bootstrap และเพิ่มโมดูลที่จำเป็นใน app.module.ts ของคุณ ตัวอย่างเช่นสมมติว่าเราต้องการใช้ส่วนประกอบ Dropdown, Tooltip และ Modal:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}เนื่องจากเราเรียกเมธอด. forRoot () สำหรับแต่ละโมดูล (เนื่องจากผู้ให้บริการโมดูล ngx-bootstrap) ฟังก์ชันการทำงานจะพร้อมใช้งานในส่วนประกอบและโมดูลทั้งหมดของโปรเจ็กต์ของคุณ (ขอบเขตส่วนกลาง)
อีกทางเลือกหนึ่งหากคุณต้องการจัดระเบียบ ngx-bootstrap ในโมดูลอื่น (สำหรับวัตถุประสงค์ขององค์กรในกรณีที่คุณต้องการนำเข้าโมดูล bs จำนวนมากและไม่ต้องการทำให้แอปของคุณรกโมดูล) คุณสามารถสร้างโมดูลได้ app-bootstrap.module.ts นำเข้าโมดูล Bootstrap (โดยใช้ forRoot ()) และประกาศในส่วนการส่งออก (เพื่อให้สามารถใช้งานได้กับโมดูลอื่น ๆ ด้วย)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}ในที่สุดอย่าลืมนำเข้าโมดูล bootstrap ใน app.module.ts ของคุณ
นำเข้า {AppBootstrapModule} จาก './app-bootstrap/app-bootstrap.module';
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}ngx-bootstrap ทำงานร่วมกับ Bootstrap 3 และ 4 และฉันยังได้ทำการทดสอบบางอย่างและฟังก์ชันส่วนใหญ่ยังทำงานร่วมกับ Bootstrap 2.x (ใช่ฉันยังมีรหัสเดิมที่ต้องดูแล)
หวังว่านี่จะช่วยใครสักคน!
ทดสอบใน Angular 7.0.0
ขั้นตอนที่ 1 - ติดตั้งการอ้างอิงที่จำเป็น
npm ติดตั้ง bootstrap (หากคุณต้องการเวอร์ชันเฉพาะโปรดระบุหมายเลขเวอร์ชัน)
npm ติดตั้ง popper.js (หากคุณต้องการเวอร์ชันที่เฉพาะเจาะจงโปรดระบุหมายเลขเวอร์ชัน)
npm ติดตั้ง jquery
เวอร์ชันที่ฉันได้ลอง:
"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",ขั้นตอนที่ 2: ระบุไลบรารีตามลำดับด้านล่าง angular.json ในเชิงมุมล่าสุดชื่อไฟล์ config คือ angular.json ไม่ใช่ angular-cli.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},สำหรับbootstrap 4.0.0-alph 6
npm install bootstrap@4.0.0-alpha.6 jquery tether --saveจากนั้นหลังจากเสร็จสิ้นให้รัน:
npm installตอนนี้. เปิดไฟล์ . angular-cli.jsonและนำเข้า bootstrap, jquery และ tether:
"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"
]และตอนนี้. คุณพร้อมที่จะไป
อย่างที่ฉันเห็นคุณมีคำตอบมากมาย แต่คุณสามารถลองใช้วิธีนี้ได้
แนวทางปฏิบัติที่ดีที่สุดที่จะไม่ใช้ jquery ในเชิงมุมฉันชอบhttps://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.mdวิธีการติดตั้ง bootstrap โดยไม่ต้องใช้ bootstrap ส่วนประกอบ js ซึ่งขึ้นอยู่กับ jquery
npm install ngx-bootstrap bootstrap --save
or
ng add ngx-bootstrap (Preferred)ทำให้โค้ดของคุณไม่มี jquery ในเชิงมุม
รันคำสั่งต่อไปนี้ในโปรเจ็กต์ของคุณเช่น npm install bootstrap@4.0.0-alpha.5 --save
หลังจากติดตั้งการอ้างอิงข้างต้นให้รันคำสั่ง npm ต่อไปนี้ซึ่งจะติดตั้งโมดูล bootstrap npm install --save @ ng-bootstrap / ng-bootstrap
ตรวจสอบสิ่งนี้สำหรับข้อมูลอ้างอิง - https://github.com/ng-bootstrap/ng-bootstrap
เพิ่มการนำเข้าต่อไปนี้ลงใน app.module import {NgbModule} จาก "@ ng-bootstrap / ng-bootstrap"; และเพิ่ม NgbModule ในการนำเข้า
ใน stye.css ของคุณ @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
ขั้นตอนที่ 1: npm ติดตั้ง bootstrap - บันทึก
ขั้นตอน: 2: วางโค้ดด้านล่างใน angular.json node_modules / bootstrap / dist / css / bootstrap.min.css
ขั้นตอนที่ 3: ng ให้บริการ
เพิ่มลงใน angular-cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],จะได้ผลฉันตรวจสอบแล้ว
หากคุณต้องการใช้ bootstrap ออนไลน์และแอปพลิเคชันของคุณสามารถเข้าถึงอินเทอร์เน็ตได้คุณสามารถเพิ่มได้
@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');ลงในไฟล์ style.css หลักของคุณ และเป็นวิธีที่ง่ายที่สุด
อ้างอิง: angular.io
บันทึก. โซลูชันนี้โหลด bootstrap จากเว็บไซต์ unkg และจำเป็นต้องเชื่อมต่ออินเทอร์เน็ต
Angular 6 CLI เพียงทำ:
ng เพิ่ม @ ng-bootstrap / schematics
ในการติดตั้งใช้งานล่าสุด $ npm i - บันทึก bootstrap @ next
ขั้นแรกให้ติดตั้ง bootstrap ในโปรเจ็กต์ของคุณโดยใช้ npm
npm i bootstrap
หลังจากนั้นเปิดไฟล์ style.css ur ในโปรเจ็กต์ของคุณและเพิ่มบรรทัดนี้
@import "~bootstrap/dist/css/bootstrap.css";
และนั่นคือ bootstrap ที่เพิ่มเข้ามาในโครงการของคุณ
| * | การติดตั้ง Bootstrap 4 สำหรับ Angular 2, 4, 5, 6 +:
| +> ติดตั้ง Bootstrap ด้วย npm
npm install bootstrap --save
npm install popper.js --save| +> เพิ่มสไตล์และสคริปต์ให้กับ angular.json
"architect": [{
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
}]หากคุณใช้Angular 6+ ให้เพิ่มสิ่งต่อไปนี้ในangular.json :
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],การเพิ่ม bootsrap เวอร์ชันปัจจุบัน 4 เป็นเชิงมุม:
1 / ก่อนอื่นคุณต้องติดตั้ง thoses:
npm install jquery --save
npm install popper.js --save
npm install bootstrap --save2 / จากนั้นเพิ่มไฟล์สคริปต์ที่จำเป็นลงในสคริปต์ใน angular.json:
"scripts": [
"node_modules/jquery/dist/jquery.slim.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here3 / สุดท้ายเพิ่ม Bootstrap CSS ลงในอาร์เรย์สไตล์ใน angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],`คุณทำงานกับ cdn สำหรับ bootstrap และ jquery หรือติดตั้ง bootstarp โดยตรงในแอพด้วย:
npm install ngx-bootstrap --saveใช้https://ng-bootstrap.github.io/#/homeด้วย แต่ไม่ได้รับการอนุมัติ
https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a