Cara menambahkan bootstrap ke proyek sudut-cli


234

Kami ingin menggunakan bootstrap 4 (4.0.0-alpha.2) di aplikasi kami yang dihasilkan dengan angular-cli 1.0.0-beta.5 (w / node v6.1.0).

Setelah mendapatkan bootstrap dan dependensinya dengan npm, pendekatan pertama kami adalah menambahkannya di angular-cli-build.js:

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

dan impor mereka di 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>

Ini bekerja dengan baik ng servetetapi segera setelah kami menghasilkan bangunan dengan -prodbendera semua dependensi ini menghilangdist/vendor (kejutan!).

Bagaimana kita dimaksudkan untuk menangani skenario seperti itu (mis. Memuat skrip bootstrap) dalam proyek yang dihasilkan dengan angular-cli?

Kami memiliki pemikiran berikut tetapi kami tidak benar-benar tahu ke mana harus pergi ...

  • menggunakan CDN? tetapi kami lebih suka melayani file-file ini untuk menjamin bahwa mereka akan tersedia

  • salin dependensi ke dist/vendorsetelah kita ng build -prod? Tapi itu sepertinya sesuatu yang harus disediakan sudut-cli karena 'merawat' bagian build?

  • menambahkan jquery, bootstrap, dan tether ke dalam src/system-config.tsdan entah bagaimana menariknya ke dalam bundel kita main.ts? Tapi itu tampak salah mengingat bahwa kita tidak akan menggunakannya secara eksplisit dalam kode aplikasi kita (tidak seperti moment.js atau sesuatu seperti lodash, misalnya).


Apakah Anda memilikinya di file system-config.ts Anda? Anda harus memetakannya.
mjwrazor

1
Banyak jawaban di bawah ini merekomendasikan penggunaan ngx-bootstrap. Saya menemukan bahwa itu bukan pengganti penuh untuk plugin jquery Bootstrap dan kadang-kadang Anda masih perlu menggunakan plugin jquery "asli" itu, seperti runtuhnya fungsi dalam tabel. Dalam hal ini, cari salah satu jawaban di bawah ini yang menjelaskan cara mengimpor skrip jquery secara eksplisit dari file .angular-cli.json.
Christoph


Cukup gunakan ng-bootstrap ng-bootstrap.github.io/#/home
Liam

Jawaban:


299

PEMBARUAN PENTING: ng2-bootstrap sekarang diganti oleh ngx-bootstrap

ngx-bootstrap mendukung Angular 3 dan 4.

Perbarui: 1.0.0-beta.11-webpack atau versi di atas

Pertama-tama periksa versi angular-cli Anda dengan perintah berikut di terminal:

ng -v

Jika versi angular-cli Anda lebih besar dari 1.0.0-beta.11-webpack , maka Anda harus mengikuti langkah-langkah ini:

  1. Instal ngx-bootstrap dan bootstrap :

    npm install ngx-bootstrap bootstrap --save

Baris ini menginstal Bootstrap 3 saat ini, tetapi dapat menginstal Bootstrap 4 di masa mendatang. Perlu diingat ngx-bootstrap mendukung kedua versi.

  1. Buka src / app / app.module.ts dan tambahkan:

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
  2. Buka angular-cli.json (untuk angular6 dan kemudian nama file diubah menjadi angular.json ) dan masukkan entri baru ke dalam stylesarray:

    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
  3. Buka src / app / app.component.html dan tambahkan:

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

Versi 1.0.0-beta.10 atau di bawah ini:

Dan, jika versi angular-cli Anda 1.0.0-beta.10 atau di bawah, maka Anda dapat menggunakan langkah-langkah di bawah ini.

Pertama, buka direktori proyek dan ketik:

npm install ngx-bootstrap --save

Kemudian, buka angular-cli-build.js Anda dan tambahkan baris ini:

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

Sekarang, buka src / system-config.ts Anda lalu tulis:

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

...dan:

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

6
Apa itu ng2-bootstrap? apa arti menambahkan bootstrap asli ke sudut 2? Maaf saya bingung dan sudah mencarinya tetapi masih bingung. mengapa saya tidak bisa mengambil langkah-langkah yang sama untuk mengunduh bootstrap alih-alih menggunakan ng2-bootstrap pihak ketiga.
mjwrazor

