レイアウト

ヒント！

ゼロから始めたい場合は、スターターページから始めるのが良いでしょう。

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

• ラッパー .wrapper。サイト全体をラップするdivです。
• メインヘッダー .main-header。ロゴとナビゲーションバーが含まれます。
• サイドバー .sidebar-wrapper。ユーザーパネルとサイドバーメニューが含まれます。
• コンテンツ .content-wrapper。ページヘッダーとコンテンツが含まれます。

レイアウトオプション

注意！

layout-boxedとlayout-navbar-fixedまたはlayout-footer-fixedを同時に使用することはできません。それ以外は自由に組み合わせることができます。

AdminLTE 3.0は、メインレイアウトに適用できるオプションのセットを提供します。これらのクラスは、目的の結果を得るためにbodyタグに追加できます。

• 固定サイドバー：固定サイドバーを取得するには、クラス.layout-fixedを使用します。
• 固定ナビゲーションバー：固定ナビゲーションバーを取得するには、クラス.layout-navbar-fixedを使用します。
• 固定フッター：固定フッターを取得するには、クラス.layout-footer-fixedを使用します。
• 折りたたみサイドバー：読み込み時に折りたたまれたサイドバーにするには、クラス.sidebar-collapseを使用します。
• ボックス型レイアウト：1250pxまでしか伸びないボックス型レイアウトを取得するには、クラス.layout-boxedを使用します。
• トップナビゲーション：サイドバーを削除し、リンクをトップナビゲーションバーに配置するには、クラス.layout-top-navを使用します。

レスポンシブバリエーション

配置に関するレスポンシブな変更には、次のクラスも使用できます。

• 固定ナビゲーションバー
  • 固定ナビゲーションバーを取得するには、クラス.layout-*-navbar-fixedを使用します。
  • 固定されていないナビゲーションバーを取得するには、クラス.layout-*-navbar-not-fixedを使用します。
• 固定フッター
  • 固定フッターを取得するには、クラス.layout-*-footer-fixedを使用します。
  • 固定されていないフッターを取得するには、クラス.layout-*-footer-not-fixedを使用します。

ヒント！

固定ナビゲーションバーでアンカーを使用する場合は、非表示のアンカーに.anchorを追加する必要があります（例：<a id="testAnchor" class="anchor"></a>）。

カラーバリエーション

AdminLTE 3.0は、サイドバー（ライト＆ダーク）とナビゲーションバーに適用できるカラーバリエーションのセットを提供します。利用可能なカラーをこれらのクラスプレフィックスと組み合わせることができます。

• .navbar-*
• .sidebar-dark-*
• .sidebar-light-*
• .accent-*

新機能

AdminLTEでリンク/アクセントカラーをオーバーライドするには、.accent-*をbodyに追加できます。

情報

.navbar-*を.navbar-lightまたは.navbar-darkと組み合わせることができます。

次のカラーを使用できます

テーマカラー

黒/白のニュアンス

カラー

ヒント！

.text-*、.bg-*などでも、これらのカラーバリエーションを使用できます。

カスタム範囲/スイッチ

カスタムカラーのカスタム範囲には、これらのクラスを追加できます

• .custom-range-*

カスタムカラーのカスタムスイッチには、これらのクラスを追加できます

• .custom-switch-off-* （カスタムスイッチオフ用）
• .custom-switch-on-* （カスタムスイッチオン用）

トースト

素敵なカラーのトーストを取得するには、.toastの横にbg-*を使用することもできます。

プラグインサポート

上記のすべてのカラーをこれらのプラグインで使用できます

• Bootstrap スライダー
  • .slider-* （スライダーをラップ）
• iCheck-Bootstrap
  • .icheck-*