Bootstrap组合上、下拉框简单实现代码


Posted in Javascript onMarch 06, 2017

本文实例为大家分享了Bootstrap组合上下拉框的具体代码,供大家参考,具体内容如下

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>

<!-- 下拉式 -->
<div class="btn-group">
<!-- 用于显示文字 -->
<button type="button" class="btn btn-default">select</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
 </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" >Action</a></li>
</div>
<br/>
<br/>
<br/>
<br/>
<!-- 上拉式 -->
<div class="btn-group dropup">
<button type="button" class="btn btn-default">select</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
 </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" >Action</a></li>
</div>

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

<!--



-->

结果:

Bootstrap组合上、下拉框简单实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 #Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 #Javascript
js正则表达式验证表单【完整版】
Mar 06 #Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 #Javascript
js实现动态显示时间效果
Mar 06 #Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 #Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
django中media媒体路径设置的步骤
2019/11/15 Python
python 实现aes256加密
2020/11/27 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
上班上网检讨书
2014/01/29 职场文书
团队经理竞聘书
2014/03/31 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Golang 结构体数据集合
2022/04/22 Golang