Bagaimanakah Saya Boleh Menukar Warna Butang Togol Navbar Bootstrap 4?

Menyesuaikan Warna Butang Togol Bootstrap 4 Navbar

Konteks:

Dalam tapak web Bootstrap, lebih kecil skrin biasanya menampilkan butang menu hamburger untuk navigasi. Butang ini, secara lalai, mempunyai warna tertentu.

Soalan:

Bolehkah anda mengubah suai warna butang togol navbar Bootstrap 4?

Jawapan:

Menggunakan Bootstrap's Gaya Pratakrif:

Bootstrap 4 menggunakan imej latar belakang SVG untuk ikon togol. Terdapat kelas khusus untuk gaya yang berbeza:

• .navbar-gelap: Ikon berwarna terang pada latar belakang gelap
• .navbar-light: Ikon berwarna gelap pada latar belakang terang

Menyesuaikan Ikon:

Jika ini pilihan yang dipratentukan tidak sesuai dengan keperluan anda, anda boleh mencipta ikon SVG tersuai dengan warna yang dikehendaki. Contohnya:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

Kod ini menetapkan warna ikon kepada merah jambu. Anda boleh melaraskan nilai dalam fungsi rgba() agar sepadan dengan warna pilihan anda.

Menggunakan Perpustakaan Ikon Luaran:

Sebagai alternatif, anda boleh menggunakan ikon daripada perpustakaan seperti Font Hebat, memastikan anda menggunakan kelas CSS yang diperlukan untuk digayakan mereka.

Kemas kini dalam Bootstrap 4.0.0:

Sebelum ini dikenali sebagai navbar-inverse, kelas navbar bertema gelap kini menjadi navbar-dark, yang menghasilkan warna yang lebih terang untuk pautan dan butang togol.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Butang Togol Navbar Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!