Dalam tutorial cuplikan Bootstrap hari ini, saya akan menunjukkan cara membuat navbar Bootstrap 4 (Bootstrap 5) dengan logo gambar
Mari kita mulai
Apa itu navbar Bootstrap?
Bootstrap Navbar adalah komponen navigasi horizontal yang dapat digunakan di halaman web dan aplikasi web. Navbar Bootstrap responsif, artinya akan beradaptasi dengan berbagai ukuran layar dan resolusi perangkat
Ini terdiri dari tautan dan tombol yang ketika diklik mengarahkan ke berbagai halaman situs web. Itu juga dapat berisi formulir, ikon, dropdown, dan banyak lagi
Cara menambahkan logo ke Bootstrap navbar - Petunjuk langkah demi langkah
- Tambahkan gambar logo Anda di dalama.navbar-brand
- Anda dapat mengatur ukuran logo denganwidth="",height="" atribut. Saya biasanya mengatur tinggi menjadi 30-40px dan menghitung lebar berdasarkan proporsi gambar Anda
- Jika perlu, tambahkan salah satu kelas .align-top .align-middle .align-bottom untuk menyelaraskan teks yang berdekatan secara vertikal dengan gambar
- Opsional. tambahkan bantalan tambahan ke Merek Navbar dengan kelas utilitas Bootstrap - e. g. .py-1
- Opsional. Gunakan format gambar SVG untuk logo gambar Anda
Instruksi ini juga berlaku untuk Bootstrap 3 atau Bootstrap 5 tanpa perlu perubahan besar
Mengapa navigasi responsif penting dalam desain web?
Dalam hal desain web, navigasi responsif adalah salah satu elemen terpenting situs web Anda. Alasannya adalah karena ada begitu banyak perangkat berbeda yang digunakan orang untuk mengakses situs web
Misalnya, ada orang yang menggunakan komputer desktop, laptop, dan tablet. Hal yang sama berlaku saat Anda menggunakan ponsel juga. Ada orang yang menggunakan smartphone dan phablet
Ini berarti Anda perlu merancang navigasi Anda sedemikian rupa sehingga akan bekerja dengan baik di semua perangkat ini dan di semua resolusi yang berbeda tanpa masalah.
Inilah sebabnya mengapa banyak desainer menggunakan hal serupa seperti Bootstrap Navbar dengan Logo sebagai cara untuk membuat bilah navigasi responsif dengan cepat dan mudah
Jika Anda menyukai cuplikan ini, Anda juga dapat menikmati menjelajahi Tabel Harga Bootstrap atau Halaman Tim Bootstrap
Harap diperhatikan bahwa editor interaktif di halaman ini harus dilihat di laptop atau desktop Anda untuk hasil terbaik
, tambahkan
Bootstrap
_7 ke setiap navbar untuk secara eksplisit mengidentifikasinya sebagai kawasan tengara bagi pengguna teknologi pendukungBootstrap
8 untuk halaman saat ini atauBootstrap
9 untuk item saat ini dalam kumpulanBootstrap
5.Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
Home Features Pricing Navbar
- Home
- Link
-
Dropdown
- Action
- Another action
- Something else here
-
Navbar
Home Features Pricing Navbar
Home Features Pricing Navbar
Home Features Pricing Navbar
Home Features Pricing Navbar
Home Features Pricing Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
Navbar
Gambar
Anda dapat mengganti teks dalam
Navbar
- Home
- Features
- Pricing
-
Navbar
Home Features Pricing
Gambar dan teks
Anda juga dapat menggunakan beberapa utilitas tambahan untuk menambahkan gambar dan teks secara bersamaan. Perhatikan penambahan
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Navbar
Home Features Pricing Bootstrap
Tautan navigasi Navbar dibuat berdasarkan
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Tambahkan kelas
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Harap perhatikan bahwa Anda juga harus menambahkan atribut
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Navbar
- Home
- Features
- Pricing
-
Navbar
Home Features Pricing Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Navbar
- Home
- Features
- Pricing
-
Dropdown link
- Action
- Another action
- Something else here
Formulir
Tempatkan berbagai kontrol formulir dan komponen di dalam navbar
Search
Elemen anak langsung dari
Bootstrap
_5 menggunakan tata letak fleksibel dan akan default keSearch
1. Gunakan utilitas fleksibel tambahan yang diperlukan untuk menyesuaikan perilaku iniNavbar
Navbar
_0Teks
Navbars mungkin berisi potongan teks dengan bantuan
Navbar
- Home
- Features
- Pricing
-
Navbar
Navbar
_1Padu padankan dengan komponen dan utilitas lain sesuai kebutuhan
Navbar
Navbar
_2Skema warna
Baru di v5. 2. 0. Tema Navbar sekarang didukung oleh variabel CSS dan
Navbar
- Home
- Features
- Pricing
-
Bootstrap
5, default ke tampilan "ringan", dan dapat diganti dengan
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
Navbar
Navbar
_3Wadah
Meskipun tidak wajib, Anda dapat membungkus navbar dalam
Search
8 untuk memusatkannya pada halaman–namun perhatikan bahwa penampung bagian dalam tetap diperlukan. Atau Anda dapat menambahkan wadah di dalamBootstrap
5 hanya untuk memusatkan isi aNavbar
Navbar
_4Gunakan salah satu wadah responsif untuk mengubah seberapa luas konten di navbar Anda disajikan
Navbar
Navbar
_5Penempatan
Gunakan utilitas posisi kami untuk menempatkan navbar di posisi non-statis. Pilih dari tetap ke atas, tetap ke bawah, ditempel ke atas (menggulir dengan halaman hingga mencapai bagian atas, lalu tetap di sana), atau menempel di bawah (menggulir dengan halaman hingga mencapai bagian bawah, lalu tetap
Memperbaiki navbar menggunakan
Navbar
Navbar
_6Navbar
Navbar
_7Navbar
Navbar
_8Navbar
Navbar
_9
_0Tambahkan
Navbar
- Home
- Features
- Pricing
-
_1
Perilaku responsif
Navbar dapat menggunakan kelas
Navbar
- Home
- Features
- Pricing
-
Bootstrap
6 untuk menentukan kapan kontennya diciutkan di balik tombol. Dikombinasikan dengan utilitas lain, Anda dapat dengan mudah memilih kapan menampilkan atau menyembunyikan elemen tertentu
Untuk navbar yang tidak pernah runtuh, tambahkan kelas
@
5 di navbar. Untuk navbar yang selalu runtuh, jangan tambahkan kelas@
5Toggler
Pengalih bilah navigasi disejajarkan ke kiri secara default, tetapi jika mengikuti elemen saudara seperti
Navbar
- Home
- Features
- Pricing
-
Navbar
- Home
- Features
- Pricing
-
_2
Dengan nama merek ditampilkan di sebelah kiri dan toggler di sebelah kanan
_3Dengan toggler di sebelah kiri dan nama merek di sebelah kanan
_4Konten eksternal
Terkadang Anda ingin menggunakan plugin collapse untuk memicu elemen penampung untuk konten yang secara struktural berada di luar
Bootstrap
5. Karena plugin kami bekerja padaNavbar
Navbar
_00 danNavbar
Navbar
01 cocok, itu mudah dilakukan
_5Saat Anda melakukan ini, sebaiknya sertakan JavaScript tambahan untuk memindahkan fokus secara terprogram ke penampung saat dibuka. Jika tidak, pengguna keyboard dan pengguna teknologi asistif kemungkinan akan kesulitan menemukan konten yang baru terungkap - terutama jika penampung yang dibuka berada sebelum toggler dalam struktur dokumen. Kami juga menyarankan untuk memastikan bahwa toggler memiliki atribut
Navbar
Navbar
02, menunjuk keNavbar
Navbar
00 dari wadah konten. Secara teori, ini memungkinkan pengguna teknologi bantu untuk melompat langsung dari toggler ke wadah yang dikontrolnya–tetapi dukungan untuk ini saat ini cukup tidak merataDi luar kanvas
Ubah navbar Anda yang meluas dan menciut menjadi laci offcanvas dengan komponen offcanvas. Kami memperluas gaya default offcanvas dan menggunakan kelas
Navbar
Navbar
04 kami untuk membuat sidebar navigasi yang dinamis dan fleksibelPada contoh di bawah ini, untuk membuat offcanvas navbar yang selalu diciutkan di semua breakpoint, hilangkan kelas
Navbar
Navbar
04 seluruhnya
_6Untuk membuat navbar offcanvas yang diperluas menjadi navbar normal pada breakpoint tertentu seperti
Navbar
Home Features Pricing Navbar
Navbar
07
_7Saat menggunakan offcanvas di navbar gelap, ketahuilah bahwa Anda mungkin perlu memiliki latar belakang gelap pada konten offcanvas untuk menghindari teks menjadi tidak terbaca. Dalam contoh di bawah ini, kami menambahkan
Navbar
- Home
- Features
- Pricing
-
Navbar
Navbar
09 keBootstrap
5,Navbar
Navbar
11 keNavbar
Navbar
12,Navbar
Navbar
13 keNavbar
Navbar
14, danNavbar
Navbar
15 ke ________16 untuk penataan gaya can__va yang tepat dengan____
_8CSS
Variabel
Ditambahkan di v5. 2. 0Sebagai bagian dari pendekatan variabel CSS Bootstrap yang terus berkembang, navbar sekarang menggunakan variabel CSS lokal pada
Bootstrap
5 untuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung
_9Beberapa variabel CSS tambahan juga ada di
Navbar
- Home
- Features
- Pricing
-
Bootstrap
0
Kustomisasi melalui variabel CSS dapat dilihat pada kelas
Navbar
- Home
- Features
- Pricing
-
Bootstrap
_1
Variabel sass
Variabel untuk semua navbar
Bootstrap
_2Variabel untuk
Bootstrap
_3Sass loop
(mis. g. ,
Navbar
Navbar
_07) digabungkan dengan petaNavbar
Navbar
21 dan dihasilkan melalui loop diNavbar
Navbar
22Bagaimana cara menambahkan logo ke bilah navigasi saya?
Menambahkan gambar logo ke navbar dan footer .Buka header-top-navbar. php di dalam folder template di editor AndaTemukan elemen berikut. .Hapus tag berikut, yang menempatkan nama situs kami di dalam tautan merek navbar. .Ganti baris kode sebelumnya dengan tag yang sesuai untuk gambar logo kitaBagaimana cara meletakkan item navigasi di dalam bilah navigasi di bootstrap?
Untuk menambahkan tautan di dalam navbar, gunakan elemen Kemudian tambahkan elemen : Link 1. Link 2.Bagaimana cara menambahkan gambar ke bilah navigasi saya di HTML?
Contoh ./* Gambar yang digunakan */ background-image. url("img_nature. jpg"); min-tinggi. 380px; .posisi. mutlak; . 20px; . mobil;meluap. tersembunyi; . #333;mengambang. kiri; . #f2f2f2; . tengah;.warna latar belakang. #ddd; . hitam;