AdminLTELogo

版面配置

提示！

如果您想從頭開始建構應用程式，起始頁面是個不錯的起點。

版面配置由四個主要部分組成

  • 包裝器 .wrapper。一個包裹整個網站的 div。
  • 主標頭 .main-header。包含標誌和導覽列。
  • 主側邊欄 .main-sidebar。包含側邊欄使用者面板、搜尋表單和選單。
  • 內容 .content-wrapper。包含頁面標頭和內容。

版面配置選項

注意！

您不能同時使用 layout-boxed 和 layout-navbar-fixed 或 layout-footer-fixed。其他任何選項都可以混合使用。

AdminLTE 3.2 提供一組選項來套用至您的主要版面配置。這些類別中的每一個都可以新增至 body 標籤以達到預期的目標。

  • 固定側邊欄：使用 .layout-fixed 類別來取得固定側邊欄。
  • 固定導覽列：使用 .layout-navbar-fixed 類別來取得固定導覽列。
  • 固定頁腳：使用 .layout-footer-fixed 類別來取得固定頁腳。
  • 摺疊側邊欄：使用 .sidebar-collapse 類別在載入時顯示摺疊的側邊欄。
  • 盒狀版面配置：使用 .layout-boxed 類別來取得僅延伸至 1250px 的盒狀版面配置。
  • 頂部導覽：使用 .layout-top-nav 類別來移除側邊欄並將連結放在頂部導覽列。
響應式變化

您也可以使用以下類別來進行響應式變更

  • 固定導覽列
    • 使用 .layout-*-navbar-fixed 類別來取得固定導覽列。
    • 使用 .layout-*-navbar-not-fixed 類別來取得非固定導覽列。
  • 固定頁腳
    • 使用 .layout-*-footer-fixed 類別來取得固定頁腳。
    • 使用 .layout-*-footer-not-fixed 類別來取得非固定頁腳。
提示！

如果想搭配固定導覽列使用錨點，您需要在隱藏的錨點中加入 .anchor，例如 <a id="testAnchor" class="anchor"></a>。

若要平滑滾動至錨點，您需要在 HTML 標籤中加入 .scroll-smooth，例如 <html class="scroll-smooth">，否則它會直接跳至您的錨點，.scroll-smooth 可能會導致 Chrome 擴充功能 ScrollAnywhere 出現問題。

預載入器

預載入器以避免 https://github.com/ColorlibHQ/AdminLTE/discussions/3319

<div class="wrapper">
  <!-- Preloader -->
  <div class="preloader">
    <img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>
</div>
  • 預載入器元素應新增至 .wrapper 元素內。
  • 您可以取代影像，或修改大小，或在 .preloader 元素內加入任何預載入項目。

深色模式

AdminLTE 3.2 提供深色模式選項。您可以在 body 標籤中加入

  • .dark-mode

色彩變化

AdminLTE 3.2 提供一組色彩變化來套用至您的側邊欄（淺色和深色）和導覽列。您可以將任何可用的顏色與這些類別前綴結合

  • .navbar-*
  • .sidebar-dark-*
  • .sidebar-light-*
  • .accent-*
新功能

您可以使用覆寫 AdminLTE 中的連結/強調色，您可以在 body 中加入 .accent-*。

資訊

您可以將 .navbar-* 與 .navbar-light 或 .navbar-dark 結合使用。

您必須僅使用 .navbar-dark 而不進行任何組合。

可以使用以下顏色

主題顏色
主要 (primary) / 藍色 (blue)
次要 (secondary)
成功 (success) / 綠色 (green)
資訊 (info) / 青色 (cyan)
警告 (warning) / 黃色 (yellow)
危險 (danger) / 紅色 (red)
黑/白細微差別
黑色 (black)
深灰 (gray-dark)
灰色 (gray)
淺色 (light)
顏色
靛藍 (indigo)
海軍藍 (navy)
紫色 (purple)
紫紅色 (fuchsia)
粉紅色 (pink)
栗色 (maroon)
橘色 (orange)
萊姆綠 (lime)
藍綠色 (teal)
橄欖綠 (olive)
提示！

您甚至可以將這些色彩變化與 .text-*、.bg-* 等更多組合一起使用。

自訂範圍/開關

對於自訂顏色的自訂核取方塊和自訂單選鈕，您可以新增這些類別

  • .custom-control-input-*

您也可以透過在自訂控制輸入上加入 .custom-control-input-outline，將外觀變更為外框的核取方塊和單選鈕。

對於自訂顏色的自訂範圍，您可以新增這些類別

  • .custom-range-*

對於自訂顏色的自訂範圍，您可以新增這些類別

  • .custom-range-*

對於自訂顏色的自訂開關，您可以新增這些類別

  • .custom-switch-off-*（用於自訂開關關閉）
  • .custom-switch-on-*（用於自訂開關開啟）
提示訊息

您也可以在 .toast 旁邊使用 bg-* 來取得漂亮的彩色提示訊息。

外掛支援

您可以將以上所有顏色用於這些外掛

  • Bootstrap 滑桿
    • .slider-*（包在滑桿周圍）
  • iCheck-Bootstrap
    • .icheck-*