<!--  Bootstrap 核心 CSS 檔案 ,其實 只應用了一部分樣式,
		開發中使用時把不必要的樣式去掉,否則會對專案整體樣式產生影響 ,
	案例下載 http://download.csdn.net/detail/u011411069/9080293 
	-->
	<link rel="stylesheet" href="bootstrap-3.3.5/dist/css/bootstrap.min.css">

	<!-- jQuery檔案。務必在bootstrap的js檔案之前引入 -->
	<script src="jquery-1.9.1.js"></script>

	<!-- Bootstrap 滾動監聽js檔案,使用3.3.5版本,jquery版本過低會報錯 -->
	<script type="text/javascript" src="bootstrap-3.3.5/js/scrollspy.js"></script>
			<!--程式碼說明-->	
			<div id="main">
				<!--左側導航-->
				<div id="left">
					<!--導航欄 id自定義 需引用以下樣式-->
					<nav id="navbar" class="navbar navbar-default">
						<ul class="nav navbar-nav">
							<!--在內容標題出設定連結錨點-->
							<li><a href="#one">標題1</a></li>
							<li><a href="#two">標題2</a></li>
							<li><a href="#three">標題3</a></li>
							<li><a href="#four">標題4</a></li>
						</ul>
					</nav>
				</div>
				<!--右側內容-->
				<!--無論何種實現方式，滾動監聽都需要被監聽的元件是 position: relative; 即相對定位方式。-->
				<!--
				在目標 div 中新增 'data-spy="scroll" ',	'data-target="#navbar"'指定了其對應的導航欄id,	'data-offset="100"'指定了當計算滾動條位置時從頂部開始偏移的畫素數
					-->
				<div id="right" data-spy="scroll" data-target="#navbar" data-offset="100">
					<h2 id="one">標題1</h2>

					<div style="width:auto;">
						內容1內容1內容1內容1內容1內容1
						..............................
						..............................
					<div/>
					<h2 id="two">標題2</h2>

					<div style="width:auto;">
						內容2內容2內容2內容2內容2內容2
						..............................
						..............................
					<div/>
					<h2 id="three">標題3</h2>

					<div style="width:auto;">
						內容3內容3內容3內容3內容3內容3內容3
						..............................
						..............................
					<div/>
					<h2 id="four">標題4</h2>

					<div style="width:auto;">
						內容1內容1內容1內容1內容1內容1內容1
						..............................
						..............................
					<div/>
				</div>

			</div>