裝飾器

建立程式碼產生動態伺服器網站時，一致的頁面布局和外觀一件重要的工作。不僅為了美觀，更是為了讓整個網站的後續工作進行順利的一項關鍵。Bootstrap是用於網站和網路應用程式開發的HTML介面。除了包括HTML、CSS及JavaScript的框架，也有提供字體、表單、按鈕、選單及其他各種元件及Javascript擴充套件，使得網頁的應用開發更加容易。從原本的桌機版面，衍伸到手機或平版電腦的自適應版型。無論那一種方式，Bootstrap 都能讓網頁能在各個裝置上，以最佳的方式來呈現，

雖然說自適應網頁技術RWD全部用CSS的Media Screen，就可自動的縮放版面，相當的方便。但一樣的類別名稱，就得依照個別的解析大小逐一設定，一般使用者比較沒辦法獨力完成。

CSS

CSS不能單獨使用，必須與網頁一起協同工作，為網頁型態的文件起裝飾作用。網頁中有哪些內容，CSS確定以何種外觀(大小、粗細、顏色、對齊和位置)展現這些元素。CSS可以用於設定頁面布局、設定頁面元素樣式、設定適用於所有網頁的全域樣式。CSS可以零散地直接添加在要應用樣式的網頁元素上，也可以集中化內建於網頁、連結式引入網頁以及匯入式引入網頁。市面上套裝樣版的廠牌不同但效果大同小異，我們先試著導 Bootstrap 做為進入裝飾器的入門。請將以下文字複製到網頁的 <head> 與 </head>之間。

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

bootstrap2 是穩定的版本，重點是它能自動套用。比起各種新版需要大量手動套用方便許多。

Java Script

JavaScript也必須與網頁一起協同工作，但特點在JS能在不載入新資料的的情況下就可以更新網頁內容。這些內容當然還是得要載入，只是在首次開啟網頁時就已經載入。透過JS在這些靜態內容中做置換，讓網頁內容看似生動。請將以下文字同樣也複製到網頁的 <head> 與 </head>之間。

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

為了使用Bootstrap提供的功能而載入bootstrap.js，但是bootstrap.js必須依靠jquery才能工作。因此必須同時載入這2個js檔案，而且順序非常重要。

檢視套用後的網頁

請將最初建立的index.jsp檔案打開，將內容置換下方文字。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="org.sqlite.*"%>
<%	request.setCharacterEncoding("UTF-8");//將輸入編碼設定為UTF-8
	response.setCharacterEncoding("UTF-8");//將輸出編碼設定為UTF-8%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>	
	<div class="container">
		<div class="page-header">
			<h1>我的JSP學習歷程首頁</h1>
		</div>
		<p class="lead">JSP可用於網頁應用程式開發的前端，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、選單和
			Javascript動態擴充。與之對應的「後端」是在伺服器上面執行的程式碼框架，JSP也能以簡單的語法提供絕大部份的應用所需。</p>
		<p>此 <a href="#">網站</a> 為學習JSP過程中的課程範例的學習歷程,</p>		
		<div class="page-footer">
			<p class="muted credit">
				內容是由 <a href="#">中華科技大學</a> 資管系 <a href="#">10X14D0XX同學</a> 建立
			</p>
		</div>
	</div>	
</body>
</html>

建立選單

利用剛導入的Bootstrap可以輕易的建立自適應網頁，將下列文字貼到

當中，將得到基本選單。此時調整視窗的大小，觀察選單在不同清況下的變化。

<div class="navbar navbar-static-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
			<span class="icon-bar"></span> 
			<span class="icon-bar"></span> 
			<span class="icon-bar"></span>
			</a>
			<a class="brand" href="#">我的學習歷程</a>
			<div class="nav-collapse collapse">
				<ul class="nav">
					<li class="active"><a href="#">首頁</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">課程選單 <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">裝飾器</a></li>
							<li><a href="#">計數器</a></li>
							<li class="divider"></li>
							<li class="nav-header">期中</li>
							<li><a href="#">BBS</a></li>
							<li><a href="#">聊天室</a></li>
							<li><a href="#">大樂透開獎</a></li>
							<li class="divider"></li>
							<li class="nav-header">期末</li>
							<li><a href="#">問卷/投票</a></li>
							<li><a href="#">購物車</a></li>
						</ul></li>
					<li><a href="#">筆記1</a></li>
					<li><a href="#">筆記2</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

完整的程式碼

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="org.sqlite.*"%>
<%	request.setCharacterEncoding("UTF-8");//將輸入編碼設定為UTF-8
	response.setCharacterEncoding("UTF-8");//將輸出編碼設定為UTF-8%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-static-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span>
				</a>
				<a class="brand" href="#">我的學習歷程</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="active"><a href="#">首頁</a></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">課程選單 <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">裝飾器</a></li>
								<li><a href="#">計數器</a></li>
								<li class="divider"></li>
								<li class="nav-header">期中</li>
								<li><a href="#">BBS</a></li>
								<li><a href="#">聊天室</a></li>
								<li><a href="#">大樂透開獎</a></li>
								<li class="divider"></li>
								<li class="nav-header">期末</li>
								<li><a href="#">問卷/投票</a></li>
								<li><a href="#">購物車</a></li>
							</ul></li>
						<li><a href="#">筆記1</a></li>
						<li><a href="#">筆記2</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>	
	<div class="container">
		<div class="page-header">
			<h1>我的JSP學習歷程首頁</h1>
		</div>
		<p class="lead">JSP可用於網頁應用程式開發的前端，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、選單和
			Javascript動態擴充。與之對應的「後端」是在伺服器上面執行的程式碼框架，JSP也能以簡單的語法提供絕大部份的應用所需。</p>
		<p>此 <a href="#">網站</a> 為學習JSP過程中的課程範例的學習歷程,</p>		
		<div class="page-footer">
			<p class="muted credit">
				內容是由 <a href="#">中華科技大學</a> 資管系 <a href="#">10X14D0XX同學</a> 建立
			</p>
		</div>
	</div>	
</body>
</html>