10
Tôi đang làm việc trên biểu mẫu này bằng cách sử dụng `[email protected] '. Trong này, tôi muốn tạo ra trình đơn thả xuống như thể hiện trong hình dưới đây giống như trong thiết kế material design nhưng tôi muốn làm điều này bằng cách sử dụng bootstrap.I đang cố gắng sử dụng mã này, nhưng nó không hoạt động. Có ai biết làm thế nào để thực hiện như trình đơn thả xuống này. Hãy giúp tôi khắc phục sự cố này.bootstrap bằng cách sử dụng như một tài liệu trình đơn thả xuống của google material
Cảm ơn
<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>
dụ hình ảnh
/* 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>
bạn đang cố gắng để làm cho "công việc" của thả xuống hoặc bạn đang cố gắng sửa "phong cách"? –
thưa bạn, tôi cố gắng thực hiện bằng cách sử dụng menu thả xuống của trình khởi động, không hoạt động – core114
Bạn đang cố gắng tạo một 'chọn' ra khỏi phần tử nút. Đó là theo rất nhiều cách tiếp cận sai lầm. Hầu hết tất cả vì nó không có dự phòng thích hợp trên thiết bị di động. Hãy cố gắng đạt được điều này bằng cách sử dụng 'select' đúng. Hiển thị cho chúng tôi những gì bạn đã thử/đã nhận và lý do tại sao nó không hoạt động và chúng tôi sẽ (có thể) có thể sửa chữa nó cho bạn. – JoostS