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 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
老生常谈js数据类型
Aug 03 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python获取栅格点和面值的实现
2020/03/10 Python
浅谈Python 参数与变量
2020/06/20 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
毕业自我评价范文
2013/11/17 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
遗嘱范文
2015/08/07 职场文书
班级管理经验交流材料
2015/11/02 职场文书
四年级语文教学反思
2016/03/03 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android