Bootstrap完美lect标签下拉菜单实现

更新时间:2023-07-13 14:09:46 阅读: 评论:0

Bootstrap完美lect标签下拉菜单实现Bootstrap <lect>下拉菜单实现
初级者使⽤bootstrap框架时,⼤部分对官⽅提供的下拉菜单dropdown组件不是很感冒!
affectionately所以,这⾥就提供简单原⽣下拉标签<lect><option>实现的下拉组件。
⼀、样式1、样式2——截图对⽐
1.原⽣lect标签,截图如下:
2.bootstrap官⽅dropdown组件,截图如下:
⼆、样式1、样式2 —— 主要代码
<div class="form-group">
<label for="email"class="col-sm-2 control-label">所属⾓⾊</label>
<div class="col-sm-6">
<!-- 样式1 -->
<lect class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</lect>
<!-- 样式2 -->
<!--<div class="btn-group dropdown" id="dropdown">
英华兰魔法儿童英语<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fal">超级管理员 <span class="caret"></span>
</button>
<input type="hidden" name="hidedrop_1" id="hidedrop_1" value="超级管理员" />
<ul class="dropdown-menu">
<li><a href="#">超级管理员</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">设计总监</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">运维⼈员</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">发布⼈员</a></li>实习生英文
</ul>
</div>-->
</div>
<div class="col-sm-4 tips"></div>
</div>
附:全部html代码
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8">
<title>添加管理员</title>
<link rel="stylesheet"type="text/css"href="../statics/plugins/bootstrap/3.3.7/css/bootstrap.css"/>
<style type="text/css">北京天道留学>在线翻
bargain
.modal-header{padding: 0;}
/
*.modal-content{border-radius: 0;}*/
.modal-dialog .clo{position: absolute;top: 10px;right: 15px;}
.modal-dialog h3{font-size: 14px;height:42px;line-height: 42px;margin: 0;padding: 0 80px 0 20px;}
.modal-dialog label{font-weight: 400;}
.tips{line-height: 34px;font-size: 13px;}
.tips span{color: red;}
@media (min-width: 1080px){
/*模态框-距顶部距离*/
.modal-dialog{
margin-top: 100px;
}
.
col-sm-6{padding-left: 0;padding-right: 0;}
}
</style>
</head>
<body>
<!--模态框-->
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal"autocomplete="off"action="0.php">
<div class="modal-header">
<button class="clo"data-dismiss="modal">x</button>
<h3>添加管理员</h3>
</div>
<div class="modal-body">
asiafriendfinder<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">
<!-- Single button -->
<lect class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</lect>
<!--<div class="btn-group dropdown" id="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fal">超级管理员 <span class="caret"></span>
</button>
bleach什么意思<input type="hidden" name="hidedrop_1" id="hidedrop_1" value="超级管理员" />
<ul class="dropdown-menu">
<li><a href="#">超级管理员</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">设计总监</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">运维⼈员</a></li>
<li role="parator" class="divider"></li>
<li><a href="#">发布⼈员</a></li>
</ul>
</div>-->
</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>
</div>
<script type="text/javascript">
$(function(){
//函数dropdownFun()为官⽅⽂档中的$(‘#dropdown’).on('show.bs.dropdown', function(){ ··· ··· })
});
</script>
</body>
</html>
上述红⾊注释部分表⽰:在顶级页⾯内的函数。
详细了解,参考具体的实现效果,以及页⾯iframe后的⼦页⾯,如何在主视图窗⼝实现下拉效果!
以上就是关于“ Bootstrap完美lect标签下拉菜单实现 ” 的全部内容。

本文发布于:2023-07-13 14:09:46,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/176203.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:实现   下拉菜单   组件
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图