1
@ mjwrazor itu karena bootstrap bukan hanya tentang gaya. itu adalah kerangka front-end. untuk lebih jelas, periksa menggunakan komponen peringkat dengan ng2-bootstrap dan pikirkan kode yang akan Anda tulis untuk mengimplementasikannya.
Ali Ghanavatian

5
Hanya pemberitahuan kecil untuk pembaca di masa mendatang: Angular CLI telah beralih dari SystemJS ke WebPack dengan beta.14. Jawaban ini sekarang sudah usang, karena memberikan solusi berdasarkan SystemJS.
jbandi

2
Terima kasih atas ide menggunakan ng2-bootstrap, di sini saya menemukan manual instalasi untuk cli sudut, pada halaman github. github.com/valor-software/ng2-bootstrap/blob/development/docs/... Dalam kasus saya, ada panggilan AlertModule.forRoot () yang hilang.
bruno.bologna

1
Saya memiliki masalah yang sama dengan angular-cli@1.1.3& ngx-bootstrap@1.7.1. Mengikuti langkah-langkah ini dengan perbedaan app.module.tstidak merujuk ke ngx-bootstrap dengan 'ngx-bootstrap / ngx-bootstrap' tetapi dengan 'ngx-bootstrap' seperti pada contoh ini di github memperbaiki masalah saya.
Edmond

123

Mencari kata kunci> Instalasi Perpustakaan Global di https://github.com/angular/angular-cli membantu Anda menemukan jawabannya.

Sesuai dokumen mereka, Anda dapat mengambil langkah-langkah berikut untuk menambahkan perpustakaan Bootstrap.

Pertama instal Bootstrap dari npm:

npm install bootstrap@next

Kemudian tambahkan file skrip yang diperlukan ke aplikasi [0]. Skrip dalam file angular-cli.json:

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

Terakhir, tambahkan Bootstrap CSS ke aplikasi [0] .styles array:

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

Mulai ulang servis jika Anda menjalankannya, dan Bootstrap 4 seharusnya dapat digunakan di aplikasi Anda.

Ini solusi terbaik. Tetapi jika Anda tidak memulai kembali melayani, itu tidak akan berhasil. Sangat disarankan untuk melakukan tindakan terakhir ini.


2
Saat saya mengetik, ini adalah satu-satunya solusi yang tampaknya menggunakan versi terbaru dari angular-cli.
freethebees

1
Bootstrap.js pasti TIDAK diperlukan! Karena Anda tidak ingin menggunakan juqery bootstrap.js untuk ini, Anda harus menginstal arahan ng2 dari bootstrap.
Pascal

2
Jika Anda memang ingin menggunakan javascript bootstrap sebagai lawan dari hanya .css Anda juga perlu menyertakan dependensi dalam array skrip: "../node_modules/jquery/dist/jquery.slim.js", "../ node_modules / tether / dist / js / tether.js "," ../node/modules/bootstrap/dist/js/bootstrap.js "
Howard Swope

2
Anda sebaiknya menggunakan bootstrap.bundle.js dalam deklarasi skrip Anda yang juga memiliki popper.js.
Dejazmach

1
Untuk membuat pekerjaan jangan lewatkan titik terakhir, jalankan ng servelagi. Juga mengapa CLI Angular tidak dapat menambahkan ini secara otomatis? Akan lebih baik jika kita memiliki pilihan untuk itu.
shaijut

58

Lakukan hal berikut:

npm i bootstrap@next --save

Ini akan menambahkan bootstrap 4 ke proyek Anda.

Selanjutnya pergi ke src/style.scssatausrc/style.css berkas (pilih mana yang Anda gunakan) dan impor bootstrap ada:

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

Untuk style.scss

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

Untuk skrip Anda masih harus menambahkan file dalam file angular-cli.json seperti itu ( Dalam Angular versi 6, pengeditan ini harus dilakukan dalam file angular.json ) :

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

5
IMHO ini juga merupakan pilihan bagus, terutama dengan versi terbaru dari angular-cli. Keuntungan besar adalah bahwa metode ini tidak tergantung pada orang yang memperbarui perpustakaan dari paket npm yang disebutkan dalam jawaban yang diterima; lebih jauh, ini juga memungkinkan kita untuk mengganti variabel bootstrap menggunakan SASS sementara tidak langsung menunjuk ke file CSS yang dikompilasi.
martin

2
Ya, lebih bersih dan lebih modular, jadi saya lebih suka itu!
mahatmanich

