大佬教程收集整理的这篇文章主要介绍了html – Bootstrap – 浮动操作按钮菜单大小和阴影,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
为了做到这一点,我创建了这个Bootply,其代码如下:
<div class="btn-group dropup floaTing-action-button"> <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i></button> <ul class="dropdown-menu dropdown-menu-right" style="min-width:0; BACkground-color:transparent;"> <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a></li> </ul> </div>
按钮有效,但看起来不正确.有两个问题让我疯狂.首先,弹出菜单不透明.有一种我似乎无法摆脱的边界和阴影.
其次,我无法使用Bootstrap Material Design framework页面的浮动操作按钮部分中显示的小版本按钮.我不确定我做错了什么.
另外在你的Bootply中它没有应用Material Design Icons,因为你没有链接字体.
关于小图标,将.btn-group-sm添加到.btn-group
这是一个工作的SNIPPET,包含各种尺寸的示例.
.floaTing-action-button { position: relative; top: 100px; margin-left: 50px; } ul.dropdown-menu { box-shadow: none; border: 0; min-width:0; BACkground:transparent }
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Material Design fonts --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Bootstrap --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- Code --> <div class="btn-group btn-group-lg dropup floaTing-action-button"> <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a> </li> </ul> </div><div class="btn-group dropup floaTing-action-button"> <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a> </li> </ul> </div> <div class="btn-group btn-group-sm dropup floaTing-action-button"> <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a> </li> </ul> </div> <div class="btn-group btn-group-xs dropup floaTing-action-button"> <button type="button" class="btn btn-info btn-fab btn-raised dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="material-icons">save</i> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a> </li> </ul> </div>
以上是大佬教程为你收集整理的html – Bootstrap – 浮动操作按钮菜单大小和阴影全部内容,希望文章能够帮你解决html – Bootstrap – 浮动操作按钮菜单大小和阴影所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。