AdminLTELogo

レイアウト

ヒント！

スターターページは、ゼロからアプリを構築する場合に最適な出発点です。

レイアウトは4つの主要部分で構成されています

  • ラッパー .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は、ScrollAnywhereと呼ばれるChrome拡張機能で問題を引き起こす可能性があります。

プリローダー

回避するためのプリローダー 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のリンク/アクセントカラーをオーバーライドできます。 .accent-*をbodyに追加できます。

情報

.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-checkboxとcustom-radioには、以下のクラスを追加できます

  • .custom-control-input-*

カスタムコントロール入力に.custom-control-input-outlineを追加することで、チェックボックスとラジオボタンの外観をアウトラインに変更することもできます。

カスタムカラーのcustom-rangeには、以下のクラスを追加できます

  • .custom-range-*

カスタムカラーのcustom-rangeには、以下のクラスを追加できます

  • .custom-range-*

カスタムカラーのcustom-switchには、以下のクラスを追加できます

  • .custom-switch-off-* (カスタムスイッチオフ用)
  • .custom-switch-on-* (カスタムスイッチオン用)
トースト

また、.toastの横にbg-*を使用して、素敵な色のトーストを表示することもできます。

プラグインサポート

上記のすべての色を以下のプラグインで使用できます

  • Bootstrap Slider
    • .slider-* (スライダーを囲む)
  • iCheck-Bootstrap
    • .icheck-*