Angular'da Bootstrap Nasıl Kurulur? 5 Kolay Yol

Bir web sayfası etkileşimli olduğunda en iyi şekilde çalışır. Ancak, bir gecede yeni bir web sayfası geliştirmek mümkün görünmüyor.

Bu, yaygın olabilecek ancak özelleştirilmiş kodlarla kolayca değiştirilebilecek bir web sayfasına erişim ihtiyacı hissedebileceğiniz zamandır. Burası Bootstrap'in devreye girdiği yer.

Angular'da duyarlı ve canlı web uygulamaları oluşturmak için Bootstrap'i Angular'da nasıl kuracağımızı anlayarak başlayalım !

Bootstrap'i Anlamak: İlk Kılavuz

Bootstrap, dinamik web sayfaları oluşturmak için CSS, HTML ve JavaScript'ten araç ve bileşenlerin bir kombinasyonunu sunan bir ön uç çerçevesidir. Bootstrap açık kaynaklı olduğu kadar ücretsizdir. Angular, güçlü, tek sayfalık web siteleri oluşturmak için yetenekli bir çerçeve olsa da, onu Bootstrap ile birleştirmek, duyarlı ve dinamik web sayfaları oluşturma gücünü daha da artırır.

Bootstrap büyük bir popülerlik kazandı ve JavaScript tabanlı tüm web sitelerinin yaklaşık %25,8'i Bootstrap kullanıyor, bu da pazardaki önemini daha da ima ediyor.

Bootstrap: Geçmişine Bir Bakış

Başlangıçta popüler sosyal ağ sitesi Twitter için dahili bir araç olarak oluşturulan mühendisler Jacob Thornton ve Mark Otto, Bootstrap'i Ağustos 2011'de açık kaynak deposu GitHub'da halkın kullanımı için yayınlamaya karar verdiler.

Halk arasındaki rahatlığı ve popülaritesinin ardından içerik oluşturucular, Bootstrap'in daha yeni sürümlerini oluşturmak, onu geliştirilmiş kullanıcı arabirimi bileşenleri ve daha iyi destekle donatmak için çalışmaya devam ediyor.

Yaratıcılar Mark ve Jacob , 2023 yılında Bootstrap- Bootstrap 5.3.0'ın en son sürümünü yayınladı .

Rekabette avantaj elde etmek içinücretsiz teknoloji kurslarımızagöz atın .

Bootstrap Kullanmalı mıyım?

Bu projenin sunduğu bir dizi faydayı anlayarak sorunun cevabına ulaşabilirsiniz. Başlangıç ​​​​olarak, süper duyarlı CSS sunar. Bu, masaüstlerinde, sekmelerde ve telefonlarda uyarlanabilir olmasını sağlar. Ayrıca çoğu büyük tarayıcıda hesaplanabilirliğe sahiptir.

Buna en az kurulum gereksinimlerinin avantajını ekleyin ve daha az değilse bir saat içinde bir düzen tasarlayabilirsiniz. Bootstrap, kullanıcı arabirimi tabanlı değişiklikleri başlatmanız gerekmedikçe, bir kullanıcının CASS ve hatta HTML konusunda yetkin olmasına ihtiyaç duymadığından kullanım için elverişlidir.

Bootstrap'i Angular'a gömmek veyaAngular Bootstrap kurulumu eklemek için popüler bir seçenek haline getiren en kolay özellikler şunlardır:

Bileşen yönü

Bootstrap'i Açısal olarak nasıl ekleyeceğinize karar verdiğinizde, gezinti çubuklarından formlara kadar, Bootstrap uygulamalar için bir bileşen günlüğü sağlar .Bu bileşenlerin yardımıyla, bir siteyi veya uygulamayı yaratıcı bir şekilde tasarlamak çok kolay hale gelir. Angular'da Bootstrap ile bu işlevsellik, geliştiriciler arasında oldukça popülerdir.

Kendinizi geliştirmek içinupGrad'ınYazılım Geliştirme Kurslarınagöz atın.

Özelleştirme yönü

Angular'da Bootstrap kurulumu yaptığınızda , bir sütun için bile özel kesme noktaları tasarlayabilir ve ihtiyacınıza göre boyutlarda kesmeler ekleyebilirsiniz.Çerçevenin yanıt veren ızgarasına dayalı olarak özelleştirmeyi daha da basitleştirir.

Zamandan tasarruf

