bootstrap:下拉菜单

news2024/11/13 15:18:27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单DEMO</title>
<link rel="stylesheet" type="text/css" href="/cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"  />
</head>
<body>
	<!-- 下拉菜单 -->
	<div class="btn-group dropdown">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			&nbsp;选择...&nbsp;
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
	<!-- 上拉菜单 -->
	<div class="btn-group dropup">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			&nbsp;选择...&nbsp;
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</div>
<br/>
<br/>
<br/>
<br/>
<!-- 	<div> -->
<!-- 		<div class="col-md-3"> -->
<!-- 			<select class="form-control"> -->
<!-- 				<option value="1">Item 1</option> -->
<!-- 				<option value="2">Item 2</option> -->
<!-- 				<option value="3">Item 3</option> -->
<!-- 				<option value="4">Item 4</option> -->
<!-- 			</select> -->
<!-- 		</div> -->
<!-- 	</div> -->

<!-- 基础的Jquery -->
<script type="text/javascript" src="/cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
<!-- 基础的bootstrap -->
<script type="text/javascript" src="/cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js" ></script>
<script type="text/javascript">
	$(function(){
		
	});
</script>
</body>
</html>

效果:

bootstrap和jQuery下载地址: 

https://download.csdn.net/download/Bof_jangle/88614214

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1304167.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

加减乘除简单吗?不,一点都不,利用位运算实现加减乘除(代码中不含+ - * /)

文章目录 &#x1f680;前言&#x1f680;异或运算以及与运算&#x1f680;加法的实现&#x1f680;减法的实现&#x1f680;乘法的实现&#x1f680;除法的实现 &#x1f680;前言 这也是阿辉开的新专栏&#xff0c;知识将会很零散不成体系&#xff0c;不过绝对干货满满&…

螺旋方阵-2d

Description 一个 n 行 n 列的螺旋方阵按如下方法生成&#xff1a;从方阵的左上角&#xff08;第 1 行第 1 列&#xff09;出发&#xff0c;初始时向右移动&#xff1b;如果前方是未曾经过的格子&#xff0c;则继续前进&#xff1b;否则&#xff0c;右转。重复上述操作直至经过…

【离散数学】——期末刷题题库( 二元关系)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

CAVLC(基于上下文自适应的可变长编码)

以1个4 x 4的图像块为例,来说明CAVLC的编码及解码过程。 编码 ZIG-ZAG排列 ZIG-ZAG排列后的序列为: 计算非零系数数目和拖尾系数数目 TotalCoeffs:非零系数数目。变换系数level中所有不为0的level的数目,本例中为5。 TrailingOnes:拖尾系数的数目。指的是矩阵重排列后…

系统韧性研究(7)| 韧性系统的16大指导原则

不良事件和条件可能会中断系统&#xff0c;导致系统无法提供必要的功能和服务。正如我在本系列的前几篇文章中所概述的那样&#xff0c;韧性是大多数系统的一个基本质量属性&#xff0c;因为它们提供了关键的能力和服务&#xff0c;尽管存在着不可避免的困难&#xff0c;但这些…

部署Nextcloud详细步骤及优化方法

一、安装PHP8.0以上 我这里使用PHP8.0.30 [rootlocalhost ~]# php -v PHP 8.0.30 (cli) (built: Aug 3 2023 17:13:08) ( NTS gcc x86_64 ) Copyright (c) The PHP Group Zend Engine v4.0.30, Copyright (c) Zend Technologies [rootlocalhost ~]# 安装方法参考 二、安装MY…

台式扫描电镜中的扫描速度和扫描模式如何选择?

台式扫描电镜&#xff08;SEM&#xff09;是一种利用电子束扫描样品表面&#xff0c;通过检测样品反射或发射的次级电子、背散射电子、X 射线等信号&#xff0c;来获取样品的形貌、结构、组成和分布等信息的仪器。台式扫描电镜具有体积小、操作简单、样品制备方便、分辨率高、成…

2023年团体程序设计天梯赛——总决赛题

F-L1-1 最好的文档 有一位软件工程师说过一句很有道理的话&#xff1a;“Good code is its own best documentation.”&#xff08;好代码本身就是最好的文档&#xff09;。本题就请你直接在屏幕上输出这句话。 输入格式&#xff1a; 本题没有输入。 输出格式&#xff1a; 在一…

禾匠榜店商城系统 RCE漏洞复现

