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

最新推荐文章于 2024-05-30 15:01:09 发布
最新推荐文章于 2024-05-30 15:01:09 发布
阅读量10w+ 收藏 51
点赞数 17
分类专栏： bootstrap bootstrap踩坑篇
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/82021585
版权

Bootstrap <select>下拉菜单实现

初级者使用bootstrap框架时，大部分对官方提供的下拉菜单dropdown组件不是很感冒！
所以，这里就提供简单原生下拉标签<select><option>实现的下拉组件。

一、样式1、样式2——截图对比

1.原生select标签，截图如下：

原生select标签效果

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

官方dropdown效果

二、样式1、样式2 —— 主要代码

<div class="form-group">
    <label for="email" class="col-sm-2 control-label">所属角色</label>	
    <div class="col-sm-6">	
    	<!-- 样式1 -->
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
    	<!-- 样式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="false">
		    超级管理员 <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="separator" class="divider"></li>
		    <li><a href="#">设计总监</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">运维人员</a></li>
		    <li role="separator" 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 charset="UTF-8">
	<title>添加管理员</title>
	<link rel="stylesheet" type="text/css" href="../statics/plugins/bootstrap/3.3.7/css/bootstrap.css"/>
	<style type="text/css">
		.modal-header{padding: 0;}
		/*.modal-content{border-radius: 0;}*/
		.modal-dialog .close{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="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">	
				    	<!-- Single button -->
						<select class="form-control">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
						<!--<div class="btn-group dropdown" id="dropdown">
						  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						    超级管理员 <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="separator" class="divider"></li>
						    <li><a href="#">设计总监</a></li>
						    <li role="separator" class="divider"></li>
						    <li><a href="#">运维人员</a></li>
						    <li role="separator" 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>
<script type="text/javascript">
	$(function(){
		window.top.parent.dropdownFun();
		//函数dropdownFun()为官方文档中的$(‘#dropdown’).on('show.bs.dropdown', function(){ ··· ··· })
	});
</script>
</body>
</html>

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

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

草巾冒小子
关注
  • 17
    点赞
  • 踩
  • 51
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
bootstrap-select 下拉框demo（含多种样式）
12-09
bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demo
Bootstrap下拉菜单效果实例代码分享
09-02
主要为大家详细介绍了Bootstrap下拉菜单效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
最新发布
lbcbjtlhmjq的博客
05-30 897
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
下拉列表多选：bootstrap-select.js控件，支持下拉多选搜索，N种样式
weixin_43996999的博客
07-25 2629
参考网址：https://www.cnblogs.com/landeanfen/p/7457283.html#_label1 阅读目录 一、组件开源地址以及API说明 二、组件效果示例 三、使用示例       1、基础示例       2、其他效果示例  &nb...
a-select设置样式
qq_45530512的博客
10-17 1062
【代码】a-select设置样式。
bootstrap-select.css,基于Bootstrap下拉框插件bootstrap-select使用方法详解
weixin_35932973的博客
08-04 1353
写在前面：在这次的项目中，没有再使用liger-ui做为前端框架了，改为了Bootstrap,这次也好接触下新的技术，在学习的过程中发现，Bootstrap的一些组件基本都是采用class的形式，就是给一个它定义好的样式，就会给你展现出一个好看的组件出来，这个比liger-ui的界面做的要好，但是了解了Boostrap的基本语法后，发现在官方的文档中，并没有一些可以动态加载组件的demo,因为之前...
bootstrap-select组件
cjnba的专栏
10-13 1万+
阅读目录 一、组件开源地址以及API说明 二、组件效果示例 三、使用示例 1、基础示例 2、其他效果示例 3、组件取值赋值 4、组件其他用法 5、组件封装 四、源码下载 五、总结 正文 前言：之前分享过两篇bootstrap下拉框的组件：JS组件系列——两种bootstrap multiselect组件大比拼 和JS组件系列——Bootstrap Select2组件使用小结，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种...
这篇Bootstrap下拉列表select详细讲解和使用，你看不明白，来给我差评
岩浆李的游鱼
07-20 1万+
前言： 本人是多年Android开发，从0开始学习web前端。同样发现很多博客基本都是拷贝和复制，还说的不清楚。所以把我觉得目前博客上写不清的，着重写下。再学习完vue框架后，学习原生官网开发，但是学习到Bootstrap的select时，觉得网上资料都是迷迷糊糊不清的，很让初学者迷惑。故有此篇。 前提条件 当然了这里我们要引入Bootstrap和jQuery <script type="text/javascript" src="./js/jquery-3.6.0.js"></
select 详细原生详细用法
qq315394799的博客
09-22 2026
1.动态创建select function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option function addOption(){ //根据id查找对象， v...
浏览器原生select使用总结
编程架构三分天下：分层、分治、分时序。
08-14 1850
HTML中，浏览器原生select使用总结： onchange事件，获取/设置value，获取/设置text
Bootstrap select样式
热门推荐
zhaoyingjiao的专栏
10-22 5万+
转载自 bootstrap-select A custom select for @twitter Bootstrap using button dropdown. Usage Create your  with the .selectpicker class. class="selectpicker"> Mustard Ketchup R
Bootstrap实现下拉菜单多级联动
08-28
Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架，它提供了许多实用的组件和工具，使得开发者可以快速构建漂亮的网页。今天，我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 ...
Bootstrap3多级下拉菜单
12-11
本文实例为大家分享了Bootstrap下拉菜单的具体代码，供大家参考，具体内容如下 效果图： – 需要引用bootstrap.min.css和bootstrap.min.css.js – 代码如下 <head> <meta charset="UTF-8"> <...
Bootstrap select下拉联动（jQuery cxselect）
10-20
Bootstrap select下拉联动是网页开发中常用的一种交互功能，它允许用户通过选择一个选项来触发另一个下拉框的更新，通常用于实现多级筛选或层级数据的选取。在这个场景中，我们使用的是一款基于jQuery的插件——...
Bootstrap-select使用说明
机械键盘侠博客
09-30 2039
背景 Bootstrap-select 是一款基于JQuery的 下拉菜单 插件，支持搜索和多项选择功能，支持Booststrap。 点击这里进入Bootstrap-select中文官方网站 使用效果如下图所示： 常用属性 初始化： <select class="selectpicker"&g...
bootstrap-select学习基础示例
OceanSky的专栏
03-04 2780
翻译来自：http://silviomoreto.github.io/bootstrap-select/examples/ 1.标准的下拉选择框 &amp;lt;div class=&quot;container&quot;&amp;gt; &amp;lt;div class=&quot;row&quot;&amp;gt; &amp;lt;select class=&quot;selectpi
BootStrap
weixin_52397329的博客
11-24 290
BootStrap 主要内容 BootStrap的安装和使用 BootStrap 介绍 ​ 官网：http://getbootstrap.com/ ​ 中文网：http://www.bootcss.com/ ​ Bootstrap 是一套现成的 CSS 样式集合（做得还是很友好的）。是两个推特的员工干出来的。 ​ Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 ​ 2011年，twitter 的"一小撮"工程师为了提高他们内部的分析和
bootstrap select样式
null
02-03 7820
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css&
原生select下拉框取值与清空数据
蓝胖子的博客
05-17 3310
原生select下拉框取值与清空数据
bootstrap 选列的下拉菜单 全选
11-18
以下是使用Bootstrap实现选列的下拉菜单全选的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Bootstrap Select All Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ // 全选 $("#select-all").click(function(){ $("input[type=checkbox]").prop("checked", true); }); // 取消全选 $("#deselect-all").click(function(){ $("input[type=checkbox]").prop("checked", false); }); }); </script> </head> <body> <div class="container"> <h2>Bootstrap Select All Example</h2> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select Columns <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#"><input type="checkbox"> Column 1</a></li> <li><a href="#"><input type="checkbox"> Column 2</a></li> <li><a href="#"><input type="checkbox"> Column 3</a></li> <li><a href="#"><input type="checkbox"> Column 4</a></li> <li><a href="#"><input type="checkbox"> Column 5</a></li> <li class="divider"></li> <li><a href="#" id="select-all">Select All</a></li> <li><a href="#" id="deselect-all">Deselect All</a></li> </ul> </div> </div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值