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 脚本将当地时间转换成其它时区
Mar 19 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
js实现购物车功能
Jun 12 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
Vue.js实现可编辑的表格
Dec 11 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/01/20 PHP
PHP学习 运算符与运算符优先级
2008/06/15 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python sys.argv用法实例
2015/05/28 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python中import reload __import__的区别详解
2017/10/16 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python实现简单多人聊天室
2018/12/11 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
分家协议书
2014/04/21 职场文书
员工安全生产承诺书
2014/05/22 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
社区工作者个人总结
2015/02/28 职场文书
孙振耀退休感言
2015/08/01 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
公司转让协议书
2016/03/19 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Redis全局ID生成器的实现
2022/06/05 Redis