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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
Sort()函数的多种用法
Mar 20 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
vue代码分割的实现(codesplit)
Nov 13 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 Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
PHPThumb图片处理实例
2014/05/03 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
jQuery增加自定义函数的方法
2015/07/18 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python实现的各种排序算法代码
2013/03/04 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python中的测试框架
2020/11/13 Python
python 元组和列表的区别
2020/12/30 Python
python给list排序的简单方法
2020/12/10 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
.NET笔试题(20个问题)
2016/02/02 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
大学团日活动总结书
2015/05/11 职场文书
靠谱的活动总结
2019/04/16 职场文书
python小程序之飘落的银杏
2021/04/17 Python
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
浅谈克隆 JavaScript
2021/11/02 Javascript
nginx中proxy_pass各种用法详解
2021/11/07 Servers
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js