Gambar latar belakang navbar bootstrap 5

Pelajari cara menambahkan menu navigasi pada gambar dengan CSS

Cobalah sendiri "

Cara Membuat Navbar di Gambar

Langkah 1) Tambahkan HTML

Buat bilah navigasi

Contoh

 

   

     
     
     
     
   

 

Langkah 2) Tambahkan CSS

Gaya bilah navigasi

Contoh

bg-img {
/* Gambar yang digunakan */
gambar latar belakang. url("img_nature. jpg");

min-tinggi. 380px;

/* Pusatkan dan skala gambar dengan baik */
background-position. tengah;
background-repeat. tidak ada pengulangan;
background-size. menutupi;

/* Diperlukan untuk memposisikan navbar */
posisi. relatif;
}

/* Posisikan wadah navbar di dalam gambar */
wadah {
posisi. mutlak;
batas. 20px;
lebar. mobil;
}

/* bilah navigasi */
topnav {
meluap. tersembunyi;
warna latar belakang. #333;
}

/* tautan Navbar */
topnav a {
mengambang. kiri;
warna. #f2f2f2;
perataan teks. tengah;
lapisan. 14px 16px;
dekorasi teks. tidak ada;
ukuran huruf. 17px;
}

topnav a. arahkan {
warna latar belakang. #ddd;
warna. hitam;
}

Cobalah sendiri "

, tambahkan

Bootstrap

0 ke setiap navbar untuk secara eksplisit mengidentifikasinya sebagai kawasan tengara bagi pengguna teknologi pendukung

Tunjukkan item saat ini dengan menggunakan

Bootstrap

1 untuk halaman saat ini atau

Bootstrap

2 untuk item saat ini dalam kumpulan

Konten yang didukung

Navbar hadir dengan dukungan bawaan untuk beberapa sub-komponen. Pilih dari berikut ini sesuai kebutuhan

• Bootstrap

  3 untuk nama perusahaan, produk, atau proyek Anda

• Bootstrap

  4 untuk navigasi tinggi penuh dan ringan (termasuk dukungan untuk dropdown)

• Bootstrap

  5 untuk digunakan dengan plugin collapse kami dan perilaku lainnya
• Utilitas fleksibel dan penspasian untuk kontrol dan tindakan bentuk apa pun

• Bootstrap

  6 untuk menambahkan string teks yang dipusatkan secara vertikal

• Bootstrap

  7 untuk mengelompokkan dan menyembunyikan konten navbar dengan breakpoint induk
• Tambahkan

  Bootstrap

  8 opsional untuk menyetel

  Bootstrap

  9 dan

Berikut adalah contoh dari semua sub-komponen yang termasuk dalam navbar bertema cahaya responsif yang secara otomatis menciut pada breakpoint

Navbar

• Home
• Features
• Pricing
• Disabled

0 (besar)

Navbar

• Home
• Link
• Dropdown
  • Action
  • Another action
  • Something else here
• Disabled

Search

Contoh ini menggunakan kelas utilitas latar belakang (

Navbar

• Home
• Features
• Pricing
• Disabled

1) dan spasi (

Navbar

• Home
• Features
• Pricing
• Disabled

2,

Navbar

• Home
• Features
• Pricing
• Disabled

3,

Navbar

• Home
• Features
• Pricing
• Disabled

4,

Navbar

• Home
• Features
• Pricing
• Disabled

5)

Merek

Bootstrap

3 dapat diterapkan ke sebagian besar elemen, tetapi jangkar berfungsi paling baik, karena beberapa elemen mungkin memerlukan kelas utilitas atau gaya khusus

Teks

Tambahkan teks Anda di dalam elemen dengan kelas

Bootstrap

3

Navbar

Navbar

Gambar

Anda dapat mengganti teks dalam

Bootstrap

3 dengan

Navbar

• Home
• Features
• Pricing
• Disabled

9

Gambar dan teks

Anda juga dapat menggunakan beberapa utilitas tambahan untuk menambahkan gambar dan teks secara bersamaan. Perhatikan penambahan

Navbar

Home Features Pricing Disabled

_0 dan

Navbar

Home Features Pricing Disabled

1 pada

Navbar

• Home
• Features
• Pricing
• Disabled

9

Bootstrap

Tautan navigasi Navbar dibuat berdasarkan

Navbar

Home Features Pricing Disabled

3 opsi kami dengan kelas pengubahnya sendiri dan memerlukan penggunaan gaya responsif yang tepat. Navigasi di navbar juga akan tumbuh untuk menempati ruang horizontal sebanyak mungkin agar konten navbar Anda tetap selaras

Tambahkan kelas

Navbar

Home Features Pricing Disabled

4 pada

Navbar

Home Features Pricing Disabled

5 untuk menunjukkan halaman saat ini

Perhatikan bahwa Anda juga harus menambahkan atribut

Navbar

Home Features Pricing Disabled

6 pada

Navbar

Home Features Pricing Disabled

5 aktif

Navbar

• Home
• Features
• Pricing
• Disabled

