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

MooTools 1.2中的Drag.Move来实现拖放

Sep 15 Javascript

jsp网页搜索结果中实现选中一行使其高亮

Feb 17 Javascript

Javascript中使用parseInt函数需要注意的问题

Apr 02 Javascript

使用 stylelint检查CSS_StyleLint

Apr 28 Javascript

文件上传的几个示例分享【推荐】

Dec 16 Javascript

swiper在vue项目中loop循环轮播失效的解决方法

Sep 15 Javascript

关于js陀螺仪的理解分析

Apr 11 Javascript

Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

Apr 22 Javascript

babel7.x和webpack4.x配置vue项目的方法步骤

May 12 Javascript

javascript导出csv文件（excel）的方法示例

Aug 25 Javascript

JavaScript实现Tab标签页切换的最简便方式(4种)

Jun 28 Javascript

React如何使用axios请求数据并把数据渲染到组件

Aug 05 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