wake-up-neo.com

Bootstrap - Größe und Schatten der Aktionsschaltfläche

Ich baue eine App mit Bootstrap 3.3 und Bootstrap Material Design Framework . Ich versuche, eine schwebende Aktionsschaltfläche zu erstellen, die sich öffnet, wenn Sie darauf klicken.

Um dies zu versuchen, habe ich Bootply erstellt, das den folgenden Code enthält:

<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>

Die Knöpfe funktionieren, sehen aber nicht richtig aus. Es gibt zwei Probleme, die mich verrückt machen. Erstens ist das Popup-Menü nicht transparent. Es gibt einen border und einen Schatten, den ich scheinbar nicht loswerden kann.

Zweitens kann ich die kleine Version der Schaltflächen nicht verwenden, wie in den Abschnitten Floating Action Buttons der Bootstrap Material Design - Seite gezeigt. Ich bin mir nicht sicher, was ich falsch mache.

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-material-design
7
user70192

Daher hat .dropdown-menu im Bootstrap-CSS standardmäßig box-shadow und border, die Sie zurücksetzen müssen, um sie transparent zu machen.

Außerdem werden in Ihrem Bootply keine Material Design Icons angewendet, da Sie die Schriftarten nicht verknüpft haben.

Bei kleinen Symbolen fügen Sie .btn-group-sm zu .btn-group hinzu.

Hier ist ein funktionierendesSCHNIPSELmit Beispielen für jede Größe.

.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>

6
dippas

Ich würde nicht sagen, dass es ideal ist, aber das Folgende scheint einen Teil Ihres Problems zu lösen.

.dropdown-menu {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

Leider konnte ich nicht herausfinden, was die Klasse material-icons nicht funktionierte. Hoffentlich hilft Ihnen diese Antwort, einer Lösung näher zu kommen.

0
Dexter