Dan karena kami menggunakan kelas untuk navigasi kami, Anda dapat sepenuhnya menghindari pendekatan berbasis daftar jika Anda mau

Navbar

Home Features Pricing Disabled

Anda juga dapat menggunakan dropdown di navbar Anda. Menu tarik-turun memerlukan elemen pembungkus untuk pemosisian, jadi pastikan untuk menggunakan elemen terpisah dan bersarang untuk

Navbar

Home Features Pricing Disabled

8 dan

Navbar

Home Features Pricing Disabled

5 seperti yang ditunjukkan di bawah ini

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

Formulir

Tempatkan berbagai kontrol formulir dan komponen di dalam navbar

Search

Elemen turunan langsung dari

_8 menggunakan tata letak fleksibel dan akan default ke

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

1. Gunakan utilitas fleksibel tambahan yang diperlukan untuk menyesuaikan perilaku ini

Navbar

Navbar

_0

Teks

Navbars mungkin berisi sedikit teks dengan bantuan

Bootstrap

6. Kelas ini menyesuaikan perataan vertikal dan spasi horizontal untuk string teks

Navbar

Navbar

_1

Padu padankan dengan komponen dan utilitas lain sesuai kebutuhan

Navbar

Navbar

_2

Skema warna

Memberi tema navbar tidak pernah semudah ini berkat kombinasi kelas bertema dan utilitas

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

3. Pilih dari

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

_4 untuk digunakan dengan warna latar terang, atau

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

5 untuk warna latar belakang gelap. Kemudian, sesuaikan dengan

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

6 utilitas

Navbar

Navbar

_3

Wadah

Meskipun tidak wajib, Anda dapat membungkus navbar di

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

7 untuk memusatkannya di halaman–namun perhatikan bahwa penampung bagian dalam tetap diperlukan. Atau Anda dapat menambahkan wadah di dalam

8 hanya untuk memusatkan isi a

Navbar

Navbar

_4

Gunakan salah satu wadah responsif untuk mengubah seberapa luas konten di navbar Anda disajikan

Navbar

Navbar

_5

Penempatan

Gunakan utilitas posisi kami untuk menempatkan navbar di posisi non-statis. Pilih dari tetap ke atas, tetap ke bawah, atau menempel ke atas (menggulir dengan halaman hingga mencapai bagian atas, lalu tetap di sana). Memperbaiki navbars menggunakan

Navbar

• Home
• Features
• Pricing
• Dropdown link
  • Action
  • Another action
  • Something else here

_9, yang berarti mereka ditarik dari aliran normal DOM dan mungkin memerlukan CSS khusus (mis. g. ,

Search

0 pada ) untuk mencegah tumpang tindih dengan elemen lain

Perhatikan juga bahwa

Search

1 menggunakan

Search

2, yang tidak sepenuhnya didukung di setiap browser

Navbar

Navbar

_6

Navbar

Navbar

_7

Navbar

Navbar

_8

Navbar

Navbar

_9

Tambahkan

Search

_3 ke

Bootstrap

4 (atau sub-komponen navbar lainnya) untuk mengaktifkan pengguliran vertikal di dalam konten yang dapat dialihkan dari navbar yang diciutkan. Secara default, pengguliran dimulai pada

Search

5 (atau 75% dari tinggi area pandang), tetapi Anda dapat menggantinya dengan properti khusus CSS lokal

Search

6 atau gaya khusus. Pada viewport yang lebih besar saat navbar diperluas, konten akan muncul seperti di navbar default

Perhatikan bahwa perilaku ini memiliki potensi kelemahan

Search

7—ketika menyetel

Search

8 (diperlukan untuk menggulir konten di sini),

Search

9 setara dengan

_0

Perilaku responsif

Navbar dapat menggunakan kelas

Bootstrap

5,

9 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

Bootstrap

3, pengalih secara otomatis akan disejajarkan ke paling kanan. Membalik markup Anda akan membalikkan penempatan toggler. Di bawah ini adalah contoh gaya toggle yang berbeda

Tanpa

Bootstrap

3 ditampilkan pada breakpoint terkecil

_1

Dengan nama merek ditampilkan di sebelah kiri dan toggler di sebelah kanan

_2

Dengan toggler di sebelah kiri dan nama merek di sebelah kanan

_3

Konten eksternal

Terkadang Anda ingin menggunakan plugin collapse untuk memicu elemen penampung untuk konten yang secara struktural berada di luar

8. Karena plugin kami berfungsi pada pencocokan

@

_1 dan

@

2, itu mudah dilakukan

_4

Saat 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 merekomendasikan untuk memastikan bahwa toggler memiliki atribut

@

3, menunjuk ke

@

1 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 merata

Bagaimana cara menambahkan gambar latar belakang di navbar di Bootstrap 5?

Bagaimana cara mengatur gambar latar belakang untuk bilah navigasi di Bootstrap?

Bagaimana cara menambahkan gambar latar belakang di HTML Bootstrap 5?

Bagaimana gaya navbar di Bootstrap 5?