10
Pracuję nad tym formularzem za pomocą `[email protected] '. W tym chcę utworzyć menu rozwijane, jak pokazano na poniższym obrazie, podobnie jak w projektowaniu materiałów, ale chcę to zrobić za pomocą bootstrap. Próbuję użyć tego kodu, ale to nie działa. Czy ktoś wie, jak zrobić takie menu rozwijane. Pomóż mi rozwiązać ten problem.bootstrap za pomocą make like google materiał menu rozwijane numer
Dzięki
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
przykład obraz
/* form starting stylings ------------------------------- */
.group \t \t \t {
position:relative;
margin-bottom:45px;
}
input \t \t \t \t {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus \t \t { outline:none; }
/* LABEL ======================================= */
label \t \t \t \t {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label \t \t {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar \t { position:relative; display:block; width:300px; }
.bar:before, .bar:after \t {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
\t from { background:#5264AE; }
to \t { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
\t from { background:#5264AE; }
to \t { width:0; background:transparent; }
}
@keyframes inputHighlighter {
\t from { background:#5264AE; }
to \t { width:0; background:transparent; }
}<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
Starasz się, aby „praca” na liście rozwijanej lub starasz się naprawić "styl"? –
sir, próbuję użyć menu rozwijanego bootstrap, nie działa – core114
Próbujesz dokonać 'select' z elementu przycisku. To na tak wiele sposobów niewłaściwe podejście. Przede wszystkim dlatego, że nie ma odpowiedniego zabezpieczenia na urządzeniach mobilnych. Spróbuj tego dokonać, używając właściwego 'select'. Pokaż nam, co wypróbowałeś/dostałeś i dlaczego to nie zadziałało, a my (prawdopodobnie) będziemy w stanie to naprawić. – JoostS