Bagaimana cara Memasang Bootstrap di Angular? 5 Cara Mudah

Halaman web berfungsi paling baik jika bersifat interaktif. Namun, tampaknya tidak mungkin mengembangkan laman web baru dalam semalam.

Ini adalah saat Anda mungkin merasa perlu memiliki akses ke halaman web yang mungkin umum tetapi dapat dimodifikasi dengan mudah melalui kode yang disesuaikan. Di sinilah Bootstrap berperan.

Mari kita mulai dengan memahami cara menginstal Bootstrap di Angular untuk membuat aplikasi web yang responsif dan hidup di Angular!

Memahami Bootstrap: Panduan Awal

Bootstrap adalah framework front-end yang menawarkan kombinasi alat dan komponen dari CSS, HTML, dan JavaScript untuk membuat halaman web yang dinamis. Bootstrap adalah open source dan juga gratis. Sementara Angular, itu sendiri, adalah kerangka kerja yang mampu untuk membangun situs web satu halaman yang kuat, menggabungkannya dengan Bootstrap semakin mendorong potensinya untuk membuat halaman web yang responsif dan dinamis.

Bootstrap telah memperoleh popularitas besar, dan sekitar 25,8% dari semua situs web berbasis JavaScript menggunakan Bootstrap, yang selanjutnya menyiratkan signifikansinya di pasar.

Bootstrap: Sekilas Sejarahnya

Awalnya dibuat sebagai alat internal untuk situs web jejaring sosial populer Twitter, insinyur Jacob Thornton dan Mark Otto memutuskan untuk menerbitkan Bootstrap untuk penggunaan publik pada Agustus 2011 di repositori sumber terbuka GitHub.

Mengikuti kenyamanan dan popularitasnya di kalangan publik, pencipta terus berupaya menghasilkan versi Bootstrap yang lebih baru, melengkapinya dengan komponen UI yang ditingkatkan dan dukungan yang lebih baik.

Pembuat Mark dan Jacob menjatuhkan versi terbaru dari Bootstrap- Bootstrap 5.3.0 pada tahun 2023.

Lihatkursus teknologi gratiskamiuntuk mendapatkan keunggulan dalam persaingan.

Haruskah Anda Menggunakan Bootstrap?

Anda dapat sampai pada jawaban atas pertanyaan tersebut dengan memahami banyak manfaat yang ditawarkan proyek ini. Pertama-tama, ia menawarkan CSS yang sangat responsif. Ini membuatnya mudah beradaptasi di desktop, tab, dan juga ponsel. Ini juga memiliki kemampuan komputasi di sebagian besar browser utama.

Tambahkan ke ini keuntungan dari persyaratan penyiapan yang paling sedikit, dan Anda dapat merancang tata letak dalam waktu satu jam, jika tidak kurang. Bootstrap kondusif untuk digunakan karena tidak perlu pengguna mahir dengan CASS atau bahkan HTML kecuali Anda perlu memulai perubahan berbasis UI.

Fitur paling ramah yang menjadikan Bootstrap pilihan populer untuk disematkan di Angular atau untuk menambahkaninstalasi Angular Bootstrap adalah-

Aspek komponen

Dari bilah navigasi hingga formulir, Bootstrap menyediakan log komponen untuk aplikasi saat Anda memutuskan cara menambahkan Bootstrap di Angular.Dengan bantuan komponen-komponen tersebut, mendesain situs atau aplikasi secara kreatif menjadi sangat mudah. Fungsi ini dengan Bootstrap di Angular sangat populer di kalangan pengembang.

LihatKursus Pengembangan Perangkat Lunak upGrad untuk meningkatkan keterampilan Anda.

Aspek kustomisasi

Saat Anda melakukanpenginstalan Bootstrap di Angular, Anda dapat mendesain breakpoint kustom bahkan untuk kolom dan menyisipkan jeda juga, dalam ukuran sesuai kebutuhan Anda.Lebih lanjut menyederhanakan kustomisasi berdasarkan grid responsif kerangka kerja.

Menghemat waktu

