雖然說自適應網頁技術RWD全部用CSS的Media Screen，就可自動的縮放版面，相當的方便。但一樣的類別名稱，就得依照個別的解析大小逐一設定，一般使用者比較沒辦法獨力完成。
CSS
CSS不能單獨使用，必須與網頁一起協同工作，為網頁型態的文件起裝飾作用。網頁中有哪些內容，CSS確定以何種外觀(大小、粗細、顏色、對齊和位置)展現這些元素。CSS可以用於設定頁面布局、設定頁面元素樣式、設定適用於所有網頁的全域樣式。CSS可以零散地直接添加在要應用樣式的網頁元素上，也可以集中化內建於網頁、連結式引入網頁以及匯入式引入網頁。市面上套裝樣版的廠牌不同但效果大同小異，我們先試著導 Bootstrap 做為進入裝飾器的入門。請將以下文字複製到網頁的 <head> 與 </head>之間。1 | <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>之間。1 2 | <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檔案打開，將內容置換下方文字。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <%@ 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="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可以輕易的建立自適應網頁，將下列文字貼到當中，將得到基本選單。此時調整視窗的大小，觀察選單在不同清況下的變化。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <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> |
完整的程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <%@ 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="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> |
在學習自動導入裝飾器之前，可以利同這個樣版建立簡單的練習。
沒有留言:
張貼留言