Sesuaikan
Pelajari cara membuat tema, menyesuaikan, dan memperluas Bootstrap dengan Sass, banyak pilihan global, sistem warna yang luas, dan banyak lagi.
Ringkasan
Ada beberapa cara untuk menyesuaikan Bootstrap. Jalur terbaik Anda dapat bergantung pada proyek Anda, kompleksitas alat build Anda, versi Bootstrap yang Anda gunakan, dukungan browser, dan banyak lagi.
Dua metode pilihan kami adalah:
- Menggunakan Bootstrap melalui manajer paket sehingga Anda dapat menggunakan dan memperluas file sumber kami.
- Menggunakan file distribusi terkompilasi Bootstrap atau jsDelivr sehingga Anda dapat menambahkan atau mengganti gaya Bootstrap.
Meskipun kami tidak dapat masuk ke detail di sini tentang cara menggunakan setiap manajer paket, kami dapat memberikan beberapa panduan tentang penggunaan Bootstrap dengan kompiler Sass Anda sendiri .
Bagi mereka yang ingin menggunakan file distribusi, tinjau halaman memulai untuk mengetahui cara memasukkan file tersebut dan contoh halaman HTML. Dari sana, lihat dokumen untuk tata letak, komponen, dan perilaku yang ingin Anda gunakan.
Saat Anda membiasakan diri dengan Bootstrap, lanjutkan menjelajahi bagian ini untuk detail lebih lanjut tentang cara memanfaatkan opsi global kami, memanfaatkan dan mengubah sistem warna kami, bagaimana kami membangun komponen kami, cara menggunakan daftar properti kustom CSS kami yang terus bertambah, dan bagaimana untuk mengoptimalkan kode Anda saat membangun dengan Bootstrap.
CSP dan SVG tersemat
Beberapa komponen Bootstrap menyertakan SVG yang disematkan di CSS kami untuk menata komponen secara konsisten dan mudah di seluruh browser dan perangkat. Untuk organisasi dengan konfigurasi CSP yang lebih ketat , kami telah mendokumentasikan semua contoh SVG tersemat kami (semuanya diterapkan melalui background-image) sehingga Anda dapat meninjau opsi Anda secara lebih menyeluruh.
- Akordeon
- Tombol tutup (digunakan dalam peringatan dan modal)
- Formulir kotak centang dan tombol radio
- Sakelar formulir
- Ikon validasi formulir
- Pilih menu
- Kontrol korsel
- Tombol sakelar Navbar
Berdasarkan percakapan komunitas , beberapa opsi untuk mengatasi hal ini di basis kode Anda sendiri termasuk mengganti URL dengan aset yang dihosting secara lokal, menghapus gambar dan menggunakan gambar sebaris (tidak mungkin di semua komponen), dan memodifikasi CSP Anda. Rekomendasi kami adalah meninjau dengan cermat kebijakan keamanan Anda sendiri dan memutuskan jalur terbaik ke depan, jika perlu.