Bootstrap拉菜单向上弹出
有些菜单是需要向上弹出的，比如，菜单在页面最底部，而这个菜单正好有一个下拉菜单，为了让用户有更好的体验，不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”，只需要在“btn-group”上添加这个类名即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://www.qiquanji.com/mip/js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.js"></script> <link rel="stylesheet" href="https://demo.xiaohuochai.site/bootstrap/bootstrap.min.css"> <style type="text/css"> /*这个三角形完全是通过CSS代码来实现的*/ .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } /*另外在按钮中的三角形“caret”做了一定的样式处理：*/ .btn .caret { margin-left: 0; } .btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; } .dropup .btn-lg .caret { border-width: 0 5px 5px; } /*如果三角方向需要朝上显示，需要在“.btn-group”类上追加“dropup”类名，可以看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值*/ .dropup .caret, .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px solid; } </style> </head> <body> <div class="btn-group dropup" style="margin-top:140px"> <!--按钮默认向下的三角形，是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”--> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">拉菜01</a></li> <li><a href="##">拉菜02</a></li> <li><a href="##">拉菜03</a></li> <li><a href="##">拉菜04</a></li> </ul> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知