编程 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 相关文章推荐

JavaScript入门教程(5) js Screen屏幕对象

Jan 31 Javascript

一个cssQuery对象 javascript脚本实现代码

Jul 21 Javascript

Extjs列表详细信息窗口新建后自动加载解决方法

Apr 02 Javascript

JQuery Easyui Tree的oncheck事件实现代码

May 28 Javascript

javascript克隆对象深度介绍

Nov 20 Javascript

js中substr,substring,indexOf,lastIndexOf的用法小结

Dec 27 Javascript

jQuery在页面加载时动态修改图片尺寸的方法

Mar 20 Javascript

js控制多图左右滚动切换效果代码分享

Aug 26 Javascript

图解Sublime Text3使用技巧

Dec 21 Javascript

基于JavaScript实现网页切出网站title变化代码

Apr 03 Javascript

Javascript的比较汇总

Jul 25 Javascript

JS正则表达式验证密码强度

Mar 18 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用mysql数据库存储session的代码

2010/03/05 PHP

php常用的安全过滤函数集锦

2014/10/09 PHP

php socket通信(tcp/udp)实例分析

2016/02/14 PHP

通过MSXML2自动获取QQ个人头像及在线情况(给初学者)

2007/01/22 Javascript

javascript 二进制运算技巧解析

2012/11/27 Javascript

javascript中注册和移除事件的4种方式

2013/03/20 Javascript

JavaScript AOP编程实例

2015/06/16 Javascript

jquery实现仿Flash的横向滑动菜单效果代码

2015/09/17 Javascript

JavaScript判断数组重复内容的两种方法(推荐)

2016/06/06 Javascript

JQuery Dialog对话框不能通过Esc关闭的原因分析及解决办法

2017/01/18 Javascript

前端开发必知的15个jQuery小技巧

2017/01/22 Javascript

浅谈angularjs中响应回车事件

2017/04/24 Javascript

vue小白入门教程

2018/04/02 Javascript

vue之父子组件间通信实例讲解(props、$ref、$emit)

2018/05/22 Javascript

详解关于Vue2.0路由开启keep-alive时需要注意的地方

2018/09/18 Javascript

代码分析vue中如何配置less

2018/09/28 Javascript

Node.js 使用axios读写influxDB的方法示例

2018/10/26 Javascript

微信小程序中悬浮窗功能的实现代码

2019/08/02 Javascript

微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

2019/08/16 Javascript

python读写文件操作示例程序

2013/12/02 Python

Python中的字典遍历备忘

2015/01/17 Python

Django ManyToManyField 跨越中间表查询的方法

2018/12/18 Python

在Qt中正确的设置窗体的背景图片的几种方法总结

2019/06/19 Python

Python 调用 Outlook 发送邮件过程解析

2019/08/08 Python

利用python生成照片墙的示例代码

2020/04/09 Python

Python接口测试文件上传实例解析

2020/05/22 Python

Python爬虫实战案例之爬取喜马拉雅音频数据详解

2020/12/07 Python

CSS3实现的文本3D效果附图

2014/09/03 HTML / CSS

CSS3实现头像旋转效果

2017/03/13 HTML / CSS

为你的html5网页添加音效示例

2014/04/03 HTML / CSS

中东奢侈品购物网站：Ounass

2020/09/02 全球购物

中学生操行评语

2014/04/24 职场文书

小学学校评估方案

2014/06/08 职场文书

个人租房协议书范本

2014/09/30 职场文书

Python实现查询剪贴板自动匹配信息的思路详解

2021/07/09 Python

Python使用BeautifulSoup4修改网页内容

2022/05/20 Python