Doent ini berfungsi untuk saya, prasyarat untuk diikuti, saya menggunakan versi terbaru dari angular dan bootstrap dan menambahkan semua perubahan di atas, tidak bekerja dengan cara ini tetapi bekerja untuk menambahkan <link rel = "stylesheet" type = "text / css" href = "vendor / bootstrap / dist / css / bootstrap.min.css"> di index.html
har_shit

Ini menggunakan pengaturan cli!
mahatmanich

7
metode pembersih adalah @import '~ bootstrap / dist / css / bootstrap'; Menggunakan tanda ~ untuk mengimpor seperti modul langsung dari folder node_modules. Ditemukan penjelasan di sini: stackoverflow.com/questions/39535760/…
AI

32

Pada awalnya, Anda harus menginstal tether, jquery dan bootstrap dengan perintah-perintah ini

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

Setelah menambahkan baris ini dalam file angular-cli.json (angular.json Anda dari versi 6 dan seterusnya)

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

2
maksud Anda $ projectRoot / .angular-cli.json?

21

Karena tidak ada yang merujuk pada cerita resmi (tim sudut) tentang cara memasukkan Bootstrap: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Sertakan Bootstrap

Bootstrap adalah kerangka kerja CSS populer yang dapat digunakan dalam proyek Angular. Panduan ini akan memandu Anda menambahkan bootstrap ke proyek Angular CLI Anda dan mengonfigurasinya untuk menggunakan bootstrap.

Menggunakan CSS

Mulai

Buat proyek baru dan arahkan ke proyek

ng new my-app
cd my-app

Menginstal Bootstrap

Dengan proyek baru yang dibuat dan siap Anda selanjutnya perlu menginstal bootstrap ke proyek Anda sebagai ketergantungan. Menggunakan --saveopsi dependensi akan disimpan di package.json

# version 3.x
npm install bootstrap --save

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

Mengkonfigurasi Proyek

Sekarang setelah proyek diatur, ia harus dikonfigurasikan untuk menyertakan bootstrap CSS.

  • Buka file .angular-cli.jsondari root proyek Anda.
  • Di bawah properti appsitem pertama dalam array itu adalah aplikasi default.
  • Ada properti stylesyang memungkinkan gaya global eksternal diterapkan ke aplikasi Anda.
  • Tentukan jalur ke bootstrap.min.css

Seharusnya terlihat seperti berikut ketika Anda selesai:

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

Catatan: Saat Anda melakukan perubahan, .angular-cli.jsonAnda harus mulai lagi ng serveuntuk mengambil perubahan konfigurasi.

Proyek Pengujian

Buka app.component.htmldan tambahkan markup berikut:

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

Dengan aplikasi yang dikonfigurasi, jalankan ng serveuntuk menjalankan aplikasi Anda dalam mode pengembangan. Di browser Anda, navigasikan ke aplikasi localhost:4200. Pastikan tombol gaya bootstrap muncul.

Menggunakan SASS

Mulai

Buat proyek baru dan arahkan ke proyek

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

Menginstal Bootstrap

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

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

Mengkonfigurasi Proyek

Buat file kosong _variables.scssdi src/.

Jika Anda menggunakan bootstrap-sass, tambahkan yang berikut ke _variables.scss:

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

Di styles.scsstambahkan yang berikut:

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

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

Proyek Pengujian

Buka app.component.htmldan tambahkan markup berikut:

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

Dengan aplikasi yang dikonfigurasi, jalankan ng serveuntuk menjalankan aplikasi Anda dalam mode pengembangan. Di browser Anda, navigasikan ke aplikasi localhost:4200. Pastikan tombol gaya bootstrap muncul. Untuk memastikan variabel Anda digunakan terbuka _variables.scssdan tambahkan yang berikut:

$brand-primary: red;

Kembalikan browser untuk melihat warna font berubah.


4
Solusi ini tidak menambahkan file javascript untuk bootstrap, hanya css
Robin van der Knaap

Lihat cerita lain ini: github.com/angular/angular-cli/wiki/stories-global-lib . Ini menjelaskan menambahkan file skrip, mengambil bootstrap 4 sebagai contoh.
Robin van der Knaap

$brand-primary: red;tidak bekerja untuk saya. Namun, $primary: red;berhasil!
Johan Frick

Terima kasih telah menjelaskan perbedaan antara bootstrap vs boostrap @ selanjutnya :-)
Venkatesh Muniyandi

