當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap入门（八）组件2：下拉菜单

發布時間：2023/12/9 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap入门（八）组件2：下拉菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Bootstrap入門（八）組件2：下拉菜單先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>當中添加） <link href="css/bootstrap.min.css" rel="stylesheet">? <script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script> 下拉菜單，首先，在容器div中創建一個class為dropdown的div <div class="dropdown">...</div> 1.為下拉菜單添加內容點擊的下拉菜單，觸發器是一個按鈕，而下拉菜單的詳細內容有<ul><li> 標簽的組合來完成　　　　<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li><a href="#">Separated link</a></li></ul></div> 效果

2.有時候我們希望分類放，那就需要一條線來分割，新添加 <li role="presentation" class="divider"></li> 效果：（可能看的不清楚，可以先嘗試）

3.下拉菜單的對齊比如說希望按鈕和按鈕內容都在右邊，可以在<div>和<button>的class添加一個pull-right 屬性，在<ul>標簽中的class添加一個 dropdown-menu-right屬性。（在<button> 中添加pull-right 屬性是為了讓按鈕移動到右邊，，在<ul>添加一個 dropdown-menu-right屬性是為了把內容移動到右邊，而如果沒有在<div>添加pull-right 屬性會使點擊后，會出現內容遮擋住按鈕的情況）修改為：　　　　<div class="dropdown pull-right"><button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">右邊顯示<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="presentation" class="divider"></li><li><a href="#">Separated link</a></li></ul></div> 效果為：

4.給下拉菜單內容添加標題當下拉菜單內容多了之后，希望添加標題對他進行說明或者引導，可以添加標題新添加 <li role="presentation" class="dropdown-header">標題內容</li> 操作：　　　　<div class="dropdown"><button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">帶標題顯示<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">標題1</li><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="presentation" class="dropdown-header">標題2</li><li><a href="#">Action2</a></li><li><a href="#">Another action2</a></li><li><a href="#">Something else here2</a></li><li role="presentation" class="divider"></li><li><a href="#">Separated link</a></li></ul></div> 效果為：

5.部分下拉菜單不可用只需要在需要禁用的內容添加disabled <li class="disabled"><a href="#">內容</a></li> 操作：　　　　<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">一些不可用<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li class="disabled"><a href="#">Action</a></li><li class="disabled"><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="presentation" class="divider"></li><li><a href="#">Separated link</a></li></ul></div>

效果為，禁用內容顯示淡灰色，鼠標移動上去顯示一個禁止的符號

轉載于:https://www.cnblogs.com/hnnydxgjj/p/5858313.html

總結

以上是生活随笔為你收集整理的Bootstrap入门（八）组件2：下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。