Cara memasang bootstrap di angular

Widget sudut dibangun dari bawah ke atas hanya menggunakan CSS Bootstrap 5 dengan API yang dirancang untuk ekosistem Angular

Silakan periksa situs demo kami dan daftar masalah untuk melihat semua hal yang sedang kami kerjakan. Jangan ragu untuk berkomentar di sana

Daftar isi

Demo

Silakan periksa semua komponen yang kami miliki di https. //ng-bootstrap. github. io

Ketergantungan

Satu-satunya dependensi adalah Angular, Bootstrap 5 CSS, dan Popper. Versi yang didukung adalah

Instalasi

Kami sangat menyarankan menggunakan Angular CLI untuk menyiapkan proyek baru. Jika Anda memiliki proyek Angular CLI, Anda cukup menggunakan skema kami untuk menambahkan pustaka ng-bootstrap ke dalamnya

Jalankan saja yang berikut ini

ng add @ng-bootstrap/ng-bootstrap

Ini akan menginstal ng-bootstrap untuk aplikasi default yang ditentukan di angular.json Anda. Jika Anda memiliki beberapa proyek dan ingin menargetkan aplikasi tertentu, Anda dapat menentukan opsi --project

ng add @ng-bootstrap/ng-bootstrap --project myProject

Jika Anda memilih untuk tidak menggunakan skema dan menginstal semuanya secara manual, silakan lihat di situs web kami

Browser yang didukung

Kami mendukung browser dan versi yang sama yang didukung oleh Bootstrap 4 dan Angular, mana saja yang lebih ketat. Lihat Dukungan browser Angular dan untuk detail lebih lanjut

Kode kami diuji secara otomatis di semua browser yang didukung

Mendapatkan bantuan

Tolong, jangan buka masalah untuk pertanyaan dukungan umum karena kami ingin menyimpan masalah GitHub untuk laporan bug dan permintaan fitur. Anda memiliki peluang yang jauh lebih baik untuk menjawab pertanyaan Anda di StackOverflow di mana pengelola melihat pertanyaan yang ditandai dengan ng-bootstrap

StackOverflow adalah tempat yang jauh lebih baik untuk mengajukan pertanyaan

• ada ratusan orang yang bersedia membantu di StackOverflow
• pertanyaan dan jawaban tetap tersedia untuk dilihat publik sehingga pertanyaan/jawaban Anda dapat membantu orang lain
• Sistem pemungutan suara Stack Overflow memastikan bahwa jawaban terbaik terlihat jelas

Untuk menghemat waktu Anda dan kami, kami akan secara sistematis menutup semua masalah yang meminta dukungan umum dan mengarahkan orang ke StackOverflow

Apakah Anda pikir Anda telah menemukan bug?

Kami ingin memperbaikinya secepatnya. Namun sebelum memperbaiki bug, kami perlu mereproduksi dan mengonfirmasinya

Kami meminta Anda untuk menghormati dua hal

• isi template masalah GitHub dengan memberikan deskripsi bug dan versi Angular, ng-bootstrap, dan TypeScript yang sesuai
• berikan kasus penggunaan yang gagal dengan skenario reproduksi minimal menggunakan StackBlitz (Anda dapat memulai dengan melakukan forking dari kami)

Skenario reproduksi minimal memungkinkan kami mengonfirmasi bug dengan cepat (atau menunjukkan masalah pengodean) serta mengonfirmasi bahwa kami sedang memperbaiki masalah yang tepat

Harap perhatikan bahwa kami akan bersikeras pada skenario reproduksi minimal untuk menghemat waktu pengelola dan pada akhirnya dapat memperbaiki lebih banyak bug. Kami akan menandai masalah sebagai tidak dapat ditindaklanjuti tanpanya dan menutupnya jika tidak ada kabar dari pelapor

Menariknya, dari pengalaman kami, pengguna sering menemukan sendiri masalah pengkodean saat menyiapkan StackBlitz minimal. Kami memahami bahwa terkadang sulit untuk mengekstrak bit kode penting dari basis kode yang lebih besar, tetapi kami benar-benar perlu mengisolasi masalah sebelum kami dapat memperbaikinya

