Bootstrap 4 menu sidebar responsif dengan sub menu

Dokumentasi dan contoh untuk header navigasi Bootstrap yang kuat dan responsif, navbar. Mencakup dukungan untuk pencitraan merek, navigasi, dan lainnya, termasuk dukungan untuk plugin penciutan kami

Bagaimana itu bekerja

Inilah yang perlu Anda ketahui sebelum memulai dengan navbar

• Navbar membutuhkan pembungkus _4 dengan 5 untuk penciutan dan kelas yang responsif
• Navbars dan isinya lancar secara default. Gunakan untuk membatasi lebar horizontalnya
• Gunakan kelas utilitas penspasian dan kelenturan kami untuk mengontrol penspasian dan penyelarasan dalam navbar
• Navbar responsif secara default, tetapi Anda dapat dengan mudah memodifikasinya untuk mengubahnya. Perilaku responsif bergantung pada plugin Ciutkan JavaScript kami
• Navbars disembunyikan secara default saat mencetak. Paksa untuk dicetak dengan menambahkan _6 ke 4. Lihat kelas utilitas tampilan
• Pastikan aksesibilitas dengan menggunakan elemen atau, jika menggunakan elemen yang lebih umum seperti a

  , tambahkan 8 ke setiap navbar untuk secara eksplisit mengidentifikasinya sebagai wilayah tengara bagi pengguna teknologi pendukung

Baca terus untuk contoh dan daftar sub-komponen yang didukung

Konten yang didukung

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

• _9 untuk nama perusahaan, produk, atau proyek Anda
• Bootstrap 0 untuk navigasi tinggi penuh dan ringan (termasuk dukungan untuk dropdown)
• Bootstrap 1 untuk digunakan dengan plugin collapse kami dan perilaku lainnya
• Bootstrap _2 untuk kontrol bentuk dan tindakan apa pun
• Bootstrap 3 untuk menambahkan string teks yang dipusatkan secara vertikal
• Bootstrap 4 untuk mengelompokkan dan menyembunyikan konten navbar dengan breakpoint induk

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

Navbar

• Home (current)
• Link
• Dropdown

  Action Another action Something else here

• Disabled

Search

Contoh ini menggunakan kelas utilitas warna ( Bootstrap _6) dan spasi ( Bootstrap 7, Bootstrap 8, Bootstrap 9, Navbar

• Home (current)
• Features
• Pricing
• Disabled

0)

Merek

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

Navbar Navbar

Menambahkan gambar ke _9 kemungkinan akan selalu membutuhkan gaya atau utilitas khusus untuk menyesuaikan ukurannya. Berikut beberapa contoh untuk didemonstrasikan

Bootstrap

Tautan navigasi Navbar dibuat berdasarkan Navbar

• Home (current)
• 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

Status aktif—dengan Navbar

• Home (current)
• Features
• Pricing
• Disabled

4—untuk menunjukkan bahwa halaman saat ini dapat diterapkan langsung ke Navbar

• Home (current)
• Features
• Pricing
• Disabled

5 atau induk langsungnya Navbar

• Home (current)
• Features
• Pricing
• Disabled

6s

Navbar

• Home (current)
• Features
• Pricing
• Disabled

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

Navbar

Home (current) Features Pricing Disabled

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

• Home (current)
• Features
• Pricing
• Disabled

6 dan Navbar

• Home (current)
• Features
• Pricing
• Disabled

5 seperti yang ditampilkan di bawah ini

Navbar

• Home (current)
• Features
• Pricing
• Dropdown link

  Action Another action Something else here

Formulir

Tempatkan berbagai kontrol formulir dan komponen di dalam navbar dengan Bootstrap 2

Search

Elemen turunan langsung di _4 menggunakan tata letak fleksibel dan akan default ke Navbar

Home (current) Features Pricing Disabled

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

Navbar Navbar _0

Teks

Navbars mungkin berisi potongan teks dengan bantuan Bootstrap 3. 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 (current) Features Pricing Disabled

3. Pilih dari Navbar

Home (current) Features Pricing Disabled

_4 untuk digunakan dengan warna latar terang, atau Navbar

Home (current) Features Pricing Disabled

5 untuk warna latar belakang gelap. Kemudian, sesuaikan dengan Navbar

Home (current) Features Pricing Disabled

_6 utilitas

Navbar Navbar _3

Wadah

Meskipun tidak wajib, Anda dapat membungkus navbar di Navbar

Home (current) Features Pricing Disabled

7 untuk memusatkannya pada halaman atau menambahkannya di dalam hanya untuk memusatkan konten dari

Navbar Navbar _4

Saat wadah berada di dalam navbar Anda, padding horizontalnya dihapus pada breakpoint yang lebih rendah dari kelas 5 yang Anda tentukan. Ini memastikan kami tidak menggandakan padding yang tidak perlu pada area pandang yang lebih rendah saat navbar Anda diciutkan

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 navbar menggunakan Navbar

Home (current) Features Pricing Disabled

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

• Home (current)
• Features
• Pricing
• Dropdown link

  Action Another action Something else here

0 pada ) untuk mencegah tumpang tindih dengan elemen lain

Perhatikan juga bahwa Navbar

• Home (current)
• Features
• Pricing
• Dropdown link

  Action Another action Something else here

1 menggunakan Navbar

• Home (current)
• Features
• Pricing
• Dropdown link

  Action Another action Something else here

2, yang

Navbar Navbar 6 Navbar Navbar 7 Navbar Navbar 8 Navbar Navbar 9

Perilaku responsif

Navbars dapat menggunakan kelas Bootstrap 1, Navbar

• Home (current)
• Features
• Pricing
• Dropdown link

  Action Another action Something else here

4, dan 5 untuk berubah ketika kontennya runtuh 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 Navbar

• Home (current)
• Features
• Pricing
• Dropdown link

  Action Another action Something else here

6 pada navbar. Untuk navbar yang selalu runtuh, jangan tambahkan kelas Navbar

• Home (current)
• Features
• Pricing
• Dropdown link

  Action Another action Something else here

6

Toggler

Pengalih bilah navigasi disejajarkan ke kiri secara default, tetapi jika mengikuti elemen saudara seperti 9, pengalih tersebut akan secara otomatis disejajarkan ke paling kanan. Membalik markup Anda akan membalikkan penempatan toggler. Di bawah ini adalah contoh gaya toggle yang berbeda

Tanpa _9 ditampilkan di breakpoint terendah

0

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

_1

Dengan toggler di sebelah kiri dan nama merek di sebelah kanan

_2

Konten eksternal

Terkadang Anda ingin menggunakan plugin collapse untuk memicu konten tersembunyi di tempat lain di halaman. Karena plugin kami berfungsi pada pencocokan Search _0 dan Search 1, itu mudah dilakukan

Bagaimana cara membuat menu sidebar responsif di Bootstrap 4?

Bagaimana cara membuat sidebar responsif di Bootstrap?

Bagaimana cara membuat menu sidebar di Bootstrap 4?

Apa itu menu sidebar responsif sederhana?