1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

Bootstrap拉菜单向上弹出

有些菜单是需要向上弹出的,比如,菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”,只需要在“btn-group”上添加这个类名即可。

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  <script src="https://www.qiquanji.com/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/post/8001.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: