bootstrap有沒有上拉選單

bootstrap有上拉選單；按鈕選單不但可以下拉，也可以上拉，需要把預設的下拉改成上拉，只需要在父元素中加入「.dropup」來觸發元素上方的下拉式選單即可，語法為「

」。

本教學操作環境：Windows10系統、bootstrap5版、DELL G3電腦

bootstrap有上拉選單

#透過向父元素添加.dropup來觸發元素上方的下拉式選單。

按鈕選單不只可以下拉，也可以上拉。要把預設的下拉改成上拉，只要為 .btn-group 容器追加一個 .dropup 類就行了。如：

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

輸出結果：

#擴展知識

首先我們應該明白：下拉式選單是由：按鈕、下拉圖示和無序列表組成。

下拉式選單觸發器和下拉式選單都包含在  .dropdown中。

在button標籤中，使用的屬性有        

class="btn btn-default dropdown-toggle"     type="button" 
                id="dropdownMenu1"         data-toggle="dropdown"         aria-haspopup="true" 
                aria-expanded="true"

在span標籤中，使用到的屬性值有         class = "caret"

#無序列表元素                

               

標籤定義不對齊序列表menu-left左對齊。

有序清單

元素

               

標籤定義有序清單##         start 。
                 ol常用的屬性有  type   ：   規定使用中所使用的標記類型。
1. 元素
                    
2. 標籤定義清單項目。
                  
3. 標籤可用在有序清單 (
   ) 和無序列表 (
   ) 中。
   分離式按鈕下拉式選單
                   分割式按鈕要變更一些標記，請將

   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

   加粗的true改為flase。
                   接上

   <span class="sr-only">Toggle Dropdown</span>。

   相關建議：

   bootstrap教學

   #############################################################

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