Bagaimana untuk Mengintegrasikan Logo dengan Cekap ke dalam Navbar Bootstrap 3?

Bootstrap 3 Navbar dengan Logo

Mencipta navbar tersuai dengan logo imej boleh menambah daya tarikan visual pada tapak web Bootstrap 3 anda. Untuk mencapai matlamat ini, pertimbangkan amalan terbaik berikut:

Saiz dan Peletakan Imej yang Betul

Pastikan imej logo anda sesuai dengan ketinggian bar navigasi. Laraskan imej menggunakan CSS atau pilih imej yang bersaiz sesuai. Ingat bahawa penampilan imej sangat bergantung pada saiznya.

Bertentangan dengan kepercayaan umum, adalah tidak perlu untuk meletakkan imej di dalam sauh dengan kelas "jenama navbar". Kelas "navbar-brand" menggunakan gaya berkaitan teks dan kelas "navbar-left" pada imej. Sebaliknya, cuma tambah kelas "navbar-left" untuk mencapai kedudukan dijajar kiri yang diingini.

Contoh Kod

<a href="#" class="navbar-left">
  <img  src="/static/imghwm/default1.png" data-src="/path/to/image.png" class="lazy" alt="Bagaimana untuk Mengintegrasikan Logo dengan Cekap ke dalam Navbar Bootstrap 3?" >
</a>

Reka Bentuk Responsif untuk Kebolehruntuhan

Untuk navigasi responsif pada skrin kecil, cuma ikut bar navigasi di sebelah kiri sauh dengan item jenama navbar. Yang terakhir akan muncul di sebelah kanan imej dan kekal kelihatan walaupun bar navigasi runtuh.

Atas ialah kandungan terperinci Bagaimana untuk Mengintegrasikan Logo dengan Cekap ke dalam Navbar Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!