:::
3-1 使用 Smarty
4. 前端操作界面
- BootStrap的官網在：http://getbootstrap.com/
- BootStrap的正體中文版在：https://kkbruce.tw/bs3/
- BootStrap的簡體中文版在：http://v3.bootcss.com
- Font Awesome符號官網：http://fontawesome.io
- jQuery官網：https://jquery.com/
- jQuery中文手冊：http://www.css88.com/jqapi-1.9/
- jQuery UI官網：https://jqueryui.com/
沒時間慢慢搞的話，請直接下載整理好的頁面檔案
一、加入Bootstrap
- 至 http://getbootstrap.com/getting-started/#download，下載Bootstrap
- 解壓縮至class並將目錄改名為bootstrap
- 加入樣板中的方法：
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--BootStrap--> <link rel="stylesheet" href="class/bootstrap/css/bootstrap.min.css">
- 另外js請加在</body>前即可，若沒用到bootstrap的外掛模組，其實不加也沒關係。
<!--BootStrap js--> <script src="class/bootstrap/js/bootstrap.min.js"></script>
二、加入 jQuery
- 至 https://jquery.com/download/，下載 jquery 以及 jQuery Migrate （請直接另新檔至class即可）
- 可將版本號拿掉，避免日後升級還得改程式。
- 加入樣板中的方法：
<!--jQuery--> <script src="class/jquery.min.js"></script> <script src="class/jquery-migrate.min.js"></script>
三、加入 jQuery-ui
- 下載jquery-ui https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip
- 解壓縮至class並將目錄改名為 jquery-ui
- 加入樣板中的方法：
<!--jQuery UI--> <link rel="stylesheet" href="class/jquery-ui/jquery-ui.min.css"> <script src="class/jquery-ui/jquery-ui.min.js"></script>
四、加入 Font Awesome
- 至 http://fontawesome.io/，下載 Fort Awesome
- 解壓縮至class並將目錄改名為font-awesome
- 加入樣板中的方法：
<!--Font awesome--> <link rel="stylesheet" href="class/font-awesome/css/font-awesome.min.css">
五、基本樣板
<!DOCTYPE html> <html lang="zh-Hant"> <head> <title>頁面</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--BootStrap--> <link rel="stylesheet" href="class/bootstrap/css/bootstrap.min.css"> <!--jQuery--> <script src="class/jquery.min.js"></script> <script src="class/jquery-migrate.min.js"></script> <!--jQuery UI--> <link rel="stylesheet" href="class/jquery-ui/jquery-ui.min.css"> <script src="class/jquery-ui/jquery-ui.min.js"></script> <!--Font awesome--> <link rel="stylesheet" href="class/font-awesome/css/font-awesome.min.css"> </head> <body> 主內容 <!--BootStrap js--> <script src="class/bootstrap/js/bootstrap.min.js"></script> </body> </html>
