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

JS去除字符串两端空格的简单实例

Dec 27 Javascript

jquery预加载图片的方法

May 27 Javascript

jquery实现的Banner广告收缩效果代码

Sep 02 Javascript

JQuery 传送中文乱码问题的简单解决办法

May 24 Javascript

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

Jun 17 Javascript

Json解析的方法小结

Jun 22 Javascript

Vue实现一个返回顶部backToTop组件

Jul 25 Javascript

es6 字符串String的扩展(实例讲解)

Aug 03 Javascript

jQuery插件DataTables分页开发心得体会

Aug 22 jQuery

Bootstrap 中data-[*] 属性的整理

Mar 13 Javascript

详解Vue文档中几个易忽视部分的剖析

Mar 24 Javascript

详解Vue.directive 自定义指令

Mar 27 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下载远程文件类(支持断点续传)

2008/11/14 PHP

php中实现获取随机数组列表的自定义函数

2015/04/02 PHP

layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例

2018/05/12 PHP

JQuery 表单中textarea字数限制实现代码

2009/12/07 Javascript

jquery如何实现锚点链接之间的平滑滚动

2013/12/02 Javascript

js 事件截取enter按键页面提交事件示例代码

2014/03/04 Javascript

JavaScript中获取鼠标位置相关属性总结

2014/10/11 Javascript

javascript实现无限级select联动菜单

2015/01/02 Javascript

详解JavaScript中的every()方法

2015/06/08 Javascript

浅谈javascript函数式编程

2015/09/06 Javascript

jQuery中attr()与prop()函数用法实例详解(附用法区别)

2015/12/29 Javascript

详解vue-cli中的ESlint配置文件eslintrc.js

2017/09/25 Javascript

引入外部js脚本加载慢与页面白屏问题的解决

2018/12/10 Javascript

js实现自动播放匀速轮播图

2020/02/06 Javascript

JS操作Fckeditor的一些常用方法(获取、插入等)

2020/02/19 Javascript

jQuery HTML设置内容和属性操作实例分析

2020/05/20 jQuery

JavaScript 常见的继承方式汇总

2020/09/17 Javascript

vuejs实现下拉框菜单选择

2020/10/23 Javascript

[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访

2015/12/26 DOTA

python实现360皮肤按钮控件示例

2014/02/21 Python

Python绘制并保存指定大小图像的方法

2019/01/10 Python

Python中求对数方法总结

2020/03/10 Python

Python如何定义有可选参数的元类

2020/07/31 Python

python 如何使用find和find_all爬虫、找文本的实现

2020/10/16 Python

详解CSS3开启硬件加速的使用和坑

2017/08/21 HTML / CSS

HTML5 canvas 基本语法

2009/08/26 HTML / CSS

开发中都用到了那些设计模式?用在什么场合?

2014/08/21 面试题

2014年9.18纪念日演讲稿

2014/09/14 职场文书

工伤事故处理协议书怎么写

2014/10/15 职场文书

湖南省召开党的群众路线教育实践活动总结大会报告

2014/10/21 职场文书

幼儿园安全工作总结2015

2015/04/20 职场文书

圣贤教育改变命运观后感

2015/06/16 职场文书

基于go interface{}==nil 的几种坑及原理分析

2021/04/24 Golang

基于Python和openCV实现图像的全景拼接详细步骤

2021/10/05 Python

AngularJS实现多级下拉框

2022/03/25 Javascript

Windows10安装Apache2.4的方法步骤

2022/06/25 Servers