html – Bootstrap – 浮动操作按钮菜单大小和阴影

前端之家收集整理的这篇文章主要介绍了html – Bootstrap – 浮动操作按钮菜单大小和阴影前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Bootstrap 3.3和 Bootstrap Material Design framework构建一个应用程序.我正在尝试创建一个浮动操作按钮,当您单击它时会打开.

为了做到这一点,我创建了这个Bootply,其代码如下:

  1. <div class="btn-group dropup floating-action-button">
  2. <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>
  3. <ul class="dropdown-menu dropdown-menu-right" style="min-width:0; background-color:transparent;">
  4. <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a></li>
  5. </ul>
  6. </div>

按钮有效,但看起来不正确.有两个问题让我疯狂.首先,弹出菜单不透明.有一种我似乎无法摆脱的边界和阴影.

其次,我无法使用Bootstrap Material Design framework页面的浮动操作按钮部分中显示的小版本按钮.我不确定我做错了什么.

解决方法

因此,bootstrap CSS中的.dropdown-menu默认为Box-shadow和border,你必须重置它以使其透明.

另外在你的Bootply中它没有应用Material Design Icons,因为你没有链接字体.

关于小图标,将.btn-group-sm添加到.btn-group

这是一个工作的SNIPPET,包含各种尺寸的示例.

  1. .floating-action-button {
  2. position: relative;
  3. top: 100px;
  4. margin-left: 50px;
  5. }
  6. ul.dropdown-menu {
  7. Box-shadow: none;
  8. border: 0;
  9. min-width:0;
  10. background:transparent
  11. }
  1. <!-- jQuery -->
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  3. <!-- Material Design fonts -->
  4. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
  5. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  6. <!-- Bootstrap -->
  7. <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  9. <!-- Code -->
  10. <div class="btn-group btn-group-lg dropup floating-action-button">
  11. <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>
  12. </button>
  13. <ul class="dropdown-menu dropdown-menu-right">
  14. <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
  15. </li>
  16. </ul>
  17. </div><div class="btn-group dropup floating-action-button">
  18. <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>
  19. </button>
  20. <ul class="dropdown-menu dropdown-menu-right">
  21. <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
  22. </li>
  23. </ul>
  24. </div>
  25. <div class="btn-group btn-group-sm dropup floating-action-button">
  26. <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>
  27. </button>
  28. <ul class="dropdown-menu dropdown-menu-right">
  29. <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
  30. </li>
  31. </ul>
  32. </div>
  33. <div class="btn-group btn-group-xs dropup floating-action-button">
  34. <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>
  35. </button>
  36. <ul class="dropdown-menu dropdown-menu-right">
  37. <li><a href="#" class="btn btn-danger btn-fab btn-raised"><i class="material-icons">clear</i></a>
  38. </li>
  39. </ul>
  40. </div>

猜你在找的HTML相关文章