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比较两个日期相差天数的方法
Jul 23 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 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
DOMXML函数笔记
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
浅析Python数据处理
2018/05/02 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
jupyter notebook清除输出方式
2020/04/10 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
小溪流的歌教学反思
2014/02/13 职场文书
益达广告词
2014/03/14 职场文书
社区居务公开实施方案
2014/03/27 职场文书
高三毕业评语
2014/12/31 职场文书
家长意见书
2015/06/04 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
情况说明书格式及范文
2019/06/24 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android