17

Perbarui v1.0.0-beta.26

Anda dapat melihat pada doc untuk cara baru mengimpor bootstrap di sini

Jika masih tidak berhasil, restart dengan perintah ng serve

Versi 1.0.0 atau di bawah ini:

Dalam file index.html Anda, Anda hanya perlu tautan css bootstrap (tidak perlu skrip js)

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

Dan

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

Setelah menginstal ng2-bootstrap di 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'
  }
};

Dan di my_project / angular-cli-build.js:

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

Jangan lupa perintah ini untuk meletakkan modul Anda di vendor:

ng build

untuk mengimpor dari modul lain yang prinsipnya sama.


1
bagaimana ini membuat bootstrap dapat menggunakan jquery? Saya telah melakukan ini dan ini tidak berhasil.
mjwrazor

Contoh akhirnya menemukan ini dan itu berhasil. Saya tidak bisa memikirkan hal ini untuk sementara waktu.
mjwrazor

8

Saya kira metode di atas telah berubah setelah rilis, periksa tautan ini

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

memulai proyek

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

instal ng-bootstrap dan bootstrap

npm install ng2-bootstrap bootstrap --save

buka src / app / app.module.ts dan tambahkan

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

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

buka angular-cli.json dan masukkan entri baru ke dalam array gaya

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

buka src / app / app.component.html dan uji semua karya dengan menambahkan

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

1
Metode dari Ahmed Hamdy berfungsi, tampaknya pembaruan kode terjadi sekarang. Memperbarui pesannya dengan solusi.
PeterH

1
jika Anda ingin menggunakan Bootstrap 4 maka Anda perlu mengubah "npm install ng2-bootstrap bootstrap --simpan" TO BE "npm install ng2-bootstrap bootstrap@4.0.0-alpha.6 --save" .... tidak seluruhnya jelas dalam dokumentasi (lakukan pencarian untuk 'kartu-' di bootstrap.css untuk mengetahui apakah telah berfungsi) ... perhatikan bahwa saat ini Alpha 6 ini akan berubah tidak diragukan ... periksa situs bootstrap untuk instruksi npm saat ini
72GM

8

Langkah-langkah untuk Bootstrap 4 di Angular 5

  1. Buat Proyek 5 Sudut

    ng baru AngularBootstrapTest

  2. Pindah ke direktori proyek

    cd AngularBootstrapTest

  3. Unduh bootstrap

    npm instal bootstrap

  4. Tambahkan Bootstrap ke Project

    4.1 buka .angular-cli.json

    4.2 menemukan bagian "gaya" di json

    4.3 tambahkan jalur css bootstrap seperti di bawah ini

    .

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

Sekarang Anda telah berhasil menambahkan bootstrap css di proyek sudut 5

Uji bootstrap

  1. Buka src/app/app.component.html
  2. tambahkan komponen tombol bootstrap

.

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

