layui select 不显示,css下拉菜单代码

当初学者通过Bootstrap select下拉菜单实现使用bootstrap框架时，大多数情况下他们对官方提供的下拉菜单dropdown组件不感冒。

所以，这里就提供简单原生下拉标签selectoption实现的下拉组件。

一、格式1、格式2——截图比较1 .原生选择标签，截图如下：

2.bootstrap官方dropdown组件，截图如下。

二、样式1、样式2 ——主要代码divclass=' form-group ' label for=' email ' class=' col-sm-2 control-label '所属角色/labeldivclass -模式1-- select class=' form-control ' option1/option option2/option3/option option4/option - div class=' BTN-group drop down ' id=' drop down ' button type=' button ' class=' BTN BTN-default drop down-toggle ' age span/button input type=' hidden ' name=' hide drop _1' id=' hide ul class=' drop down-menu ' lia href=' # '超级管理员/'设计总监/a li lia href='# '承运人/a/Lili role=' separator ' class=' divider '/lilia href=' # '发行人/a/Li/ul/did div div doctypehtmlheadmetacharset=' utf-8 ' titleaddmanager/titlelinkrel=' style sheet ' type=' text/CSS ' href//模式-内容{ border-radius : //modal-dialog.close { position : absolute； top: 10px； right: 15px； }.modal-dialog H3 { font-size :14 px； height:42px； line-height: 42px；边距： 0； padding: 0 80px 0 20px； } .模型诊断标签{ font-weight :400； }.tips{line-height: 34px；字体大小： 13px； }.tips span{color: red； } @ media (最小宽度：1080 px )/*模式框-顶部距离(/.modal-dialog ) margin-top:100px； }.col-sm-6{padding-left: 0； padding-right: 0 }}/style/headbody！ ---模式框--div

class="modal-dialog"><div class="modal-content"> <form class="form-horizontal" autocomplete="off" action="0.php"><div class="modal-header"><button class="close" data-dismiss="modal">x</button><h3>添加管理员</h3></div><div class="modal-body"><div class="form-group"> <label for="name" class="col-sm-2 control-label">用户名</label> <div class="col-sm-6"> <input type="text" class="form-control" id="name" placeholder="6~16位字母、数字、下划线组合"> </div> <div class="col-sm-4 tips"><span>* </span>必填</div></div><div class="form-group"> <label for="mobile" class="col-sm-2 control-label">手机号码</label> <div class="col-sm-6"> <input type="text" class="form-control" id="mobile" placeholder="输入11位手机号码" > </div> <div class="col-sm-4 tips"><span>* </span>必填</div></div><div class="form-group"> <label for="email" class="col-sm-2 control-label">E-mail</label> <div class="col-sm-6"> <input type="text" class="form-control" id="email" placeholder="请输入邮箱" > </div> <div class="col-sm-4 tips"></div></div><div class="form-group"> <label for="email" class="col-sm-2 control-label">所属角色</label> <div class="col-sm-6"> <select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select> </div> <div class="col-sm-4 tips"></div></div><div class="form-group"> <label for="regtime2" class="col-sm-2 control-label">注册日期</label> <div class="col-sm-8 input-group" id="regtime2"> <input type="text" class="form-control" placeholder="YYYY-MM-DD" > <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div></div></div><div class="modal-footer"><button class="btn btn-primary" type="submit">保存</button><button class="btn btn-info" data-dismiss="modal">关闭</button></div> </form></div></div><script type="text/javascript">$(function(){window.top.parent.dropdownFun();//函数dropdownFun()为官方文档中的$(‘#dropdown’).on('show.bs.dropdown', function(){ ··· ··· })});</script></body></html>

上述红色注释部分表示：在顶级页面内的函数。
详细了解，参考具体的实现效果，以及页面iframe后的子页面，如何在主视图窗口实现下拉效果！

以上就是关于“ Bootstrap完美select标签下拉菜单实现 ” 的全部内容。