Merhabalar arkadaşlar. Bu yazıda Angular için Bootstrap kurulumunu ele alacağız.

Bootstrap Nedir?

Bootstrap yazılım geliştiricilerine responsive yani tüm cihazlarla uyumlu şekilde tasarım yapılmasını sağlayan açık kaynak kodlu bir CSS framework’üdür. Barındırdığı bileşenler sayesinde hem görünüm hem uyumluluk konusunda avantajlar sağlar.

Angular İçin Bootstrap Nasıl Kurulur?

Angular için Bootstrap kurulumunda da yine npm’den yardım alacağız. Öncelikle cd komutu ile ilk yazıda oluşturduğumuz Angular6Project içine geçelim ve npm install bootstrap@4.2.1 jquery –save komutu ile Bootstrap’ın bu yazı yazılırkenki en güncel sürümü olan 4.2.1 sürümünün kurulumu gerçekleştirelim.

Akabinde Angular6Project dizinimizde yer alan package.json açalım ve dependencies alanında yer alan bootstrap ve jquery kütüphanelerinin düzgün versiyon ile kurulup kurulmadığını kontrol edelim. Aşağıdaki ekran görüntüsünde görebileceğimiz gibi Bootstrap bende 4.2.1 versiyonu ile ve jquery de 3.3.1 versiyonu ile kurulmuş durumda.

Bootstrap’ın Angular CLI Konfigürasyonu

Bootstrap kurulumunun ardından projemizde kullanabilmek üzere konfigüre etmemiz gerekmetedir. Bunun için de proje dizinimizde yer alan package.json dosyası üzerinde değişiklik yapmamız gerekmektedir. package.json dosyasını açtığımızda içerisinde styles ve scripts alanları mevcuttur. Biz ilgili alanları aşağıdaki gibi değiştirelim:

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

Bootstrap’a ait CSS ve JS dosyalarının konfigürasyona eklenmesinin ardından app.component.html dosyasını açalım ve aşağıdaki gibi yeni bir li elementi ekleyim:

<li>
	<button class="btn btn-primary"> Bootstrap Styled Button</button>
</li>

Yukarıdaki kodda basitçe bir button elemanı ekliyoruz ve butonun CSS class özelliğine Bootstrap’dan gelen btn ve btn-primary değerlerini atıyoruz. Şimdi ng s -o komutu ile uygulamamızı çalıştıralım. Aşağıdaki ekran görüntüsünden görebileceğimiz gibi eklenen buton Bootstrap’ın CSS özelliklerini kullanmış.

Bu yazıda anlatacaklarım bu kadar arkadaşlar. Bir sonraki yazıda görüşene kadar sağlıcakla kalın.