Anda dapat merujuk gaya tombol di sini ( https://getbootstrap.com/docs/4.0/components/buttons/ )

  1. simpan file

  2. jalankan proyek

    ng layani --buka

Sekarang Anda akan melihat tombol gaya bootstrap di halaman

Catatan: jika Anda menambahkan jalur bootstrap setelah ng servis , Anda harus berhenti dan jalankan kembali melayani untuk mencerminkan perubahan


6

Karena ini menjadi sangat membingungkan dan jawaban di sini sangat beragam, saya hanya akan menyarankan pergi dengan tim ui resmi untuk BS4 repo (ya ada begitu banyak repo untuk NG-Bootstrap.

Cukup ikuti instruksi di sini https://github.com/ng-bootstrap/ng-bootstrap untuk mendapatkan BS4.

Mengutip dari lib:

Perpustakaan ini sedang dibangun dari awal oleh tim ui-bootstrap. Kami menggunakan TypeScript dan menargetkan kerangka CSS Bootstrap 4.

Seperti halnya Bootstrap 4, pustaka ini sedang dalam proses. Silakan periksa daftar masalah kami untuk melihat semua hal yang kami terapkan. Jangan ragu untuk berkomentar di sana.

Cukup salin menempelkan apa yang ada untuk itu:

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

Setelah terinstal, Anda perlu mengimpor modul utama kami:

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

Satu-satunya bagian yang tersisa adalah untuk mendaftar modul yang diimpor di modul aplikasi Anda. Metode yang tepat akan sedikit berbeda untuk modul root (tingkat atas) yang Anda harus berakhir dengan kode yang mirip dengan (perhatikan NgbModule.forRoot ()):

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

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

Modul lain dalam aplikasi Anda cukup mengimpor NgbModule:

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

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

Ini tampaknya menjadi perilaku yang paling konsisten sejauh ini


6
  1. Instal bootstrap

    npm install bootstrap@next
  2. Tambahkan kode ke .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. Terakhir tambahkan bootstrap.css ke kode style.scss Anda

    @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  4. Mulai ulang server lokal Anda


Walaupun ngx-bootstrap bagus untuk komponen yang didukungnya, kadang-kadang Anda masih perlu menggunakan plugin jquery "asli", seperti runtuhnya fungsionalitas dalam tabel. Maka Anda masih perlu mengimpor skrip jquery secara eksplisit, yang ditunjukkan oleh jawaban ini.
Christoph

Terpilih untuk point 4 (Restart server lokal Anda) Saya menggunakan ---> npm install ngx-bootstrap bootstrap
--save

5

Lakukan langkah-langkah berikut:

  1. npm install --save bootstrap

  2. Dan di .angular-cli.json Anda, tambahkan ke bagian gaya:

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

Setelah itu, Anda harus memulai kembali layanan Anda

Nikmati


4
  1. Instal Bootstrap menggunakan npm

    npm install bootstrap

2. Pasang Popper.js

npm install --save popper.js

3.Goto angular.json di proyek Angular 6 / .angular-cli.json di Angular 5 dan tambahkan yang terdaftar:

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



2
  1. Jalankan di bash npm install ng2-bootstrap bootstrap --save
  2. Tambahkan / Ubah berikut ini di 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" ],

2

Buka Terminal / command prompt di direktori proyek masing-masing dan ketik perintah berikut.

npm install --save bootstrap

Kemudian buka file .angular-cli.json, Cari

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

ubah itu menjadi

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

Semua selesai.


2

Sekarang dengan versi ng-bootstrap baru 1.0.0-beta.5 mendukung sebagian besar arahan Angular asli berdasarkan markup dan CSS Bootstrap.

Satu-satunya ketergantungan yang diperlukan untuk bekerja dengan ini adalah bootstrap. Tidak Perlu menggunakan dependensi jquery dan popper.js .

ng-bootstrap adalah untuk sepenuhnya menggantikan implementasi JavaScript untuk komponen. Jadi Anda tidak perlu memasukkan bootstrap.min.jsdi bagian skrip di .angular-cli.json Anda.

ikuti langkah-langkah ini ketika Anda mengintegrasikan bootstrap dengan proyek yang dihasilkan dengan angular-cli versi terbaru.

  • Inculde bootstrap.min.css di bagian .angular-cli.json Anda, styles.

    "styles": [
       "styles.scss",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
  • Instal ng-bootstrap dependensi .

    npm install --save @ng-bootstrap/ng-bootstrap
  • Tambahkan ini ke kelas modul utama Anda.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  • Masukkan yang berikut ini di bagian impor modul utama Anda.

    @NgModule({
       imports: [NgbModule.forRoot(), ...],
    })
  • Lakukan hal berikut juga di sub modul Anda jika Anda akan menggunakan komponen ng-bootstrap di dalam kelas modul tersebut.

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
       imports: [NgbModule, ...],
    })
  • Sekarang proyek Anda siap menggunakan komponen ng-bootstrap yang tersedia.


2
  1. Instal bootstrap, popper.js

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

  1. Di src / styles.css , impor gaya bootstrap

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


2

Langkah1:
npm install bootstrap@latest --save-dev Ini akan menginstal versi terbaru dari bootstrap, Namun, versi yang ditentukan dapat diinstal dengan menambahkan nomor versi

Langkah2: Buka styles.css dan tambahkan berikut ini @import "~bootstrap/dist/css/bootstrap.css"


Sebagian besar jawaban terbaik saat ini kecuali hapus --save-dev. Seperti yang Anda inginkan, bootstrap akan digunakan dengan aplikasi Anda.
Sydwell

2

Untuk Menambahkan Bootstrap dan Jquery keduanya

npm install bootstrap@3 jquery --save

setelah menjalankan perintah ini, silakan dan periksa folder node_modules Anda, Anda dapat melihat bootstrap dan jquery ditambahkan ke dalamnya.


Cool menambahkan Jquery juga.
Surya R Praveen

1

angular-clisekarang memiliki halaman wiki khusus tempat Anda dapat menemukan semua yang Anda butuhkan. TLDR, instal bootstrapvia npmdan tambahkan tautan gaya ke bagian "gaya" di .angular-cli.jsonfile Anda


1

Contoh kerja jika menggunakan angular-cli dan css:

1. instal bootstrap

npm instal bootstrap tether jquery --save

2. tambahkan ke .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"
  ],

