Bootstrap入门（八）组件2：下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
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：下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Redis中的事务
- 下一篇： 密码破解—Hashcat