如何在bootstrap栅格系统实现滚动监听(实例)

作者(出处):百宝箱工作室发布时间:2018年4月12日 14:44:21查阅量:192

<!DOCTYPE html>
<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" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
		<style>
			h2{ font-weight: bold;}
			#SubNav{position: fixed;top:0;}
			#SubNav .nav a{color: #269ABC;}
			#SubNav .nav ul{ display:none;}
			#SubNav .nav .active ul{ display: block; padding-left: 20px;}
			#SubNav .nav > li > a{padding: 5px 15px;}
			#SubNav .nav .active > a{ color: #FF0000; border-left: 2px solid #FF0000;}/*.active > a表示active后的第一个a标签*/
			#SubNav .nav .active .bold{font-weight: bold;border-left: 4px solid #FF0000;}
		</style>
	</head>
	<body data-spy="scroll" data-target="#SubNav">
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-12
        	描述:滚动监听
        	1.谁要滚动就给谁添加data-spy="scroll",并且要添加data-target,其值要与导航的父级关联。
        	2.给导航的父级添加一个ID或者class,与要滚动的元素的data-target的值一致,并且要给导航的
        	父级添加一个navbar-collapse的class。
        	3.导航里面的每一个a标签都要加上锚点链接,这样才能与滚动对上号。
        	4.滚动区域里面的标题要加上相应的ID,用于与导航的锚点链接对应。
        -->
		<div class="container">
			<div class="row">
				<div class="col-lg-9">
					<div class="section">
						<h2 id="gs">百宝箱工作室概述</h2>
						<h3 id="jj">百宝箱网络工作室简介</h3>
						<p>百宝箱网络工作室(简称百宝箱工作室)成立于2011年3月12日,工作室成立之初主要以接单开发网站、网站建设与维护为主要业务。后来随着业务的增加与朋友圈的扩大,百宝箱工作室开始尝试在互联网上开课,以满足更多有需要、想学习技术的朋友。</p>
						<p>百宝箱工作室IT微课堂项目教学实践基地:主要承接网页设计、平面设计、动画设计、数据库设计、C#.NET程序设计、ASP.NET程序设计等项目进行网络一对一教学。</p>
						<h3 id="yw">百宝箱工作室的三大业务</h3>
						<p>【业务1】网站开发:主要承接基于ASP.NET技术框架的网站开发,可以是个人站、企业站、电子商务网站、或者学校网站。</p>
						<p>【业务2】网站建设与维护:如果您的网站需要一个专业的技术员来建设与维护,那么您可以跟百宝箱工作室洽谈。网站建设与维护一般按月收费,长期合作的网站可以按年收费。网站维护收费标准:个人站300元-600元/月、企业站600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
						<p>【业务3】IT微课堂项目教学:目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
						<h3 id="gjc">关于百宝箱工作室的热门关键词</h3>
						<p>如果在百度上快速找到百宝箱网络工作室?请您记住两个关键词:百宝箱工作室、IT微课堂。您只需在各大搜索引擎搜索关键词“百宝箱工作室”或者搜索“IT微课堂”即可快速找到我们。</p>
					</div>
					<div class="section">
						<h2 id="ywbz">百宝箱业务收费标准</h2>
						<p>百宝箱网络工作室主要有三大业务:网站开发、网站建设与维护、IT微课堂项目教学。</p>
						<h3 id="web">网站开发收费标准</h3>
						<p>一个网站的业务有简单也有复杂的,因此并不是所有的网站都按同样的标准收费,而是根据网站的业务繁简情况洽谈收费。原则上开发个人站收费不低于1500元,开发企业站收费不低于2000元,开发电子商务网站收费标准不低于3500元。</p>
						<h3 id="site">网站建设与维护收费标准</h3>
						<p>网站建设与维护主要是网站的日常维护工作,这里特别说明一点:网站建设与维护不是网站推广,网站推广属于SEO的范畴。网站建设与维护一般按月收费,长期合作的网站可以按年收费。原则上建设与维护个人站收费300元-600元/月,建设与维护企业站收费600元-1800元/月,具体价格以网站业务繁简以及客户要求来洽谈协商。</p>
						<h3 id="it">IT微课堂项目教学收费标准</h3>
						<p>IT微课堂项目教学有时是一套完整的课程,有时只是某一个项目,到底是整套课程还是一个项目,这完全由客户决定。客户想学习完整套课程,我们就按整套课程实施教学;客户只想学习某一个项目,我们就按项目来实施教学。</p>
						<p>IT微课堂项目教学采用课时收费法收费:Office办公软件应用按每小时收费80元来实施远程一对一教学,其他课程按每小时收费100元来实施远程一对一教学。</p>
						<p>我们举个例子来说明如下:</p>
						<p>假设张某想学习Dreamweaver网页设计与网站开发技术,网页设计与网站开发涉及到的知识点比较多,网页设计有静态网页设计和动态设计之分,网站开发有个人站和企业站之别。因此张某可以选择性地学习其中的某些项目,例如只学习静态网页,或者只学习企业站开发。当然张某也可以从头到尾学习整套Dreamweaver网页设计与网站开发课程。不管张某选择哪种学习方式,我们都是按照100元/每学时来收费。</p>
					</div>
					<div class="section">
						<h2 id="fs">百宝箱工作室联系方式</h2>
						<h3 id="qq">联系QQ</h3>
						<p>网站开发业务QQ:573549435</p>
						<p>网站建设与维护业务QQ:425680248</p>
						<p>IT微课堂项目教学QQ:1617818397</p>
						<h3 id="email">电子邮箱</h3>
						<p>1617818397@qq.com(综合业务)</p>
					</div>
				</div>
				<div class="col-lg-3">
					<div id="SubNav" class="navbar-collapse">
						<ul class="nav">
							<li>
								<a href="#gs" class="bold">百宝箱工作室概述</a>
								<ul class="nav">
									<li><a href="#jj">百宝箱网络工作室简介</a></li>
									<li><a href="#yw">百宝箱工作室的三大业务</a></li>
									<li><a href="#gjc">关于百宝箱工作室的热门关键词</a></li>
								</ul>
							</li>
							<li>
								<a href="#ywbz" class="bold">百宝箱业务收费标准</a>
								<ul class="nav">
									<li><a href="#web">网站开发收费标准</a></li>
									<li><a href="#site">网站建设与维护收费标准</a></li>
									<li><a href="#it">IT微课堂项目教学收费标准</a></li>
								</ul>
							</li>
							<li>
								<a href="#fs" class="bold">百宝箱工作室联系方式</a>
								<ul class="nav">
									<li><a href="#qq">联系QQ</a></li>
									<li><a href="#email">电子邮箱</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2019
点击这里给我发消息