Angular projenizde css framework olarak Bootstrap kullanabilmek için uygulamanız gereken ÇOK ÇOK basit adımları yazıyorum.

  • Dilediğiniz bootstrap versiyonunu şu komut ile npm üzerinden indirin.
    cd projeKlasoru
    npm install --save bootstrap@3

    Bootstrap dosyaları node_modules altına indirilecektir.

  • Angular’ ın bootstrap den haberinin olması gerekiyor. Bunu gerçekleştirmek için, angular framework’ ün ayarlarını tuttuğu angular.json dosyasını açıyoruz.

Bu dosyada build altındaki satırlarda uygulamamız build edilirken dahil edilecek dosyaları görüyoruz. Tebrikler, angular’ ı arka planda nasıl çalıştığını, build işlemlerinin nasıl otomatikleştirildiğini biraz daha keşfettiniz 🙂

bootstrap’ in css dosyasını styles dizisi altına ekliyoruz. Benim indirdiğim versiyonunun yolu sizinkinden farklı olabilir. Bu yüzden siz kendinize göre düzeltin.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/first",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": []
          },

Projemizde gerekli değişiklikleri yaptık. Şimdi "ng serve" ile çalıştırdığımızda tarayıcımızda bootstrap’ in yüklendiğini görüyoruz.

Last modified: 22 October 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.