0x01 产品简介 禾匠榜店商城系统是浙江禾匠信息科技有限公司的一套基于PHP和MySQL的商城系统。 0x02 漏洞概述 禾匠榜店商城系统的api/testOrderSubmit模块下的preview方法存在命令执行漏洞,攻击者可以向服务器写入木马文件,直接获取服务器权限 0x03 漏洞概述 FOFA:bod…

GZ029 智能电子产品设计与开发赛题第6套

2023年全国职业院校技能大赛高职组 “GZ029智能电子产品设计与开发”赛项赛卷六 题目&#xff1a;模拟工业传送带物品检测系统的设计与开发 1 竞赛任务 在智能电视机上播放工业传送带传输物品视频&#xff0c;模拟工业传送带物品检测系统&#xff08;以下简称物品检测系统&…

Vue路由跳转重定向动态路由VueCli

Vue路由跳转&重定向&动态路由&VueCli 一、声明式导航-导航链接 1.需求 实现导航高亮效果 如果使用a标签进行跳转的话&#xff0c;需要给当前跳转的导航加样式&#xff0c;同时要移除上一个a标签的样式&#xff0c;太麻烦&#xff01;&#xff01;&#xff01; …

web Speech Synthesis 文字语音播报,Audio 播放base64提示音

SpeechSynthesisUtterance基本介绍 SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等 SpeechSynthesisUtterance基本属性 SpeechSynthesisUtterance.lang 获取并设置话语的语言SpeechSynthesisU…

FPGA高端项目:UltraScale GTH + SDI 视频解码,SDI转DP输出,提供2套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、详细设计方案设计框图3G-SDI摄像头LMH0384均衡EQUltraScale GTH 的SDI模式应用UltraScale GTH 基本结构参考时钟的选择和分配UltraScale GTH 发送和接收处理流程UltraScale…

vscode报错cnpm : 无法加载文件 C:\Program Files\nodejs\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅

报错 打开powershell 执行 Start-Process powershell -Verb runAs set-ExecutionPolicy RemoteSigned 选择 Y 完成

Zookeeper(服务注册中心)安装以及启动服务

概述 ZooKeeper是一个分布式的开源协调服务&#xff0c;用于管理和协调大规模分布式系统中的各种任务。它提供了一个简单的分层命名空间&#xff0c;以及对数据的强一致性&#xff08;ACID特性&#xff09;和高可用性的支持。 ZooKeeper提供了一个类似文件系统的层次结构&…

微服务学习:Nacos微服务架构中的服务注册、服务发现和动态配置Nacos下载

Nacos的主要用途包括&#xff1a; 服务注册与发现&#xff1a;Nacos提供了服务注册和发现的功能&#xff0c;服务提供者可以将自己的服务注册到Nacos服务器上&#xff0c;服务消费者则可以通过Nacos来发现可用的服务实例&#xff0c;从而实现服务调用。 动态配置管理&#xff…

PR分屏模板|Premiere动态多画面多屏特效视频模板剪辑素材

这一个很棒的分屏效果PR幻灯片模板视频素材&#xff01;为您的视频制作多屏幕动画&#xff01; 非常易于定制、更改颜色。 仅支持Premier Pro 2024及最新版本。 高清分辨率&#xff1a;19201080/30fps。 持续时间–00:37。 21媒体占位符&#xff08;照片或视频&#xff09;。 包…

MySQL数据库,函数与分组

单行函数&#xff1a; 操作数据对象 接受参数返回一个结果 只对一行进行变换 每行返回一个结果 可以嵌套 参数也可以是一列或一个值 数值函数 基本函数&#xff1a; 注&#xff1a;ROUND(x,y)函数的y是负数时&#xff0c;即往高位进行四舍五入&#xff0c;如-3就是按百位…

每天五分钟计算机视觉:VGG网络相对于AlexNet网络有哪些不同?

本文重点 在前面的课程中&#xff0c;我们已经学习了VGG网络模型&#xff0c;也学习了AlexNet网络模型&#xff0c;AlexNet模型先于VGG网络模型产生&#xff0c;所以VGG在一定程度上要优于AlexNet模型&#xff0c;二者来看一下&#xff0c;二者究竟有什么不同&#xff1f; 深度…

解决微信小程序中 ‘nbsp;‘ 空格不生效的问题

在微信小程序开发中&#xff0c;我们经常会使用 来表示一个空格。这是因为在 HTML 中&#xff0c;空格会被解析为一个普通字符&#xff0c;而不会产生实际的空白间距。而 是一种特殊的字符实体&#xff0c;它被解析为一个不可见的空格&#xff0c;可以在页面上产生真正的空…