1.引用Bootstrap

　　示例引用的Bootstrap版本：v3.3.7

<script src="~/Scripts/jquery-2.2.4.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

?2.基本實(shí)例

2.1 示例代碼

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜單<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜單項(xiàng)1</a></li><li><a href="#">菜單項(xiàng)2</a></li><li><a href="#">菜單項(xiàng)3</a></li></ul> </div>

　　.dropdown：定義下拉菜單框

　　.dropdown-toggle：定義下拉菜單的觸發(fā)元素

　　data-toggle="dropdown"：觸發(fā)下拉菜單

　　.dropdown-menu：定義下拉菜單條面板

2.2 示例效果

3.設(shè)置選項(xiàng)

3.1右對齊菜單

　　默認(rèn)下拉菜單為左對齊顯式，在.dropdown-menu元素中添加.dropdown-menu-right設(shè)置右對齊下拉菜單，添加.dropdown-menu-left設(shè)置左對齊下拉菜單。

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜單<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right"><li><a href="#">菜單項(xiàng)1</a></li><li><a href="#">菜單項(xiàng)2</a></li><li><a href="#">菜單項(xiàng)3</a></li></ul> </div>

3.2 禁用菜單項(xiàng)

　　在下拉菜單中的<li>標(biāo)簽添加.disabled，禁用菜單項(xiàng)。

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜單<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜單項(xiàng)1</a></li><li class="disabled"><a href="#">菜單項(xiàng)2</a></li><li><a href="#">菜單項(xiàng)3</a></li></ul> </div>

3.3 設(shè)計(jì)菜單分隔線

　　在下拉菜單中添加.divider的<li>標(biāo)簽，即在下拉菜單中插入一條分隔線。

<div class="dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜單<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜單項(xiàng)1</a></li><li><a href="#">菜單項(xiàng)2</a></li><li class="divider"></li><li><a href="#">菜單項(xiàng)3</a></li></ul> </div>

3.4 設(shè)計(jì)向上彈出菜單

　　下拉菜單組件框改為.dropup，即可讓下拉菜單向上彈出。

<div class="dropup"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜單<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜單項(xiàng)1</a></li><li><a href="#">菜單項(xiàng)2</a></li><li class="divider"></li><li><a href="#">菜單項(xiàng)3</a></li></ul> </div>

轉(zhuǎn)載于:https://www.cnblogs.com/libingql/p/5840460.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap3系列：下拉菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。