Untuk melaksanakan bar navigasi mudah alih skrin penuh di Bootstrap, anda perlu menggabungkan komponen lalai dan gaya tersuai; 1. Gunakan struktur navbar lalai bootstrap sebagai asas untuk membina bar navigasi responsif; 2. Tambahkan gaya CSS tersuai untuk membuat menu menutup skrin penuh dan pusat kandungan apabila berkembang; 3. Anda secara automatik boleh menutup bar navigasi selepas mengklik pautan melalui atribut HTML atau JavaScript; 4. Perhatikan untuk menetapkan pengoptimuman terperinci seperti Z-indeks, padding-top, animasi peralihan dan kawalan tatal untuk meningkatkan pengalaman.

Navbar mudah alih skrin penuh tidak rumit dalam bootstrap, tetapi ia perlu dilaksanakan dalam kombinasi dengan komponen lalai dan beberapa gaya tersuai. Bootstrap sendiri menyediakan infrastruktur bar navigasi responsif, tetapi untuk mencapai kesan "skrin penuh", CSS tambahan dan JS diperlukan.

1. Gunakan struktur navbar lalai bootstrap

Pertama, anda perlu membina navbar responsif standard menggunakan kelas dan struktur yang disediakan oleh Bootstrap. Bahagian ini adalah asas dan prasyarat untuk pengembangan berikutnya.

 <nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <a class = "navbar-brand" href = "#"> logo </a>
  <Button class = "Navbar-Toggler" Type = "Button" Data-Bs-Toggle = "Collapse" Data-Bs-Target = "#FullScreenNavbar">
    <span class = "navbar-toggler-icon"> </span>
  </butang>

  <div class = "runtuh navbar-collapse" id = "fullscreennavbar">
    <ul class = "Navbar-nav ME-Auto MB-2 MB-LG-0">
      <li class = "nav-item"> <a class = "nav-link" href = "#"> home </a> </li>
      <li class = "nav-item"> <a class = "nav-link" href = "#"> service </a> </li>
      <li class = "nav-item"> <a class = "nav-link" href = "#"> Mengenai kami </a> </li>
    </ul>
  </div>
</nav>

Bahagian kod ini sudah membolehkan bar navigasi runtuh dan paparan pada skrin kecil, tetapi ia tidak dapat mengisi keseluruhan skrin.

2. Tambahkan CSS tersuai untuk mencapai kesan skrin penuh

Agar menu navigasi untuk menduduki keseluruhan skrin apabila berkembang, beberapa gaya tambahan perlu ditambah untuk mengatasi kelakuan .navbar-collapse .

 @media (max-width: 991px) {
  .NAVBAR-COLLAPSE {
    Kedudukan: Tetap;
    Atas: 0;
    Kiri: 0;
    Lebar: 100%;
    Ketinggian: 100VH;
    latar belakang warna: putih;
    Z-indeks: 9999;
    Padding-top: 56px; /* Laraskan mengikut ketinggian navbar anda*/
    Paparan: Flex;
    Align-item: pusat;
    Justify-Content: Center;
  }

  .NAVBAR-NAV {
    flex-arah: lajur;
    Teks-Align: Pusat;
    saiz font: 1.5rem;
  }

  .NAV-LINK {
    Margin: 1rem 0;
  }
}

Selepas menetapkan ini, klik butang menu pada peranti mudah alih anda, dan menu akan menutup seluruh skrin dan memusatkan pautan.

3. Pilihan: Klik item menu untuk menutup bar navigasi secara automatik

Sesetengah pengguna mungkin mahu menutup menu secara automatik selepas mengklik pautan dan bukannya mengklik semula secara manual. Anda boleh melakukannya dengan cara berikut:

• Tambahkan data-bs-toggle="collapse" atribut ke setiap .nav-link
• Atau dengar klik acara melalui JavaScript dan sembunyikannya secara manual

Contoh HTML:

 <a class = "nav-link" href = "#" data-bs-toggle = "runtuh" data-bs-target = "#fullscreennavbar.show"> home </a>

Atau tulis JS yang mudah:

 document.QuerySelectorAll ('. nav-link'). foreach (link => {
  pautan.addeventListener ('klik', () => {
    const bscollapse = bootstrap.collapse baru (document.getElementById ('fullScreenNavbar'), {
      Togol: Salah
    });
    bscollapse.hide ();
  });
});

4. Langkah berjaga -jaga dan pengoptimuman butiran

• Indeks Z harus cukup tinggi untuk mengelakkan dikaburkan oleh kandungan halaman.
• Nilai padding-top hendaklah ditetapkan mengikut ketinggian Navbar sebenar anda, jika tidak, kandungan teratas akan disekat.
• Jika anda ingin menambah peralihan animasi, anda boleh menambah transition: transform 0.3s ease; dan sifat-sifat lain untuk .navbar-collapse .
• Apabila menatal halaman, adalah yang terbaik untuk membuat badan tidak boleh digerakkan. Anda boleh menambah overflow:hidden ke badan menggunakan JS.

Pada dasarnya itu sahaja. Walaupun Bootstrap tidak secara langsung menyediakan komponen "navigasi skrin penuh", dengan sedikit pengubahsuaian, ia dapat merealisasikan pengalaman menu mudah alih yang biasa di laman web moden.

Atas ialah kandungan terperinci Bagaimana untuk membuat navbar mudah alih skrin penuh di bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!