Berkontribusi pada proyek

Silakan periksa PENGEMBANG. md untuk dokumentasi menjalankan proyek secara lokal dan BERKONTRIBUSI. md untuk pedoman kontribusi

Bootstrap adalah kerangka kerja paling populer di dunia untuk membangun situs yang responsif dan mengutamakan seluler, sementara Angular adalah salah satu kerangka kerja JavaScript yang paling kuat. Ada tiga (3) cara utama untuk menambahkan bootstrap ke proyek sudut kami

Metode 1. Menggunakan Angular CLI (npm install)

Metode 2. Menggunakan CDN (Metode Salin dan Tempel)

Metode 3. Menambahkan file bootstrap CSS ke proyek Anda (Menggunakan CSS import )

Mari atur lingkungan sudut kita. Anda diharapkan telah menginstal nodejs di mesin Anda jika tidak, dapat ditemukan https. //nodejs. org. Anda dapat mengunduh node versi LTS atau Current. Saya lebih suka versi LTS. (LTS adalah singkatan dari Dukungan Jangka Panjang). Cukup unduh dan instal

Mari kita mulai dengan menginstal angular menggunakan Command Line Interface (CLI) dari paket NPM

npm install -g @angular/cli

untuk pengguna mac (Masalah izin)

sudo npm install -g @angular/cli_

mari buat proyek sudut baru menggunakan antarmuka baris perintah (CLI)

ng new AngularBootstrap_

Anda dapat menambahkan fitur tambahan saat membuat proyek bersudut dari CLI seperti jenis gaya. Ini memberi Anda gaya yang berbeda untuk dipilih, jika Anda ingin gaya yang kuat seperti SCSS di proyek Anda/menggunakan pintasan ini ( ng new Angular Bootstrap --style=scss). Proyek sudut sederhana tanpa perutean

cd AngularBootstrap

menggunakan kode VS pada mesin window/mac cukup masukkan code . dari terminal/CLI untuk membuka proyek

Metode 1. Menggunakan Angular CLI (npm install). Dari antarmuka baris perintah, instal bootstrap dan rujuk dalam sudut. json

npm install bootstrap

The above command will add latest bootstrap to your node_module. The current version is v4.6.x. You use bootstrap 3 if you like (old). npm install [email protected]

buka sudut Anda. file json. Sudut. json adalah objek seperti pohon, cari objek build lalu di bawah build cari gaya (projects=>architect=>build=>style), lalu tambahkan referensi bootstrap Anda

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

atau

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

Saksikan berikut ini. https. //github. com/kunlex sensasional/Angular Bootstrap

Metode 2. Menggunakan CDN (metode Referensi CDN)
Ini adalah cara lama mereferensikan bootstrap di proyek kami terutama di Angular 1, url ke jalur ditambahkan ke indeks. html untuk referensi global. Untuk informasi lebih lanjut, buka https. // www. getbootstrap. com/

Metode 3. Menambahkan file CSS bootstrap ke proyek Anda

Anda dapat langsung menambahkan folder bootstrap ke direktori aset Anda di proyek sudut Anda dan mereferensikan folder tersebut langsung ke gaya Anda. css atau gaya. scs menggunakan

@import url("bootstrap.min.css");

Tambahan. - Font-awesome adalah salah satu tempat paling populer untuk mendapatkan ikon yang digunakan untuk desain web. Anda dapat menambahkan ikon font-mengagumkan ke proyek sudut Anda menggunakan npm, dan mereferensikan css di sudut Anda. file json

npm install font-awesome

Kesimpulan. Dalam publikasi ini, saya telah menunjukkan kepada Anda, bagaimana memulai proyek sudut Anda menggunakan pustaka bootstrap. silakan klik tombol tepuk tangan. Jika Anda memiliki pertanyaan, hubungi saya oyewusioyekunle@gmail. com

Bagaimana cara menginstal bootstrap di Angular 11?

Bisakah saya menggunakan bootstrap dengan Angular?

Bagaimana cara menambahkan bootstrap di Angular 14?

Cara menginstal bootstrap4. 6 di Sudut?