Mengapa tiada Kelas Submenu Terbina dalam dalam Bootstrap 3, dan Bagaimana Saya Boleh Menciptanya?

Isu Submenu Bootstrap: Punca dan Penyelesaian

Walaupun Bootstrap 3 menonjol dalam pembangunan, kebimbangan telah timbul mengenai ketiadaan submenu yang jelas. kelas. Panduan ini menjelaskan sebab di sebalik peninggalan ini dan menyediakan remedi praktikal untuk melaksanakan submenu.

Mengapa Submenu Turun Hilang dalam Bootstrap 3?

Dalam perjalanan evolusi Bootstrap, kelas dropdown-submenu telah ditamatkan dengan kemunculan Bootstrap 3 RC. Keputusan ini berpunca daripada pengurangan perkaitan submenu dalam reka bentuk web kontemporari, terutamanya pada peranti mudah alih.

Penyelesaian untuk Membina Submenu

Bootstrap 5:

• Kaedah JavaScript: Halang submenu daripada ditutup apabila lungsur turun induk dibuka dengan menogol paparan antara 'blok' dan 'tiada.'
• Kaedah CSS Sahaja (untuk Dropdown Navbar): Letakkan submenu untuk paparan menggunakan Acara tuding CSS.

Bootstrap 4:

• Css Hack: Simulasikan kefungsian submenu dengan peraturan CSS tambahan, termasuk kedudukan dan kesan tuding.

Bootstrap 3:

• Legasi Kaedah: Gunakan CSS dan markup asal untuk mengekalkan keserasian dengan versi Bootstrap yang lebih lama.

Contoh Pelaksanaan (Bootstrap 3):

<div class="dropdown">
  <button class="dropdown-toggle" data-toggle="dropdown" type="button">
    Example Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

Nota: Pelarasan CSS tambahan mungkin diperlukan untuk menjajarkan submenu dengan betul.

Dengan mengikut garis panduan ini, pembangun boleh dengan mudah melaksanakan fungsi submenu dalam Bootstrap, tanpa mengira versi yang digunakan.

Atas ialah kandungan terperinci Mengapa tiada Kelas Submenu Terbina dalam dalam Bootstrap 3, dan Bagaimana Saya Boleh Menciptanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!