Cara menulis menu lungsur bootstrap

Menu lungsur turun Bootstrap ialah komponen menu yang mengembangkan submenu ke bawah Kaedah penciptaan adalah seperti berikut: buat item menu induk dan tambah atribut "dropdown-toggle" dan "data-toggle="dropdown"". Buat kandungan lungsur turun dan gunakan kelas "menu lungsur" untuk membalut item menu lungsur turun. Tambahkan kandungan lungsur turun pada item menu induk. Tambahkan menu lungsur turun "menu lungsur-kanan" atau "menu lungsur-kiri". Tambahkan kelas "pembahagi" untuk memisahkan item menu. Tambahkan kelas "dropdown-header" untuk membuat header.

Menu lungsur turun Bootstrap

Menu lungsur turun ialah komponen menu yang disediakan oleh Bootstrap, yang boleh mencapai kesan submenu berkembang ke bawah daripada item menu induk Ia adalah elemen biasa untuk membina bar navigasi dan antara muka pengguna.

Cara membuat menu lungsur Bootstrap

<li>

Buat item menu induk: Gunakan elemen <a></a> untuk membungkus kandungan item menu dan menambah dropdown-toggle code> class dan atribut <code>data-toggle="dropdown". <a></a> 元素包裹菜单项内容，并为其添加 dropdown-toggle 类和 data-toggle="dropdown" 属性。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项</a>

<li>

创建下拉内容：使用 <ul></ul> 元素包裹下拉菜单项，并为其添加 dropdown-menu 类。

<ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li><a href="#">子菜单项2</a></li>
  <li><a href="#">子菜单项3</a></li>
</ul>

<li>

将下拉内容添加到父菜单项中：将 <ul></ul> 元素嵌套在 <a></a> 元素的后面，形成下拉菜单结构。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项
  <ul class="dropdown-menu">
 <li><a href="#">子菜单项1</a></li>
 <li><a href="#">子菜单项2</a></li>
 <li><a href="#">子菜单项3</a></li>
  </ul>
</a>

<li>

添加对齐方式：可通过添加 dropdown-menu-right 或 dropdown-menu-left 类来调整下拉菜单的对齐方式。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项
  <ul class="dropdown-menu dropdown-menu-right">
 <li><a href="#">子菜单项1</a></li>
 <li><a href="#">子菜单项2</a></li>
 <li><a href="#">子菜单项3</a></li>
  </ul>
</a>

<li>

添加分隔符：可以使用 <li> 元素，并为其添加 divider 类来添加分隔符。

<ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li class="divider"></li>
  <li><a href="#">子菜单项3</a></li>
</ul>

<li>

添加标题：可以使用 <li> 元素，并为其添加 dropdown-header

<ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li class="dropdown-header">标题</li>
  <li><a href="#">子菜单项3</a></li>
</ul>

🎜Buat kandungan lungsur turun: 🎜Balut item menu lungsur turun dengan elemen <ul></ul> dan tambahkan kelas dropdown-menu padanya. 🎜rrreee🎜🎜🎜🎜Tambahkan kandungan lungsur ke item menu induk: 🎜Sarang elemen <ul></ul> di belakang elemen <a></a> untuk membentuk Struktur Menu lungsur. 🎜rrreee🎜🎜🎜🎜Tambah Penjajaran: 🎜Penjajaran menu lungsur turun boleh dilaraskan dengan menambah kelas dropdown-menu-right atau dropdown-menu-left. 🎜rrreee🎜🎜🎜🎜Tambah pemisah: 🎜Anda boleh menggunakan elemen <li> dan menambah kelas divider padanya untuk menambah pemisah. 🎜rrreee🎜🎜🎜🎜Tambah pengepala: 🎜Anda boleh menggunakan elemen <li> dan menambah kelas dropdown-header untuk menambah pengepala. 🎜rrreee🎜🎜

Atas ialah kandungan terperinci Cara menulis menu lungsur bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!