Создание бутстрапа выпадающего прозрачного

Question

Мне нужно получить раскрывающееся окно бутстрапа. Как это можно достичь. Ниже HTML

<div id="mydiv" class="dropdown transparentbar" style="z-index:4"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     Drop mat 
     <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul>   

CSS

 
    .transparentbar { 
     background-repeat:no-repeat; 
     cursor:pointer; 
     outline:none; 
     border:none; 
     box-shadow:none; 
     background-image: none;
 
     background-color: transparent; 
     background: transparent; 
     border-color: transparent;
 
    } 

Можете ли вы помочь?

Answer 1

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

Цвет фона управляется следующим образом:

.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 160px; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; /* here */ 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
} 

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

#mydiv > .dropdown-menu { 
    background:transparent; 
} 

EDIT: Кнопка регулируется btn-default класс

#mydiv > btn-default { 
    background:transparent; 
} 

/* CSS used here will be applied after bootstrap.css */ 
 
body { 
 
    background:pink !important; 
 
} 
 

 
#mydiv > .btn-default { 
 
    background:transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script> 
 

 
<div id="mydiv" class="dropdown transparentbar" style="z-index:4"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Drop mat 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Bootply Demo

Answer 2

Попробуйте этот путь?

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<style> 
 
    body {background-color: #999;} 
 
    .dropdown-menu {background-color: transparent;} 
 
</style> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Dropdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Answer 3

Мой опыт работы с Bootstrap 3.3.6 и используя его МЕНЬШЕ переменную систему, Вы можете сделать следующее, чтобы управлять цветовой оттенок, и уровень прозрачности, все в один выстрел ...

@dropdown-bg:rgba(248,248,248,.90);