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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
javascript void(0)的妙用
Oct 21 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
javascript this指向相关问题及改变方法
Nov 19 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中curl_multi的应用
2013/07/17 PHP
初识laravel5
2015/03/02 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
javascript 写类方式之十
2009/07/05 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
ExpressJS入门实例
2015/01/14 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
自动化专业本科毕业生求职信
2013/10/20 职场文书
节能减耗标语
2014/06/21 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL