:::

4. 前端操作界面

沒時間慢慢搞的話,請直接下載整理好的頁面檔案

一、加入Bootstrap

  1. http://getbootstrap.com/getting-started/#download下載Bootstrap
  2. 解壓縮至class並將目錄改名為bootstrap
  3. 加入樣板中的方法:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--BootStrap-->
    <link rel="stylesheet" href="class/bootstrap/css/bootstrap.min.css">
  4. 另外js請加在</body>前即可,若沒用到bootstrap的外掛模組,其實不加也沒關係。
    <!--BootStrap js-->
    <script src="class/bootstrap/js/bootstrap.min.js"></script>

二、加入 jQuery

  1. https://jquery.com/download/下載 jquery 以及 jQuery Migrate (請直接另新檔至class即可)
  2. 可將版本號拿掉,避免日後升級還得改程式。
  3. 加入樣板中的方法:
    <!--jQuery-->
    <script src="class/jquery.min.js"></script>
    <script src="class/jquery-migrate.min.js"></script>

三、加入 jQuery-ui

  1. 下載jquery-ui https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip
  2. 解壓縮至class並將目錄改名為 jquery-ui
  3. 加入樣板中的方法:
    <!--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

  1. http://fontawesome.io/下載 Fort Awesome
  2. 解壓縮至class並將目錄改名為font-awesome
  3. 加入樣板中的方法:
    <!--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>

 


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D27%26tbdsn%3D700

計數器

今天: 1564156415641564
昨天: 2198219821982198
總計: 7326422732642273264227326422732642273264227326422