编程 Javascript

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组合上、下拉框简单实现代码

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用jQuery扩展自写的 UI导航

Jan 13 Javascript

jquery中通过过滤器获取表单元素的实现代码

Jul 05 Javascript

JS小功能(操作Table--动态添加删除表格及数据)实现代码

Nov 28 Javascript

JS基于面向对象实现的放烟花效果

May 07 Javascript

利用js实现禁止复制文本信息

Jun 03 Javascript

JavaScript 身份证号有效验证详解及实例代码

Oct 20 Javascript

详解使用angular-cli发布i18n多国语言Angular应用

May 20 Javascript

bootstrap paginator分页前后台用法示例

Jun 17 Javascript

AngularJs ng-change事件/指令的用法小结

Nov 01 Javascript

创建Vue项目以及引入Iview的方法示例

Dec 03 Javascript

如何让微信小程序页面之间的通信不再变困难

Jun 03 Javascript

微信小程序之左右布局的实现代码

Dec 13 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-5.2 的 php.ini 中文版[金步国翻译]

2011/04/17 PHP

PHP设计模式之抽象工厂模式实例分析

2019/03/25 PHP

js GridView 实现自动计算操作代码

2009/03/25 Javascript

Javascript 模式实例观察者模式

2009/10/24 Javascript

js open() 与showModalDialog()方法使用介绍

2013/09/10 Javascript

JavaScript调用ajax获取文本文件内容实现代码

2014/03/28 Javascript

JS实现简单的键盘打字的效果

2015/04/24 Javascript

js验证身份证号有效性并提示对应信息

2015/10/19 Javascript

JavaScript使用DeviceOne开发实战（三）仿微信应用

2015/12/02 Javascript

jQuery中的each()详细介绍(推荐)

2016/05/25 Javascript

nodejs 的 session 简单使用

2016/06/06 NodeJs

NodeJS使用formidable实现文件上传

2016/10/27 NodeJs

JS+DIV实现的卷帘效果示例

2017/03/22 Javascript

JS中实现浅拷贝和深拷贝的代码详解

2019/06/05 Javascript

使用vue-cli3+typescript的项目模板创建工程的教程

2020/02/28 Javascript

解决echarts 一条柱状图显示两个值,类似进度条的问题

2020/07/20 Javascript

解决vue-router路由拦截造成死循环问题

2020/08/05 Javascript

Vue绑定用户接口实现代码示例

2020/11/04 Javascript

Python日期操作学习笔记

2008/10/07 Python

wxPython学习之主框架实例

2014/09/28 Python

Python中处理unchecked未捕获异常实例

2015/01/17 Python

python实现中文输出的两种方法

2015/05/09 Python

Django实现快速分页的方法实例

2017/10/22 Python

python计算列表内各元素的个数实例

2018/06/29 Python

由面试题加深对Django的认识理解

2019/07/19 Python

利用python Selenium实现自动登陆京东签到领金币功能

2019/10/31 Python

在python3.64中安装pyinstaller库的方法步骤

2020/06/02 Python

Python基于Twilio及腾讯云实现国际国内短信接口

2020/06/18 Python

Python压缩模块zipfile实现原理及用法解析

2020/08/14 Python

Django DRF认证组件流程实现原理详解

2020/08/17 Python

canvas简单连线动画的实现代码

2020/02/04 HTML / CSS

LUISAVIAROMA中国官网：时尚奢侈品牌购物网站

2020/11/01 全球购物

英语教师岗位职责

2014/03/16 职场文书

三分钟英语演讲稿

2014/04/24 职场文书

教师节联欢会主持词

2015/07/04 职场文书

2015年乡镇食品安全工作总结

2015/10/22 职场文书