由於 Boostrap 主要是介面，而 jQuery 是動作，第一個動作當然是設計一個畫面。我實在對於美工設計不怎麼樣，假設我要設計的畫面如下：
這篇文章的主軸在於 jQuery 而比較不是 Boostrap，因此我只是簡單的介紹使用到的 Boostrap 元件。在 Boostrap 的設計，一個網頁的內容是包含在一個容器內，而固定寬度容器的名稱是 container，佔滿整個網頁寬度的名稱是 container-fluid。我使用前者，因此我的原始碼是
<body>
<div class="container">
</div>
</body>
<div class="container">
</div>
</body>
有了容器，首先加上容器的標題，也就是如畫面中的"jQuery + Boostrap Example 1: Synchronous"加上“成績查詢”。上方灰色的區塊，我使用的是 Boostrap 中名為 jumbotron 的風格，請留意 <h1> 和 <p> 在 jumbotro 所呈現的效果；而“成績查詢”則是傳統的 <h2> 加上一些 Bootstrap 的文字效果，其格式名稱為 text-center text-primary 分別代表文字置中以及文字為淺藍色，因此原始碼擴充成：
<body>
<div class="container">
<div class="jumbotron">
<h1>jQuery + Bootstrap</h1>
<p>Example 1: Synchrnous</p>
</div>
</div>
<h2 class="text-center text-primary">成績查詢</h2>
</body>
<div class="container">
<div class="jumbotron">
<h1>jQuery + Bootstrap</h1>
<p>Example 1: Synchrnous</p>
</div>
</div>
<h2 class="text-center text-primary">成績查詢</h2>
</body>
建立了標題之後，再來就是網頁內容了。在這個範例中，我們放了一個 form（包含標籤、radio 按鈕、文字欄位、以及 submit 的按鈕），以及將這些 form 元件排放的語法（類似 table）。開始整理這份文件之後，才發現要一步驟一步驟的講清楚有點難，不過我還是盡力一試。首先，在不考慮排版的效果下，先說明在 boostrap 中設計 form 的方式。
這個範例如果利用傳統的 form 來寫，其原始碼如下：
<form method="post" action="get-grade.pl">
請選擇班別:
<input type="radio" name="class" value="xml.txt">研一</input><br（/>
請輸入代碼:
<input type="password" name="get-grade"/><br/>
<input type="submit" value="送出查詢"/>
</form>
請選擇班別:
<input type="radio" name="class" value="xml.txt">研一</input><br（/>
請輸入代碼:
<input type="password" name="get-grade"/><br/>
<input type="submit" value="送出查詢"/>
</form>
get-grade.pl 雖然是利用 Perl 所寫的，但是它可以是任何電腦語言所撰寫的後端程式，其目的是讀取一個成績檔案，然後比對使用者輸入的密碼；一旦比對成功，程式會把使用者的成績呈現在畫面上。我假設閱讀這份教材的讀者已經熟悉 HTML，我就不再解釋了。
根據 Boostrap 的建議，首先將 form 標籤加上 role="form"，因此原始碼的第一行變成 <form method="post" action="get-grade.pl">。把標籤（例如範例中的 “請選擇班別:”）以及 form 的文字元件包在一對 <div class="form-group"> 中，而且文字元件 input 加上 class="form-control"，因此輸入密碼的原始碼變成：
<div class="form-group">
<label for="get-grade">請輸入代碼:</label>
<input class="form-control" type="password" name="get-grade"/>
</div>
<label for="get-grade">請輸入代碼:</label>
<input class="form-control" type="password" name="get-grade"/>
</div>
其中 label 標籤中的 for="get-grade" 代表這個標籤是給名為（即 name="get-grade"）的 input 元件。再來說明 radio 按鈕；由於 radio 按鈕常用於多選一，而且如果有多個班級，我打算讓這些班級選項，一字排開，因此採用 Bootstrap 的 radio-inline 的用法，其原始碼變成：
<div class="form-group">
<label for="class">請選擇班級:</label>
<label class="radio-inline">
<input type="radio" name="class" value="xml.txt">研一</label>
</div>
<label for="class">請選擇班級:</label>
<label class="radio-inline">
<input type="radio" name="class" value="xml.txt">研一</label>
</div>
最後就是 submit 的按鈕，Boostrap 有其一套按鈕的風格，其風格由 btn 以及 btn-default 所組成，因此這一段的原始碼變成：
<div class="form-group">
<input class="btn btn-default" type="submit" value="送出查詢"/>
</div>
<input class="btn btn-default" type="submit" value="送出查詢"/>
</div>
按鈕的其他風格包含 btn-info 等，有興趣的讀者可以參考 Bootstrap 的相關文件，並將 btn-default 換成另一個風格（如 btn-info）。
說到這裡，我們快完成了，剩下的就是類似 table 的排版，而這種排版在 Bootstrap 稱之為 grid。Bootstrap 的 grid 將一列的空間分成 12 等分，然後設計者可以依據自己的喜好配置；例如我可以分成 12 欄，每一欄是一個 grid 等份，或者分成 3 欄而每個欄位是 4 個 grid 等份，甚至是不平均的 2、7、3 個 grid 等份。重點是只要一列中的 grid 等份加起來是 12 即可。
在範例中，我把 form 分成三個列，每個列兩個欄位，第一個欄位佔 4 等份，剩下的 8 等份就給第二個欄位。grid 的表達方式為 col-x-y，其中 x 可以是 xs（給手機）、 sm（給平板）、 md（給桌機）、 lg（給大型螢幕），我還沒仔細觀察他們的差別，暫時使用 md；y 代表幾個等份，如果是 4 個等份，我就寫成 col-md-4。
有了這個概念之後，我們就把每一個 form-group，分成兩個區塊，而每個區塊分別由 4 和 8 個等份組成，這樣子一來，我們的完整的原始碼如下：
<!DOCTYPE html>
<html lang="Big5">
<head>
<meta charset="Big5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>jQuery + Bootstrap</h1>
<p>Example 1: Synchrnous</p>
</div>
<h2 class="text-center text-primary">成績查詢</h2>
<form class="form-horizontal" role="form" method="post" action="get-grade.pl">
<div class="form-group">
<div class="col-md-4 text-right">
<label class="control-label" for="class">請選擇班別:</label>
</div>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" name="class" value="xml.txt">研一</label>
</div>
</div>
<div class="form-group">
<div class="col-md-4 text-right">
<label class="control-label" for="get-grade">請輸入代碼:</label>
</div>
<div class="col-md-8">
<input class="form-control" type="password" name="get-grade"/>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
<input class="btn btn-info" type="submit" value="送出查詢"/>
</div>
</div>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
<html lang="Big5">
<head>
<meta charset="Big5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>jQuery + Bootstrap</h1>
<p>Example 1: Synchrnous</p>
</div>
<h2 class="text-center text-primary">成績查詢</h2>
<form class="form-horizontal" role="form" method="post" action="get-grade.pl">
<div class="form-group">
<div class="col-md-4 text-right">
<label class="control-label" for="class">請選擇班別:</label>
</div>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" name="class" value="xml.txt">研一</label>
</div>
</div>
<div class="form-group">
<div class="col-md-4 text-right">
<label class="control-label" for="get-grade">請輸入代碼:</label>
</div>
<div class="col-md-8">
<input class="form-control" type="password" name="get-grade"/>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
<input class="btn btn-info" type="submit" value="送出查詢"/>
</div>
</div>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
結束前，我們說明一下綠色的部分，我們把“請選擇班別”的那一段以一個 div 包起來當作一個區塊，而該區塊佔用 4 個等份（即 col-md-4），並且文字向右靠齊；類似的，文字欄位也被一個 div 包起來並佔用 8 個等份（即 col-md-4）。至於藍色的部分，由於最後一列只有一個按鈕，我將它置於第二個欄位，因此我必須把第一個欄位（4個等份）的空間保留下來，即 col-md-offset-4。
測試網站在 這裡，可以輸入 111111 或者 999999 看看執行結果。
沒有留言:
張貼留言