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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JS跨域问题详解
Nov 25 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
微信小程序实现聊天室
Aug 21 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中html word 互转的方法
2016/01/28 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
Python编程实现的图片识别功能示例
2017/08/03 Python
浅析python的优势和不足之处
2018/11/20 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
职工趣味运动会方案
2014/02/10 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
手术室护士个人总结
2015/02/13 职场文书
python实现批量移动文件
2021/04/05 Python