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 相关文章推荐
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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存储cookie的示例
2014/03/31 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
QML用PathView实现轮播图
2020/06/03 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
Ajax的工作原理
2015/12/04 面试题
出纳员岗位责任制
2014/02/11 职场文书
汇源肾宝广告词
2014/03/20 职场文书
节约用水演讲稿
2014/05/21 职场文书
室内趣味活动方案
2014/08/24 职场文书
python 中的@运算符使用
2021/05/26 Python
Python制作动态字符画的源码
2021/08/04 Python