Önyükleme çerçevesi, Angular'a yerleştirildiğinde, zaman çizelgesi bitinde büyük zaman tasarrufu sağlar. Bootstrap'te hazır olan bloklar sayesindeBootstrap 5'i açısal olarak kurarken baştan başlamanıza gerek yoktur .Yerleşik öğeleri yeniden hizalamak ve bunları girdilerinizle kullanılabilir hale getirmek işinizi görür ve hatta son ürününüze benzersizlik katar.

Açısal olarak Bootstrap yüklemek için ön koşullar

İşte Angular'a Bootstrap eklemek için ön koşulların bir kontrol listesi. Angular uygulamasını oluşturmak için yükledikten sonra listelenen araçları yapılandırdığınızdan emin olun.

• Git : Bu, depoyu senkronize etmek için kullanılacak dağıtılmış bir sürüm kontrol birimi kurulumudur.
• IDE – Grafik arayüze sahip bir Entegre Geliştirme Ortamı kullanmak, Angular da dahil olmak üzere uygulama geliştirmek için hayati önem taşır.
• Node.js ve npm : İlki, çalışma zamanı için bir JavaScript kod yazılımıdır.İkincisi, npm, Node.js için kullanılan bir paket yöneticisi olarak gelir. Tüm Angular uygulamaları bu ikisine dayalı olarak çalışır ve bunlar aynı zamanda kitaplık kurulumuna da yardımcı olur.
• Angular CLI: Bu yardımcı araç, Angular'ın temel yapı kurulumu için komut satırına dayalıdır.

upGrad'daki uzman fakülte tarafından sunulan Bilgisayar Bilimleri Yüksek Lisansı gibi çeşitli yazılım mühendisliği kurslarından bir ipucu alın ve geliştirme becerilerinizi katlanarak geliştirin.

Yöntem 1: Önyüklemeyi CDN aracılığıyla Yükleme

Bootstrap'i Angular'a CDN aracılığıyla yüklemek için ilgili adımları izleyin.

• 'src' klasörünü bulun ve ' index.html ' Açısal proje dosyasını açın.
• Aşağıdaki bağlantıları ' <head> ' bölümüne gömün.

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

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

• Bootstrap için JavaScript ve CSS dosyaları, belirlenen CDN URL'lerinden alınan bu kod satırlarına dahil edilir.
• Son değişiklikleri ' index.html ' dosyanıza kaydedin.

Angular projeniz, bu CDN bağlantılarını eklediğinizde, CDN'nin sunduğu Bootstrap stillerini ve JavaScript yeteneklerini kullanacaktır. Artık Angular projelerinizde Bootstrap bileşenlerinden yararlanmaya hazırsınız!

Yöntem 2: Bootstrap'i npm paket yöneticisi aracılığıyla yükleme

Bootstrap'i npm yöneticisini kullanarak kurmak, verilen basit adımlar izlenerek yapılabilir.

• Komut istemini veya terminali açın.
• Angular projenizin kök dizininde gezinin.
• ' npm install bootstrap' komutunu çalıştırarak Bootstrap ve ilgili bağımlılıklarını kurun .İlgili komut, Bootstrap'i ve ilgili bağımlılıklarını 'node_modules' olarak etiketlenmiş dizininize indirecektir.
• Kurulumdan sonra, kök dizinden 'angular.json' dosyasını açıp 'styles'dizisinin içine aşağıdaki girişi ekleyerek Bootstrap stillerini ve Javascript'i dahil etmeniz gerekir .

"node_modules/bootstrap/dist/css/bootstrap.min.css"

• Ayrıca, 'komut dosyaları' dizisine aşağıdaki komutu ekleyin .

"node_modules/bootstrap/dist/js/bootstrap.min.js"

• ' angular.json' dosyasında yapılan tüm değişiklikleri kaydedin .

Artık Angular bileşenlerinizde ve şablonlarınızda Bootstrap'ten JavaScript ve CSS sınıflarını kullanmaya hazırsınız.

Popüler Yazılım Mühendisliği Kurslarımızı keşfedin

Yöntem 3: Angular CLI aracılığıyla Bootstrap Kurulumu

İşte Bootstrap'i Angular CLI aracılığıyla kurmanıza yardımcı olacak izlemesi kolay bir kılavuz.

• Komut isteminizi açın.
• Angular CLI'yi kullanmak ve yeni bir Angular projesi oluşturmak için 'ng new my-app' komutunu çalıştırın .'uygulamam'ı istediğiniz bir adla değiştirebilirsiniz .
• Proje dizinine geçin.

uygulamam cd