1

instal boostrap menggunakan npm

npm install boostrap@next --save

kemudian periksa folder node_modules Anda untuk file boostrap.css (dalam dist) biasanya jalurnya

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

tambahkan jalur ini | impor boostrap di dalam style.css atau style.scss

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

itu dia.


Bagaimana dengan meletakkannya di array gaya angular-cli.json? Tidak perlu?
CodyBugstein

Tidak, itu tidak perlu. karena kami menyertakan file style.css kami dalam array itu. kita dapat mengimpor file css lain di style.css atau style.scss kami "@import" ~@angular/material/prebuilt-themes/indigo-pink.css ";" @import "../node_modules/bootstrap/dist/css /bootstrap.css ";
Chanaka Fernando

Ah ok .. tapi saya pikir termasuk dalam angular-cli.jsonmungkin lebih baik
CodyBugstein

@CodyBugstein Saya tidak yakin apakah itu "lebih baik" untuk menambahkannya ke .angular-cli.json. Berikut adalah beberapa alasan mengapa Anda mungkin ingin menambahkan impor dalam file styles.scss Anda: 1) Anda dapat dengan mudah menerapkan tema bootstrap seperti contoh Bootswatch di sini: github.com/thomaspark/bootswatch 2) Mengedit file .json lebih rumit daripada mengedit file .scss karena file .json tidak mengizinkan komentar, dan 3) pengembang baru dapat melihat styles.scss sebagai titik awal untuk semua CSS daripada .angular-cli.json.
Keith

1

Jalankan perintah berikut ini di dalam proyek

npm install --save @bootsrap@4

dan jika Anda mendapat konfirmasi seperti ini

+ bootstrap@4.1.3
updated 1 package in 8.245s

Ini berarti boostrap 4 berhasil diinstal. Namun, untuk menggunakannya, Anda perlu memperbarui array "gaya" di bawah file angular.json.

Perbarui dengan cara berikut sehingga bootstrap akan dapat menimpa gaya yang ada

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

Untuk memastikan semuanya sudah diatur dengan benar, jalankan 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, maka Anda baik menggunakan boostrap. masukkan deskripsi gambar di sini


1

Tidak melihat yang ini di sini:

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

Saya baru saja menambahkan baris ini di style.scss Dalam kasus saya, saya juga ingin mengganti variabel bootstrap.


1

Jika Anda baru saja mulai dengan sudut dan bootstrap maka jawaban sederhana akan di bawah langkah-langkah berikut: 1. Tambahkan paket simpul bootstrap sebagai ketergantungan dev

npm install --save bootstrap
  1. impor bootstrap stylessheet dalam file angular.json.

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

  2. dan Anda siap menggunakan bootstrap untuk penataan, kisi, dll.

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

Bagian terbaik dari ini yang saya temukan adalah bahwa kita mengarahkan menggunakan bootstrap tanpa ketergantungan modul pihak ketiga. Kami dapat memutakhirkan bootstrap kapan saja dengan hanya memperbarui perintah, npm install --save bootstrap@4.4dll.


1

Anda memiliki banyak cara untuk menambahkan Bootstrap 4 di proyek Angular Anda :

  • Termasuk Bootstrap CSS dan file JavaScript di bagian file index.html proyek Angular Anda dengan dan tag,

  • Mengimpor file CSS Bootstrap dalam file global styles.css dari proyek Angular Anda dengan kata kunci @import.

  • Menambahkan Bootstrap CSS dan file JavaScript dalam array gaya dan skrip dari file angular.json proyek Anda


1

Jalankan Perintah Ini

npm install bootstrap@3

Angular.json Anda

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


0

Contoh yang berfungsi jika menggunakan angular-cli:

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

Bekerja untuk css dan scss. Bootstrap v3 dan v4 tersedia.

Informasi lebih lanjut tentang skema bootstrap silakan temukan di sini .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.