Bagaimanakah Saya Boleh Menukar Warna Ikon Toggler Navbar Bootstrap 4?

Mengubah suai Warna Ikon Butang Navbar Bootstrap 4

Ikon togol bar navigasi Bootstrap 4, yang diwakili oleh ikon hamburger, menggunakan imej latar belakang SVG . Dua variasi imej ikon wujud: satu untuk latar belakang terang dan satu lagi untuk latar belakang gelap.

Untuk menentukan warna togol, anda boleh menggunakan kelas berikut:

• navbar -gelap: Memaparkan togol terang/putih pada lebih gelap latar belakang.
• lampu bar navigasi: Memaparkan togol gelap/kelabu pada latar belakang yang lebih terang.

Walau bagaimanapun, jika anda ingin menyesuaikan lagi warna togol, anda boleh membuat ikon tersuai. Sebagai contoh, coretan kod di bawah menetapkan warna togol kepada merah jambu (255, 102, 203) menggunakan nilai stroke='rgba(255,102,203, 0.5)' dalam data SVG:

.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");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 102, 203);
}

Untuk demonstrasi langsung, rujuk http://www.codeply.com/go/4FdZGlPMNV.

Sebagai alternatif, anda juga boleh menggunakan ikon daripada perpustakaan luaran seperti Font Awesome.

Bermula dengan Bootstrap 4 Beta, navbar-inverse telah digantikan dengan navbar-dark untuk navbar dengan latar belakang yang lebih gelap, menghasilkan pautan yang lebih terang dan warna togol.

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