AdminLTELogo

升級指南

從 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。

主標頭

主標頭最大的變化是標誌已移至主側邊欄，並且主標頭現在具有顏色變化，以下是所有更改

  1. 標誌
    • <a href="index2.html" class="logo"> 已移動並重建為 .brand-link 在 .main-sidebar 內
  2. 標頭 / 導覽
    • <header class="main-header"> & <nav class="navbar navbar-static-top"> 合併為 <nav class="main-header navbar navbar-expand navbar-white navbar-light">
  3. 側邊欄切換 / 左側導覽列
    • <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">切換導覽</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>
  4. 右側導覽列
    • <div class="navbar-custom-menu"> & <ul class="nav navbar-nav"> 合併為 <ul class="navbar-nav ml-auto">
主側邊欄

如上所述，最大的變化是主側邊欄現在包含標誌，並且側邊欄現在具有顏色變化，以下是所有更改

  1. 主側邊欄顏色
    • <aside class="main-sidebar"> 已替換為 <aside class="main-sidebar sidebar-dark-primary">
  2. 標誌 / 品牌連結
    • <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> 取代舊的標誌
  3. 側邊欄
    • <section class="sidebar"> 已替換為 <div class="sidebar">
  4. 使用者面板
    • <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>
  5. 側邊欄選單
    • <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">
  <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"> 分割為兩個元素

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

頁尾對於右側 div 只有一個小的變化。

  • <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="*" 已重新命名為 data-widget="*"，而不是 CardWidget 項目
    • 對於 CardWidget，現在是 data-card-widget="*"