Kerangka Bootstrap, ketika disematkan di Angular, menghasilkan penghematan waktu yang besar pada bit waktu. Berkat blok yang sudah jadi di Bootstrap, tidak perlu memulai dari awal saat Andamenginstal Bootstrap 5 di angular .Cukup menyetel ulang elemen bawaan dan membuatnya dapat digunakan dengan input Anda akan membantu dan bahkan menambah keunikan pada produk akhir Anda.

Prasyarat untuk menginstal Bootstrap di Angular

Berikut adalah daftar prasyarat untuk menambahkan Bootstrap ke Angular. Pastikan Anda mengonfigurasi alat yang terdaftar setelah menginstal yang sama untuk membuat aplikasi Angular.

• Git : Ini adalah pengaturan unit kontrol versi terdistribusi yang digunakan untuk menyinkronkan repositori.
• IDE – Menggunakan Lingkungan Pengembangan Terpadu yang memiliki antarmuka grafis sangat penting untuk mengembangkan aplikasi, termasuk Angular.
• Node.js dan npm : Yang pertama adalah perangkat lunak kode JavaScript untuk runtime.Sedangkan yang terakhir, npm, hadir sebagai pengelola paket yang digunakan untuk Node.js. Semua aplikasi Angular berjalan berdasarkan keduanya, sementara ini juga membantu dalam instalasi perpustakaan.
• Angular CLI: Alat utilitas ini didasarkan pada baris perintah untuk pembentukan struktur dasar Angular.

Ambil petunjuk dari berbagai kursus rekayasa perangkat lunak yang tersedia dari fakultas ahli di upGrad, seperti Master of Science dalam Ilmu Komputer , dan tingkatkan keterampilan pengembangan Anda secara eksponensial.

Metode 1: Memasang Bootstrap melalui CDN

Ikuti langkah-langkah yang relevan untuk menginstal Bootstrap di Angular melalui CDN.

• Temukan folder 'src' dan buka file proyek Angular ' index.html '.
• Sematkan tautan berikut di bagian ' <head> '.

<tautan 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>

• File JavaScript dan CSS untuk Bootstrap disertakan dalam baris kode ini dari URL CDN yang ditunjuk.
• Simpan perubahan terakhir ke file ' index.html ' Anda.

Proyek Angular Anda akan menggunakan gaya Bootstrap dan kemampuan JavaScript yang ditawarkan CDN setelah Anda menyertakan tautan CDN ini. Anda sekarang siap untuk memanfaatkan komponen Bootstrap dalam proyek Angular Anda!

Metode 2: Menginstal Bootstrap melalui manajer paket npm

Menginstal Bootstrap menggunakan npm manager dapat dilakukan dengan mengikuti langkah-langkah sederhana yang diberikan.

• Buka prompt perintah atau terminal.
• Arahkan direktori root proyek Angular Anda.
• Instal Bootstrap dan dependensi terkaitnya dengan menjalankan perintah ' npm install bootstrap' .Perintah yang relevan akan mengunduh Bootstrap dan dependensinya yang relevan ke direktori Anda yang berlabel'node_modules'.
• Pasca instalasi, Anda perlu memasukkan gaya Bootstrap dan Javascript dengan membuka file 'angular.json' dari direktori root dan menambahkan entri berikut di dalam larik 'styles'.

“node_modules/bootstrap/dist/css/bootstrap.min.css”

• Selanjutnya, tambahkan perintah berikut di dalam larik 'skrip' .

“node_modules/bootstrap/dist/js/bootstrap.min.js”

• Simpan semua perubahan yang dilakukan pada file ' angular.json' .

Anda sekarang siap menggunakan kelas JavaScript dan CSS dari Bootstrap di komponen dan templat Angular Anda.

Jelajahi Kursus Rekayasa Perangkat Lunak Populer kami

Metode 3: Memasang Bootstrap melalui Angular CLI

Berikut adalah panduan yang mudah diikuti untuk membantu Anda menginstal Bootstrap melalui Angular CLI.

• Buka prompt perintah Anda.
• Jalankan perintah 'ng new my-app' untuk menggunakan Angular CLI dan buat proyek Angular baru.Anda dapat mengganti'aplikasi-saya' dengan nama pilihan Anda.
• Ubah ke direktori proyek.

cd aplikasi saya

