bootstrap下拉選單怎麼寫

Bootstrap 下拉選單是向下展開子選單的選單元件，建立方法如下：建立父選單項，新增「dropdown-toggle」和「data-toggle="dropdown"」屬性。建立下拉內容，使用「dropdown-menu」類別包裝下拉式選單項目。將下拉內容新增至父選單項目。新增“dropdown-menu-right”或“dropdown-menu-left”對齊下拉式選單。新增“divider”類別分隔選單項目。新增「dropdown-header」類別建立標題。

Bootstrap 下拉式選單

下拉選單是Bootstrap 提供的一種選單元件，可以實現子選單從父選單項目向下展開的效果，是建立導覽列和使用者介面的常用元素。

如何建立Bootstrap 下拉選單

<li>

#建立父選單項目：使用<a> 元素包裹選單項目內容，並為其新增dropdown-toggle 類別和data-toggle="dropdown" 屬性。

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

<li>

建立下拉內容：使用<ul> 元素包裹下拉式選單項，並為其新增dropdown-menu 類別。

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

<li>

將下拉內容加入到父選單項目：將<ul> 元素嵌套在<a&gt ; 元素的後面，形成下拉式選單結構。

<code class="html"><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></code>

<li>

新增對齊方式：可透過新增dropdown-menu-right 或dropdown-menu-left 類來調整下拉式選單的對齊方式。

<code class="html"><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></code>

<li>

新增分隔符號：可以使用<li> 元素，並為其新增divider 類別來新增分隔符號。

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

<li>

新增標題：可以使用<li> 元素，並為其添加dropdown-header 類來添加標題。

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

以上是bootstrap下拉選單怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！