Dev

App_Offline.htm Template 臨時維護網頁範本

  1. 說明
  2. Bootstrap 5 技巧
    1. 保證 Footer 置底的方式
    2. 圖片使用 Dara Uri 格式
    3. Bootstrap 5 直接鑲嵌在 Style 當中
    4. 動態圖片尺寸的技巧

設計提供網站臨時維護、緊急維護時，公告訊息的頁面範例，使用 Bootstrap 5，並且著重在使用單一 HTML 完成任務，避免載入其他資源。

JavaScript logo

說明

在 IIS 環境下，如果使用 app_offline.htm 作為檔案命名，加入到站台當中，優先順序會高過於其他的任何檔案，並且只以 app_offline.htm 做回應，包含資料夾路徑下的 png, jpg, csv 等檔案都會回應無效，而是以 app_offline.htm 為回應。

設計成果

如果網頁需要導數計時後跳轉到其他頁面的功能，可以參考 Html 網頁倒數計時重新導向 (使用 JavaScript) 😍

Bootstrap 5 技巧

將整個 body 設定 Display 為 Flex，並設定 html 以及 body 的 height 為 100%。

<style>
    html, body{
        height: 100%;
    }
</style>

<body class="d-flex flex-column">
  <div class="container"></div>
  
  <footer class="bg-dark mt-auto"></footer>
</body>

圖片使用 Dara Uri 格式

保持單一 html 解決所有需求，避免引用額外的資源，使用 EZGIF.COM 將 gif, png, jpg 等圖片格式進行轉換。

Bootstrap 5 直接鑲嵌在 Style 當中

保持單一 html 解決所有需求，手動刻全部的 CSS 太費工夫，雖然使用整個 Bootstrap 5 會增加檔案大小，但實用的 Components 以及 Utilities 值得 😊

動態圖片尺寸的技巧

搭配 Grid System 使用 row 並且使用不同程度的 col size 動態適應圖片寬度，避免寬螢幕狀態下圖片過大，但小螢幕圖片又過小的問題。

<div class="row">
  <div class="col-xs-12 col-10 col-md-8 col-lg-6 mx-auto"></div>
</div>