Bootstrap组合上、下拉框简单实现代码
作者:deepquiet 时间:2024-04-10 11:03:05
本文实例为大家分享了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,下拉框,上拉框
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python查看矩阵的行列号以及维数方式
2021-03-25 20:24:58
![](https://img.aspxhome.com/file/2023/6/115756_0s.jpg)
pandas抽取行列数据的几种方法
2022-06-19 09:32:16
把论坛从ACCESS转成SQL版本
2009-04-13 15:59:00
python matplotlib中文显示参数设置解析
2022-11-18 14:11:41
![](https://img.aspxhome.com/file/2023/0/89410_0s.jpg)
CentOS7下python3.7.0安装教程
2023-09-26 21:42:56
python数据结构输入输出及控制和异常
2022-08-26 10:27:47
![](https://img.aspxhome.com/file/2023/5/111945_0s.png)
tensorflow基于CNN实战mnist手写识别(小白必看)
2021-01-26 22:33:42
![](https://img.aspxhome.com/file/2023/2/99432_0s.png)
微信支付PHP SDK之微信公众号支付代码详解
2024-05-10 14:21:21
![](https://img.aspxhome.com/file/2023/0/126380_0s.png)
使用python向MongoDB插入时间字段的操作
2021-05-21 06:54:19
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2021-04-30 21:32:11
![](https://img.aspxhome.com/file/2023/7/95797_0s.jpg)
JS通过分析userAgent属性来判断浏览器的类型及版本
2024-05-13 10:37:17
php header功能的使用
2023-11-15 09:25:26
音频处理 windows10下python三方库librosa安装教程
2023-10-12 08:29:50
深入理解JS的事件绑定、事件流模型
2024-04-22 22:44:44
![](https://img.aspxhome.com/file/2023/1/135561_0s.png)
用python对excel查重
2022-03-09 05:21:47
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2023-12-03 20:29:40
![](https://img.aspxhome.com/file/2023/1/70221_0s.png)
python实现基于SVM手写数字识别功能
2021-10-03 12:33:41
![](https://img.aspxhome.com/file/2023/9/133329_0s.jpg)
推荐一篇不错的新手asp编程的基本法则
2011-04-15 11:08:00
Python SVM(支持向量机)实现方法完整示例
2021-06-09 14:20:34
![](https://img.aspxhome.com/file/2023/7/75947_0s.png)
python爬虫之爬取笔趣阁小说
2021-09-19 19:18:05
![](https://img.aspxhome.com/file/2023/2/110482_0s.png)