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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
解析php5配置使用pdo
2013/07/03 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python实现无证书加密解密实例
2014/10/27 Python
Python 装饰器使用详解
2017/07/29 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
应届大学生的推荐信
2013/11/20 职场文书
会计专业自荐信范文
2013/12/02 职场文书
小班评语大全
2014/05/04 职场文书
国庆节演讲稿
2014/05/27 职场文书
旅游文化节策划方案
2014/06/06 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python
Python如何将list中的string转换为int
2022/07/15 Ruby