• Ulangi proses instalasi Bootstrap menggunakan npm, seperti yang disebutkan di atas.

Anda sekarang telah membuat proyek Angular baru menggunakan CLI, serta memasang Bootstrap untuk proyek Anda!

Metode 4: Menginstal Bootstrap melalui manajer paket Bower

• Pastikan Anda menginstal npm dan bower secara global.
• Jalankan perintah yang diberikan di command prompt Anda – npm install -g bower
• Setelah bower diinstal, buka folder proyek Anda dan ketik

bower menginstal bootstrap

bower instal jquery

Langkah-langkah di atas akan menginstal file instalasi Bootstrap yang relevan di folder 'bower_components' yang baru dibuat .

• Langkah terakhir adalah memasukkan file untuk Bootstrap dan jquery dalam file proyek Anda.

Meskipun ini semua adalah langkah-langkah untuk menginstal Bootstrap di Angular, perlu diingat bahwa bower tidak lagi direkomendasikan untuk digunakan dalam instalasi Bootstrap.

Jelajahi Kursus Gratis Pengembangan Perangkat Lunak Kami

Metode 5: Menginstal Bootstrap melalui build kustom

Berikut adalah langkah-langkah sederhana untuk menginstal Bootstrap melalui custom build

• Unduh versi Bootstrap pilihan Anda dari situs web resmi bersama dengan file Javascript dan CSS-nya.
• Ekstrak file zip dan salin 'bootstrap.min.css ' darinya .
• Di proyek Angular Anda, navigasikan ke direktori ' src ' dan buat yang baru bernama ' aset'. Pastikan membuat direktori lain di dalam 'aset' disebut ' css'.
• Rekatkan'bootstrap.min.css ' di dalam direktori ' css'.
• Sekali lagi, di direktori 'assets ', buat direktori baru bernama ' js' dan rekatkan 'bootstrap.min.js' yang diekstrak dari folder zip di dalam direktori baru ini.
• Buka 'angular.json ' di direktori root dan navigasikan larik ' styles'dengan mengikuti segmenarchitect > build > options.
• Tambahkan file Bootstrap CSS dengan menggunakan perintah berikut –

"src/aset/css/bootstrap.min.css"

• Temukan larik 'skrip' yang sama dan rekatkan perintah berikut-

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

• Simpan perubahan ke file ' angular.json '.

Praktik Terbaik untuk Diikuti Saat Memasang Bootstrap

Meskipun ada beberapa cara untuk menginstal Bootstrap di Angular, mengetahui praktik terbaik dapat lebih menyederhanakan prosesnya.

• Pastikan mengimpor file CSS Bootstrap yang tepat di dalam file dan folder yang tepat di proyek Angular Anda.
• Sementara Bootstrap menawarkan katalog kelas dan komponen CSS yang luas, pilih hanya yang relevan dengan proyek Anda.
• Hindari komponen yang tidak perlu untuk mengoptimalkan kinerja.
• Tetap perbarui dengan versi Bootstrap terbaru.
• Meskipun komponen Javascript tersedia, gunakan hanya seperlunya saja. Cobalah untuk memanfaatkan perpustakaan khusus Angular.

Di sisi lain, jika Anda dapat mengatur waktu dan berharap untuk menjadi pengembang yang lebih baik, tidak ada yang lebih baik daripada Program Pascasarjana Eksekutif upGrad dalam Pengembangan Perangkat Lunak- Full Stack, didukung oleh IIIT-B.

Kesimpulan

Di sini menyimpulkan daftar kami tentang beberapa cara terbaik untuk menginstal Bootstrap di Angular untuk pengembangan halaman web yang ditingkatkan. Dari desain responsif yang dioptimalkan hingga menggabungkan fitur baru dan dinamis, mengetahui cara memanfaatkan komponen Bootstrap yang tepat dengan praktik yang konsisten akan membantu Anda unggul dalam industri!

Saat bergabung dengan Bootcamp Pengembangan Perangkat Lunak Full Stack upGrad adalah cara lain untuk meningkatkan karier pengembangan Anda dengan keterampilan sesuai permintaan dan panduan ahli.

Daftar sekarang untuk memperluas wawasan Anda!