• Yukarıda bahsedildiği gibi npm kullanarak Bootstrap yükleme işlemini tekrarlayın.

CLI kullanarak yeni bir Angular projesi oluşturdunuz ve projeniz için Bootstrap yüklediniz!

Yöntem 4: Bootstrap'i Bower paket yöneticisi aracılığıyla yükleme

• Global olarak hem npm hem de bower kurduğunuzdan emin olun.
• Verilen komutu komut isteminizde çalıştırın – npm install -g bower
• Bower kurulduktan sonra, proje klasörünüze gidin ve şunu yazın:

bower yükleme önyüklemesi

bower yükleme jquery

Yukarıdaki adımlar, ilgili Bootstrap kurulum dosyalarını yeni oluşturulan 'bower_components' klasörüne yükleyecektir .

• Son adım, Bootstrap ve jquery dosyalarını proje dosyanıza dahil etmek olacaktır.

Angular'da Bootstrap'i kurmak için gereken tüm adımlar bunlar olsa da, Bootstrap kurulumu için artık bower'ın kullanılmasının tavsiye edilmediğini unutmayın.

Ücretsiz Yazılım Geliştirme Kurslarımızı Keşfedin

Yöntem 5: Bootstrap'i özel bir yapı aracılığıyla yükleme

Bootstrap'i özel bir yapı aracılığıyla yüklemek için basit adımlar şunlardır:

• Javascript ve CSS dosyalarıyla birlikte resmi web sitesinden seçtiğiniz Bootstrap sürümünü indirin .
• Zip dosyasını ayıklayın ve içindeki 'bootstrap.min.css ' dosyasını kopyalayın .
• Angular projenizde ' src ' dizinine gidin ve ' asset' adında yeni bir tane oluşturun . 'css ' adlı ' varlıklar'içinde başka bir dizin oluşturduğunuzdan emin olun .
• 'bootstrap.min.css ' dosyasını ' css' dizinine yapıştırın .
• Yine 'asset ' dizininde ' js' adında yeni bir dizin oluşturun ve zip klasöründen çıkarttığınız 'bootstrap.min.js' dosyasını bu yeni dizine yapıştırın.
• Kök dizinde 'angular.json ' dosyasını açın ve mimar > inşa > seçeneklerbölümünü izleyerek 'stiller'dizisinde gezinin .
• Aşağıdaki komutu kullanarak Bootstrap CSS dosyalarını ekleyin –

“src/assets/css/bootstrap.min.css”

• Aynı 'script' dizisini bulun ve aşağıdaki komutu yapıştırın-

“src/assets/js/bootstrap.min.js”

• Değişiklikleri ' angular.json ' dosyasına kaydedin .

Önyükleme Yüklerken İzlenecek En İyi Uygulamalar

Angular'da Bootstrap kurmanın birkaç yolu olsa da, en iyi uygulamaları bilmek süreci daha da basitleştirebilir.

• Angular projenizdeki doğru dosya ve klasörlere doğru Bootstrap CSS dosyalarını içe aktardığınızdan emin olun.
• Bootstrap, geniş bir CSS sınıfları ve bileşenleri kataloğu sunarken, yalnızca projenizle alakalı olanları seçin.
• Performansı optimize etmek için gereksiz bileşenlerden kaçının.
• En son Bootstrap sürümüyle güncel kalın.
• Javascript bileşenleri mevcut olsa da, bunları yalnızca idareli kullanın. Angular'a özgü kitaplıklardan yararlanmaya çalışın.

Öte yandan, zamanı yönetebilir ve daha iyi bir geliştirici olmayı umabilirseniz, hiçbir şey upGrad'ın IIIT-B tarafından desteklenen Yazılım Geliştirme- Full Stack alanında Yönetici Yüksek Lisans Programından daha iyi olamaz.

Çözüm

Gelişmiş web sayfası geliştirme için Bootstrap'i Angular'da kurmanın en iyi yollarından bazılarını içeren listemiz burada sona eriyor. Optimize edilmiş duyarlı tasarımdan yeni, dinamik özelliklerin dahil edilmesine kadar, tutarlı uygulamalarla doğru Bootstrap bileşenlerinden nasıl yararlanılacağını bilmek, sektörde üstünlük elde etmenize yardımcı olacaktır!

upGrad'ın Tam Yığın Yazılım Geliştirme Eğitim Kampına katılırken, geliştirme kariyerinizi isteğe bağlı beceriler ve uzman rehberliği ile güçlendirmenin başka bir yoludur.

Ufkunuzu genişletmek için şimdi kaydolun !