Aşağıdaki ayrıntılı adımlar ve çalışma örneği için https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ adresini ziyaret
edebilirsiniz.
Doğru açıklamayla çok ayrıntılı adımlar.
Adımlar:
NPM'den Bootstrap Kurulumu
Sonra, Bootstrap'i kurmamız gerekiyor. Dizini oluşturduğumuz projeyle değiştirin (cd angular-bootstrap-example) ve aşağıdaki komutu yürütün:
Bootstrap 3 için:
npm install bootstrap --save
Bootstrap 4 için (şu anda beta sürümünde):
npm install bootstrap@next --save
YA DA
Alternatif: Yerel Bootstrap CSS
Alternatif olarak, Bootstrap CSS'yi indirebilir ve projenize yerel olarak ekleyebilirsiniz. Bootstrap'i web sitesinden yükledim ve bir klasör stilleri oluşturdum (styles.css ile aynı seviyede):
Not:
Yerel CSS dosyalarınızı varlıklar klasörünün altına yerleştirmeyin. Üretim derlemesini Angular CLI ile yaptığımızda, .angular-cli.json'da bildirilen CSS dosyaları küçültülecek ve tüm stiller tek bir styles.css içinde paketlenecek. Varlıklar klasörü, oluşturma işlemi sırasında dist klasörüne kopyalanır (CSS kodu çoğaltılacaktır). Yerel CSS dosyalarınızı yalnızca, doğrudan index.html'ye içe aktarmanız durumunda varlıkların altına yerleştirin.
CSS'yi İçe Aktarma 1. CSS'yi
NPM'den yüklenen Bootstrap'ten içe aktarmak için iki seçeneğimiz var:
güçlü metin 1: .angular-cli.json'u yapılandırın:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2: Doğrudan src / style.css veya src / style.scss içine içe aktarın:
@import '~bootstrap/dist/css/bootstrap.min.css';
Ben şahsen tüm stillerimi src / style.css dosyasında içe aktarmayı tercih ederim çünkü zaten .angular-cli.json içinde bildirildi.
3.1 Alternatif: Yerel Önyükleme CSS'si
Bootstrap CSS dosyasını yerel olarak eklediyseniz, sadece .angular-cli.json içine içe aktarın
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
veya
src / style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: ngx-bootstrap ile Bootstrap JavaScript Bileşenleri (Seçenek 1)
Bootstrap JavaScript bileşenlerini (JQuery gerektiren) kullanmanız gerekmiyorsa, ihtiyacınız olan tüm kurulum budur. Ancak modal, akordiyon, tarih seçici, araç ipucu veya başka bir bileşen kullanmanız gerekiyorsa, jQuery'yi kurmadan bu bileşenleri nasıl kullanabiliriz?
NPM'den de yükleyebileceğimiz, ngx-bootstrap adında Bootstrap için bir Angular wrapper kitaplığı var:
npm install ngx-bootstrap --save
Not NG2-önyükleme ve NGX-önyükleme aynı paket bulunmaktadır. ng2-bootstrap, #itsJustAngular'dan sonra ngx-bootstrap olarak yeniden adlandırıldı.
Angular CLI projenizi oluştururken aynı anda Bootstrap ve ngx-bootstrap yüklemek istemeniz durumunda:
npm install bootstrap ngx-bootstrap --save
4.1: app.module.ts'e gerekli Bootstrap modüllerini ekleme
Ngx-bootstrap'e gidin ve gerekli modülleri app.module.ts'e ekleyin. Örneğin, Açılır Menü, Araç İpucu ve Modal bileşenlerini kullanmak istediğimizi varsayalım:
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 {}
Her modül için .forRoot () yöntemini çağırdığımız için (ngx-bootstrap modülü sağlayıcılarından dolayı), işlevsellikler projenizin tüm bileşenlerinde ve modüllerinde (global kapsam) mevcut olacaktır.
Alternatif olarak, ngx-bootstrap'i farklı bir modülde düzenlemek isterseniz (yalnızca birçok bs modülünü içe aktarmanız gerektiğinde ve uygulamanızı karıştırmak istemiyorsanız sadece organizasyon amaçlı), bir modül oluşturabilirsiniz app-bootstrap.module.ts, Bootstrap modüllerini içe aktarın (forRoot () kullanarak) ve bunları dışa aktarma bölümünde de bildirin (böylece diğer modüller tarafından da kullanılabilir hale gelirler).
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 {}
Sonunda, bootstrap modülünüzü app.module.ts'e aktarmayı unutmayın.
{AppBootstrapModule} dosyasını './app-bootstrap/app-bootstrap.module'den içe aktarın;
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap, Bootstrap 3 ve 4 ile çalışıyor. Ayrıca bazı testler yaptım ve işlevlerin çoğu Bootstrap 2.x ile de çalışıyor (evet, hala bakmam gereken eski bir kodum var).
Umarım bu birine yardımcı olur!
