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
ng-bootstrapAngularBootstrap CSSPopper1. x. x5. 0. 24. 0. 02. x. x6. 0. 04. 0. 03. x. x6. 1. 04. 0. 04. x. x7. 0. 04. 0. 05. x. x8. 0. 04. 3. 16. x. x9. 0. 04. 4. 17. x. x, 8. x. x10. 0. 04. 5. 09. x. x11. 0. 04. 5. 010. x. x12. 0. 04. 5. 011. x. x13. 0. 04. 6. 012. x. x13. 0. 05. 0. 02. 10. 213. x. x14. 1. 05. 2. 02. 10. 214. x. x15. 0. 05. 2. 32. 11. 6Instalasi
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 )
Pengaturan LingkunganMari 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
https. //nodejs. org
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
Struktur proyek
Metode 1. Menggunakan Angular CLI (npm install). Dari antarmuka baris perintah, instal bootstrap dan rujuk dalam sudut. json
npm install bootstrap
Di dalam node_mode
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 bootstrap@3.3.7
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-awesomeKesimpulan. 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