`

Bootstrap 第14章 下拉菜单和滚动监听插件

阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>下拉菜单和滚动监听插件</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
	</style>
</head>
<body>

<!--  -->
<!-- <div class="dropdown" id="dropdown">
	<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown">
		下拉菜单
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">首页</a></li>
		<li><a href="#">资讯</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">关于</a></li>
	</ul>
</div> -->

<nav id="nav" class="navbar navbar-default">
	<a href="#" class="navbar-brand">Web开发</a>
	<ul class="nav navbar-nav">
		<li><a href="#html5">HTML5</a></li>
		<li><a href="#bootstrap">Bootstrap</a></li>
		<li class="dropdown">
			<a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>
			<ul class="dropdown-menu">
				<li><a href="#jquery">jQuery</a></li>
				<li><a href="#yui">Yui</a></li>
				<li><a href="#extjs">ExtJS</a></li>
			</ul>
		</li>
	</ul>
</nav>

<div id="content" data-offset="0" data-spy="scroll" data-target="#nav" style="padding: 0 10px;height: 200px;overflow: auto;position: relative;">
	<section class="sec">
		<h4 id="html5">HTML5 <a href="#" onclick="removeSec(this)">删除</a></h4>
		<p>标准通用标记语言下的一个应用HTML 标准自1999 年12 月发布的HTML4.01后,后继的HTML5 和其它标准被束之高阁,为了推动Web 标准化运动的发展,一些公司联合起来,成立了一个叫做Web Hypertext Application Technology Working Group(Web 超文本应用技术工作组-WHATWG) 的组织。WHA。在2006 年,双方决定进行合作,来创建一个新版本的HTML。</p>
	</section>
	<section class="sec">
		<h4 id="bootstrap">Bootstrap</h4>
		<p>Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto 和Jacob Thornton 合作开发,是一个CSS/HTML 框架。Bootstrap提供了优雅的HTML 和CSS 规范,它即是由动态CSS 语言Less 写成。Bootstrap 一经推出后颇受欢迎,一直是GitHub 上的热门开源项目,包括NASA 的MSNBC(微软全国广播公司)的Breaking News 都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap 源码进行性能优化而来。[3] </p>
	</section>
	<section class="sec">
		<h4 id="jquery">jQuery</h4>
		<p>JQuery 是继prototype 之后又一个优秀的Javascript 库。它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0 及后续版本将不再支持IE6/7/8 浏览器。jQuery 使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery 能够使用户的html 页面保持代码和html 内容分离,也就是说,不用再在html 里面插入一堆js 来调用命令了,只需要定义id 即可。</p>
	</section>
	<section class="sec">
		<h4 id="yui">Yui</h4>
		<p>近几年随着jQuery、Ext 以及CSS3 的发展,以Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。这些框架各有特点,本文对这些框架进行初步的介绍与比较,希望能够为大家选择框架提供一点帮助,也为后续详细研究这些框架的抛砖引玉。</p>
	</section>
	<section class="sec">
		<h4 id="extjs">Extjs</h4>
		<p>ExtJS 可以用来开发RIA 也即富客户端的AJAX 应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax 框架。因此,可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。ExtJs 最开始基于YUI 技术,由开发人员JackSlocum 开发,通过参考JavaSwing 等机制来组织可视化组件,无论从UI 界面上CSS 样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript 客户端技术的精品。</p>
	</section>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	// $('#btn').dropdown();
	// $('#btn').dropdown('toggle');

	// $('#dropdown').on('show.bs.dropdown', function () {
	// 	alert('调用show方法时执行');
	// });

	// $('#content').scrollspy({
	// 	offset : 0,
	// 	target : '#nav',
	// });

	// $('#nav').on('activate.bs.scrollspy', function () {
	// 	alert('新条目被激活!');
	// });
	function removeSec(e) {
		$(e).parents('.sec').remove();
		$('#content').scrollspy('refresh');
	}
</script>
</body>
</html>

 

效果图:

 

 

 

  • 大小: 92.3 KB
1
1
分享到:
评论

相关推荐

    bootstrap教程

    9. **第14章 下拉菜单和滚动监听插件**:下拉菜单常用于导航,提供了多层次的链接选项。滚动监听插件则允许开发者在用户滚动页面时执行特定操作,如固定头部或加载更多内容。 10. **第15章 标签页和工具提示插件**...

    基于机器学习的疾病数据集分析

    该代码使用scikit-learn的乳腺癌数据集,完成分类模型训练与评估全流程。主要功能包括:数据标准化、三类模型(逻辑回归、随机森林、SVM)的训练、模型性能评估(分类报告、混淆矩阵、ROC曲线)、随机森林特征重要性分析及学习曲线可视化。通过`train_test_split`划分数据集,`StandardScaler`标准化特征,循环遍历模型进行统一训练和评估。关键实现细节包含:利用`classification_report`输出精确度/召回率等指标,绘制混淆矩阵和ROC曲线量化模型效果,随机森林的特征重要性通过柱状图展示,学习曲线分析模型随训练样本变化的拟合趋势。最终将原始数据和预测结果保存为CSV文件,便于后续分析,并通过matplotlib进行多维度可视化比较。代码结构清晰,实现了数据处理、模型训练、评估与可视化的整合,适用于乳腺癌分类任务的多模型对比分析。

    PyTorch入门指南:从零开始掌握深度学习框架.pdf

    内容概要:本文作为PyTorch的入门指南,首先介绍了PyTorch相较于TensorFlow的优势——动态计算图、自动微分和丰富API。接着讲解了环境搭建、PyTorch核心组件如张量(Tensor)、autograd模块以及神经网络的定义方式(如nn.Module),并且给出了详细的神经网络训练流程,包括前向传播、计算损失值、进行反向传播以计算梯度,最终调整权重参数。此外还简要提及了一些拓展资源以便进一步探索这个深度学习工具。 适用人群:初次接触深度学习技术的新学者和技术爱好者,有一定程序基础并希望通过PyTorch深入理解机器学习算法实现的人。 使用场景及目标:该文档有助于建立使用者对于深度学习及其具体实践有更加直观的理解,在完成本教程之后,读者应当能够在个人设备上正确部署Python环境,并依据指示独立创建自己的简易深度学习项目。 其他说明:文中所提及的所有示例均可被完整重现,同时官方提供的资料链接也可以方便有兴趣的人士对感兴趣之处继续挖掘,这不仅加深了对PyTorch本身的熟悉程度,也为未来的研究或者工程项目打下了良好的理论基础和实践经验。

    基于Springboot框架的高校心理教育辅导管理系统的设计与实现(含完整源码+完整毕设文档+数据库文件).zip

    此高校心理教育辅导系统功能分析主要分为管理员功能模块、教师功能模块和学生功能模块三大模块,下面详细介绍这三大模块的主要功能: (1)管理员:管理员登陆后可对系统进行全面管理,管理员主要功能模块包括个人中心、学生管理、教师管理、辅导预约管理、学生信息管理、测评结果分析管理、心理健康学习管理、试题管理、留言板管理、试卷管理、系统管理以及考试管理,管理员实现了对系统信息的查看、添加、修改和删除的功能。管理员用例图如图3-1所示。(2)学生:学生进入本高校心理教育辅导系统前台可查看系统信息,包括首页、心理健康信息、试卷列表、公告通知以及留言反馈等,注册登录后主要功能模块包括个人中心、辅导预约管理以及考试管理。(3)教师:教师学生登录后主要实现的功能模块包括个人中心、辅导预约管理、学生信息管理、测试结果分析管理、心理健康学习管理、试卷管理、试题管理、留言板管理、考试管理。Spring Boot是一个简化程序设置的拥有开箱即用的框架,它主要的优点是根据程序员不同的设置而生成不同的代码配置文件,这样开发人员就不用每个项目都配置相同的文件,从而减低了开发人员对于传统配置文件的时间,提高了开发效率。它内

    网络文化互动中的虚拟现实技术应用.doc

    网络文化互动中的虚拟现实技术应用

    自驾游中如何预防迷路情况.doc

    自驾游中如何预防迷路情况

    实现多人聊天的客户端小程序

    实现多人聊天的客户端小程序

    空间误差分析:统一的应用导向处理 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    漫画中的文化元素挖掘.doc

    漫画中的文化元素挖掘

    【Bender】基于Bender进行光线追踪研究 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    ,,Qt源程序~界面设计例程(XML文件读取+滚动区域放置控件+保存多sheetExcel文件) IDE版本: Qt creator 4.8.0 Qt 5.12.0 代码特点: 1.能读取xml格式文

    ,,Qt源程序~界面设计例程(XML文件读取+滚动区域放置控件+保存多sheetExcel文件) IDE版本: Qt creator 4.8.0 Qt 5.12.0 代码特点: 1.能读取xml格式文件,并通过其配置界面; 2.能在滚动区域内放置多种控件,界面大小不够会出现滚动条来扩展界面; 3.能通过xml配置文件初始化联动的单选框,输入框和表格; 4.通过程序动态新建单选框,输入框和表格; 5.将表格保存为Excel文件,每个表格就是一个sheet。 视频不够清晰,请上B站看: 【Qt例程:界面设计项目(XML文件读取+滚动区域放置控件+保存Excel文件)- ,Qt源程序; XML文件读取; 滚动区域放置控件; 保存多sheet Excel文件; Qt Creator 4.8.0; Qt 5.12.0; 动态创建控件; 界面设计例程。,Qt程序进阶:XML文件读取与处理,滚动区域控件布局,多sheet Excel文件保存功能

    ,,FPGA 以太网 UPD IP 协议实现 fpga 千兆以FPGA 以太网 UPD IP 协议实现 fpga 千兆以FPGA 以太网 UPD IP 协议实现, fpga 千兆以太网接口控制器

    ,,FPGA 以太网 UPD IP 协议实现 fpga 千兆以FPGA 以太网 UPD IP 协议实现 fpga 千兆以FPGA 以太网 UPD IP 协议实现, fpga 千兆以太网接口控制器,FPGA UDP IP协议实现 在FPGA上实现UDP通信,Verilog HDL描述语言实现,数据链路层,网络层,传输层有纯逻辑实现。 接口为GMII接口,与外部phy对接。 实验器件为s6,因此编译环境用的是ISE14.7。 vivado轻松无压力,随意移植。 ,FPGA; 以太网; UPD; IP协议; 千兆以太网接口控制器; Verilog HDL描述语言; 数据链路层; 网络层; 传输层; 接口为GMII接口; 编译环境为ISE14.7。,基于FPGA的千兆以太网UDP IP协议实现与优化

    eclipse-inst-jre-win64.rar

    eclipse-inst-jre-win64.rar

    Matlab实现基于BO贝叶斯优化Transformer结合BiLSTM双向长短期记忆神经网络时间序列预测的详细项目实例(含完整的程序,GUI设计和代码详解)

    内容概要:本文档详细介绍了一个基于Transformer和BiLSTM双向长短期记忆神经网络结合贝叶斯优化(BO)进行时间序列预测的项目。该项目主要解决传统方法在处理复杂非线性关系、多变量依赖和大规模数据时存在的局限性,提升预测精度和计算效率。项目通过MATLAB实现完整的程序、GUI设计和详细的代码说明,涵盖数据预处理、模型设计与训练、超参数调优、评估与应用等各个环节。同时探讨了项目的挑战和未来改进方向,为深度学习技术在时间序列预测中的应用提供了实用价值。 适合人群:对时间序列预测感兴趣的研究人员和技术人员,尤其是具有一定深度学习基础并且希望深入了解和实践Transformer、BiLSTM及相关优化技术的专业人士。 使用场景及目标:①为金融、能源、气象等多个领域的实际问题提供时间序列预测解决方案,包括股市预测、电力负载预估等;②提高预测模型的泛化能力和准确性;③优化模型的超参数选取,从而提高训练速度和效率。 其他说明:文中特别强调了数据处理的重要性,如去除噪声、特征选择等问题,并介绍了贝叶斯优化技术的应用,使得模型能够在较少尝试下找到最优配置。同时展示了如何通过图形化界面展示训练过程和评估结果,确保用户体验友好。此外,文档还包括了防止过拟合、提高模型性能的各种技巧,如正则化、早期停止、Dropout等措施。总体而言,本项目致力于提供一套完善的深度学习解决方案,促进跨学科应用和发展。

    励志图书中的时间管理、目标设定与自我提升.doc

    励志图书中的时间管理、目标设定与自我提升

    HarmonyOS NEXT 闯关习题答案(无解析)

    当前资源包含初中高级闯关习题

    亲子自驾游趣味活动推荐.doc

    亲子自驾游趣味活动推荐

    自然语言处理领域的深度双向变压器预训练模型BERT及其应用

    内容概要:本文介绍了BERT(Bidirectional Encoder Representations from Transformers),它是一种新型的语言表示模型,通过利用掩码语言模型(MLM)和下一句预测任务(NSP),实现了从无标注文本中预训练深层双向表示模型的方法。这种双向注意力机制允许模型在同一层联合调节左右语境,极大地提升了下游自然语言处理任务的性能。与单向语言模型如ELMo、GPT不同,BERT能直接捕捉句子内部复杂的依存关系,在多项NLP基准测试中刷新了记录,显著优于以前的最佳表现。 适合人群:从事自然语言处理研究的技术人员以及对该领域有兴趣的研究学者和开发者。 使用场景及目标:适用于需要高级别自然语言理解和推理能力的任务,特别是涉及问答系统、机器翻译和情感分析等任务的研发团队和技术部门。通过采用BERT可以快速提高相关应用场景中的精度。 其他说明:BERT不仅展示了双向建模相对于传统单向方法的优势,还强调了充分预训练对于改善小型数据集上模型表现的关键作用。此外,文中还详细比较了与其他几种现有先进模型的特点,并提供了具体的实验设置和技术细节供进一步探究。

    漫画作品与网络文化互动.doc

    漫画作品与网络文化互动

    基于SpringBoot的“体育购物商城”的设计与实现(源码+数据库+文档+PPT).zip

    # 基于SpringBoot的“体育购物商城”的设计与实现(源码+数据库+文档+PPT) - 开发语言:Java - 数据库:MySQL - 技术:SpringBoot - 工具:IDEA/Ecilpse、Navicat、Maven (1)系统管理员主要对个人中心、用户管理、商品分类管理、体育用品管理、系统管理、订单管理等功能进行管理。 (2)用户进入系统可以对首页、体育用品、活动公告、在线客服、购物车、个人中心等功能进行操作。

Global site tag (gtag.js) - Google Analytics