アップグレードガイド | AdminLTE 3 ドキュメント

v2.4.xからの移行

AdminLTE v2.4.xをv3.0に移行する最初のステップは、Bootstrap 3のベースコードをBootstrap 4にアップグレードすることです。完全な手順はこちらを参照してください。ベースコードをアップグレードしたら、マークアップを更新する必要があります。

CSS / JSファイル

AdminLTE v3.0では、Bootstrap 4がAdminLTEのCSSファイルに完全に含まれています。Bootstrap CSSファイルbootstrap(.min).cssをロードする必要はありませんが、Bootstrap JSファイルbootstrap(.min).jsは必要になります。

メインヘッダー

メインヘッダーの最大の変更点は、ロゴがメインサイドバーに移動し、メインヘッダーに色のバリエーションが追加されたことです。以下に変更点をすべて示します。

ロゴ
- <a href="index2.html" class="logo">が移動し、.main-sidebar内の.brand-linkとして再構築されました
ヘッダー/ナビ
- <header class="main-header">と<nav class="navbar navbar-static-top">が<nav class="main-header navbar navbar-expand navbar-white navbar-light">に統合されました。
サイドバートグル/左ナビバー
- <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span></a>が<ul class="navbar-nav"><li class="nav-item"><a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a></li></ul>に置き換えられました。
右ナビバー
- <div class="navbar-custom-menu">と<ul class="nav navbar-nav">が<ul class="navbar-nav ml-auto">に統合されました。

メインサイドバー

上記と同様に、最大の変更点はメインサイドバーにロゴが含まれるようになったことと、サイドバーに色のバリエーションが追加されたことです。以下に変更点をすべて示します。

メインサイドバーの色
- <aside class="main-sidebar">が<aside class="main-sidebar sidebar-dark-primary">に置き換えられました。
ロゴ/ブランドリンク
- <a href="index3.html" class="brand-link"><img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"><span class="brand-text font-weight-light">AdminLTE 3</span></a>が古いロゴを置き換えます。
サイドバー
- <section class="sidebar">が<div class="sidebar">に置き換えられました。
ユーザーパネル
- <div class="user-panel"><div class="pull-left image"><img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"></div><div class="pull-left info"><p>Alexander Pierce</p><a href="#"><i class="fa fa-circle text-success"></i> Online</a></div></div>が<div class="user-panel mt-3 pb-3 mb-3 d-flex"><div class="image"><img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"></div><div class="info"><a href="#" class="d-block">Alexander Pierce</a></div></div>に置き換えられました。
サイドバーメニュー
- <nav class="mt-2">が<ul class="sidebar-menu" data-widget="tree">を囲むようになりました。
- <ul class="sidebar-menu" data-widget="tree">が<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">に置き換えられました。
- <li class="header">が<li class="nav-header">に置き換えられました。
- <li>には新しいクラス.nav-itemが必要です。
- <li> <a>には新しいクラス.nav-linkが必要です。
- <li> <a> <i>には新しいクラス.nav-iconが必要です。
- <li> <a> <span>が<p>に置き換えられました。
- <span class="pull-right-container">が削除されました。
- <i class="fa fa-angle-left pull-right"></i>が<i class="right fas fa-angle-left"></i>に置き換えられました。
- <small class="label pull-right bg-green">new</small>が<span class="right badge badge-danger">New</span>に置き換えられました。
- <li> <ul class="treeview-menu">が<ul class="nav nav-treeview">に置き換えられました。

古いサンプルエントリ

<li>
  <a href="pages/widgets.html">
    <i class="fa fa-th"></i> <span>Widgets</span>
    <span class="pull-right-container">
      <small class="label pull-right bg-green">new</small>
    </span>
  </a>
</li>

新しいサンプルエントリ

<li class="nav-item">
  <a href="pages/widgets.html" class="nav-link">
    <i class="nav-icon fas fa-th"></i>
    <p>
      Widgets
      <span class="right badge badge-danger">New</span>
    </p>
  </a>
</li>

古いサンプルエントリ（ツリーメニュー付き）

<li class="treeview">
  <a href="#">
    <i class="fa fa-dashboard"></i> <span>Dashboard</span>
    <span class="pull-right-container">
      <i class="fa fa-angle-left pull-right"></i>
    </span>
  </a>
  <ul class="treeview-menu">
    <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
  </ul>
</li>

新しいサンプルエントリ（ツリーメニュー付き）

<li class="nav-item has-treeview">
  <a href="#" class="nav-link">
    <i class="nav-icon fas fa-tachometer-alt"></i>
    <p>
      Dashboard
      <i class="right fas fa-angle-left"></i>
    </p>
  </a>
  <ul class="nav nav-treeview">
    <li class="nav-item">
      <a href="index.html" class="nav-link active">
        <i class="far fa-circle nav-icon"></i>
        <p>Dashboard v1</p>
      </a>
    </li>
  </ul>
</li>

コンテンツヘッダー

コンテンツヘッダーの最大の変更点は、AdminLTEで.container-fluid、.row、.col-*が使用されるようになり、パンくずリストのマークアップが変更されたことです。以下に変更点をすべて示します。

<section class="content-header">が<div class="content-header">に置き換えられました。
<div class="container-fluid">が<div class="content-header">に追加されました。
<h1>と<ol class="breadcrumb">が<div class="row">と<div class="col-sm-6">で再構築されました。
<h1>が<h1 class="m-0 text-dark">に置き換えられました。
<ol class="breadcrumb">には新しいクラス.float-sm-rightが必要です。
<ol class="breadcrumb"> <li>には新しいクラス.breadcrumb-itemが必要です。

古いコンテンツヘッダーのマークアップ

<section class="content-header">
  <h1>
    Dashboard
    <small>Control panel</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
    <li class="active">Dashboard</li>
  </ol>
</section>

新しいコンテンツヘッダーのマークアップ

<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">
          Dashboard
          <small>Control panel</small>
        </h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">Dashboard v1</li>
        </ol>
      </div>
    </div>
  </div>
</div>

コンテンツ

コンテンツに変更はありません。<section class="content container-fluid">を2つの要素に分割しただけです。

<section class="content">
<div class="container-fluid">

フッター

フッターには、右側のdivにわずかな変更が1つあります。

<div class="pull-right hidden-xs">が<div class="float-right d-none d-sm-inline">に変更されました。

その他

v3.0以降のその他の小さなCSS/HTMLの変更を以下に示します。

.labelが.badgeに名前が変更されました。

JavaScriptプラグイン

v3.0以降のその他の小さなJavaScriptの変更を以下に示します。

data-toggle="*"がCardWidget項目ではなくdata-widget="*"に名前が変更されました。
- CardWidgetの場合は、data-card-widget="*"になりました。