:::

3-2 設計RWD顯示界面

一、建立預設頁面:

  1. 請先建立 index.html (完整路徑為: C:\UniServerZ\www\index.html)(Ctrl+N可以開新檔,Ctrl+S可以儲存檔案)
  2. 輸入 !,然後選擇 ! Enter 可產生 HTML5 基本頁面
  3. 輸入 bs,選擇 bs5-$,然後按 Enter 可產生 HTML5+BootStrap5 的基本頁面,如:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <title>Title</title>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    
      <!-- Bootstrap CSS v5.2.1 -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous" />
    </head>
    
    <body>
      <header>
        <!-- place navbar here -->
      </header>
      <main></main>
      <footer>
        <!-- place footer here -->
      </footer>
      <!-- Bootstrap JavaScript Libraries -->
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
        crossorigin="anonymous"></script>
    
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
        integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"
        crossorigin="anonymous"></script>
    </body>
    
    </html>
    1. bootstrap.min.css:是主要的BootStrap樣式檔案,必須引入
    2. popper.min.js:是導覽列等部份元件會用到的js套件(有用到導覽列就必須引入)
    3. bootstrap.min.js:BootStrap部份元件會用到的js(有用到就必須引入)
      1. integrity 屬性是資源完整性規範的一部分,它允許你為 script 提供一個 hash,用來進行驗簽,檢驗加載的JavaScript 文件是否完整,減少XSS 風險。
      2. crossorigin="anonymous":crossorigin 會讓瀏覽器啟用CORS訪問檢查,不填的話等同crossorigin="anonymous",所以其實可以拿掉。
         
  4. <> 包起來的叫做網頁標籤,也就是HTML語法,建置網頁的最基本工具。
  5. 頁面架構用HTML語法建構、外觀用CSS調整(BootStrap就是CSS框架)、搭配等前端(如:JavaScript)及後端語言(如:PHP)可以完成整個系統。
  6. 其中<meta>部份認識一下,還頗重要,這是用告知瀏覽器一些頁面的初始設定為何
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    1. charset="UTF-8":告知瀏覽器,這頁採用UTF-8編碼,若設定錯誤,可能導致中文變亂碼
    2. width=device-width, initial-scale=1, shrink-to-fit=no:在 Firefox/Chrome/Safari/WebView 中都有同樣的排版,也不會在其他瀏覽器中發生問題(照貼即可)。

二、改用本地端檔案:

  1. 由於我們自己有裝BootStrap5,所以無須從網路引入,直接讀取我們安裝的檔案即可
    <!doctype html>
    <html lang="en">
    
    <head>
      <title>校園日誌</title>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
      <!-- Bootstrap CSS v5.3.1 -->
      <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    
    </head>
    
    <body>
      <header>
        <!-- place navbar here -->
      </header>
      <main>
        <h1>Hello-Bootstrap</h1>
      </main>
      <footer>
        <!-- place footer here -->
      </footer>
      <!-- Bootstrap JavaScript Libraries -->
      <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    
    </html>
    1. 用 npm 安裝的套件一律裝在 node_modules 下,且正式檔案一般都在 dist 目錄中
    2. bootstrap.bundle.min.js 可以取代 popper.min.js+bootstrap.min.js
    3. 看起來像這樣:

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 1501150115011501
昨天: 1416141614161416
總計: 7340148734014873401487340148734014873401487340148