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
  
    
  

  
    
      
      Search
    
  

Contoh ini menggunakan kelas utilitas warna (



  
    
    Bootstrap
  
_6) dan spasi (


  
    
    Bootstrap
  
7,


  
    
    Bootstrap
  
8,


  
    
    Bootstrap
  
9,

  Navbar
  
    
  
  
  

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
  
    
  
  
  

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
  
    
  
  
  

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

  Navbar
  
    
  
  
  

5 atau induk langsungnya

  Navbar
  
    
  
  
  

6s


  Navbar
  
    
  
  
  

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


  Navbar
  
    
  
  
  

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
  
    
  
  
  

6 dan

  Navbar
  
    
  
  
  

5 seperti yang ditampilkan di bawah ini


  Navbar
  
    
  
  
  

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
  
    
  
  
  

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


  Navbar
  
    
    Search
  

Grup input juga berfungsi


  
    

@

Berbagai tombol juga didukung sebagai bagian dari bentuk navbar ini. Ini juga merupakan pengingat yang bagus bahwa utilitas perataan vertikal dapat digunakan untuk menyelaraskan elemen berukuran berbeda



  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
  
    
  
  
  

3. Pilih dari

  Navbar
  
    
  
  
  

_4 untuk digunakan dengan warna latar terang, atau

  Navbar
  
    
  
  

5 untuk warna latar belakang gelap. Kemudian, sesuaikan dengan

  Navbar
  
    
  
  
  

_6 utilitas



  Navbar




  Navbar
_3

Wadah

Meskipun tidak wajib, Anda dapat membungkus navbar di


  Navbar
  
    
  
  
  

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
  
    
  
  
  

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

  Navbar
  
    
  
  
  

0 pada ) untuk mencegah tumpang tindih dengan elemen lain

Perhatikan juga bahwa


  Navbar
  
    
  
  
  

1 menggunakan

  Navbar
  
    
  
  
  

2, yang



  Navbar




  Navbar
6


  Navbar




  Navbar
7


  Navbar




  Navbar
8


  Navbar




  Navbar
9

Perilaku responsif

Navbars dapat menggunakan kelas



  
    
    Bootstrap
  
1,

  Navbar
  
    
  
  
  

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
  
    
  
  
  

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

  Navbar
  
    
  
  
  

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?

Cara membuat Menu Responsif Sidebar menggunakan Bootstrap 4 .
Pada langkah pertama, muat kerangka kerja Bootstrap 4, jQuery, dan Font Awesome dengan menambahkan tautan CDN berikut ke dalam tag kepala laman web Anda. .
Setelah itu, buat struktur HTML untuk menu side bar seperti berikut

Bagaimana cara membuat sidebar responsif di Bootstrap?

Bilah Samping Sederhana . Untuk membuat sidebar seperti itu, tambahkan atribut data-position='slidepush' dan data-placement='left' di tag 'a' .

Bagaimana cara membuat menu sidebar di Bootstrap 4?

Pada contoh di atas, kita telah membuat menu sidebar dengan bantuan bootstrap 4. .
<. DOCTYPE html>
Bootstrap 4 Contoh Sidebar
.

Apa itu menu sidebar responsif sederhana?

Tata Letak Menu Sisi Responsif adalah jenis bilah menu responsif di CSS Murni, yang mengubah bilah menu horizontal menjadi tombol sakelar tersembunyi saat ukuran layar diperkecil. When the width of the website changes from device to device, such as on tablets and smartphones, it is used to make the menu bar responsive.