it-swarm.com.ru

Bootstrap - размер и тень меню с плавающей кнопкой действий

Я создаю приложение с помощью Bootstrap 3.3 и Bootstrap Material Design framework . Я пытаюсь сделать плавающую кнопку действия, которая открывается при нажатии на нее.

В попытке сделать это, я создал этот 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>

Кнопки работают, но выглядят неправильно. Есть две проблемы, которые сводят меня с ума. Во-первых, всплывающее меню не прозрачно. Есть как border и тень, от которой я не могу избавиться.

Во-вторых, я не могу использовать уменьшенную версию кнопок, как показано в разделе Плавающие кнопки действия в Bootstrap Material Design framework page. Я не уверен, что я делаю неправильно.

7
user70192

Таким образом, .dropdown-menu в загрузочном CSS имеет по умолчанию box-shadow и border, которые необходимо сбросить, чтобы сделать его прозрачным.

Кроме того, в вашем Bootply не применяются значки дизайна материалов, потому что вы не связали шрифты.

Что касается маленьких значков, добавьте .btn-group-sm к .btn-group

Вот рабочийФРАГМЕНТс примерами для всех размеров.

.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

Я бы не сказал, что это идеально, но следующее, кажется, решает часть вашей проблемы.

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

К сожалению, я не смог выяснить, что класс material-icons не работал. Надеюсь, этот ответ поможет вам приблизиться к решению.

0
Dexter