AdminLTEドキュメント バージョン2.3

はじめに

AdminLTEは、管理ダッシュボードとコントロールパネル用の人気のあるオープンソースのWebAppテンプレートです。これは、CSSフレームワークBootstrap 3に基づいたレスポンシブなHTMLテンプレートです。デザインにBootstrapのすべてのコンポーネントを利用し、バックエンドアプリケーションのユーザーインターフェースとして使用できる一貫したデザインを作成するために、一般的に使用される多くのプラグインのスタイルを変更しています。AdminLTEはモジュール式デザインに基づいており、簡単にカスタマイズおよび構築できます。このドキュメントでは、テンプレートのインストールと、テンプレートにバンドルされているさまざまなコンポーネントの探索について説明します。

ダウンロード

AdminLTEは、異なるスキルレベルとユースケースに対応する2つの異なるバージョンでダウンロードできます。

File Hierarchy of the Source Code Package

      AdminLTE/
      ├── dist/
      │   ├── CSS/
      │   ├── JS
      │   ├── img
      ├── build/
      │   ├── less/
      │   │   ├── AdminLTE's Less files
      │   └── Bootstrap-less/ (Only for reference. No modifications have been made)
      │       ├── mixins/
      │       ├── variables.less
      │       ├── mixins.less
      └── plugins/
          ├── All the customized plugins CSS and JS files

依存関係

AdminLTEは、2つの主要なフレームワークに依存しています。ダウンロード可能なパッケージには、これらのライブラリの両方が含まれているため、手動でダウンロードする必要はありません。

• Bootstrap 3
• jQuery 1.11以上
• その他すべてのプラグインは以下にリストされています

アドバイス

新しい素晴らしいテーマを見る前に、テーマに慣れるためのいくつかのヒントを次に示します。

• AdminLTEはBootstrap 3に基づいています。Bootstrapに慣れていない場合は、Webサイトにアクセスしてドキュメントを読んでください。すべてのBootstrapコンポーネントは、AdminLTEのスタイルに合わせて変更されており、テンプレート全体で一貫した外観を提供します。これにより、AdminLTEの最高のものを確実に得られます。
• テーマにバンドルされているページを確認してください。ほとんどのテンプレートのサンプルページには、コンポーネントの作成または使用方法に関する簡単なヒントが含まれており、必要なものをその場で作成する必要がある場合に非常に役立ちます。
• ドキュメント。AdminLTEでのエクスペリエンスをスムーズにするために最善を尽くしています。それを実現する1つの方法は、ドキュメントとサポートを提供することです。ドキュメントに何かが欠けていると思われる場合は、遠慮なく問題を作成してお知らせください。
• LESSで構築されています。このテーマでは、カスタマイズと使用を容易にするためにLESSコンパイラーを使用しています。CSSまたはSASSを知っていれば、LESSを学ぶのは簡単です。LESSを学ぶ必要はありませんが、将来的には大いに役立ちます。
• GitHubでホストされています。GitHubリポジトリにアクセスして、問題を確認したり、リクエストを作成したり、プロジェクトに貢献したりしてください。

注：LESSファイルは、コンパイル済みのCSSファイルよりもコメントが優れています。

レイアウト

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

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

レイアウトオプション

AdminLTE 2.0では、メインレイアウトに適用する一連のオプションが提供されています。これらのクラスはそれぞれ、目的の結果を得るためにbodyタグに追加できます。

• 固定：.fixedクラスを使用して、固定ヘッダーとサイドバーを取得します。
• 折りたたまれたサイドバー：.sidebar-collapseクラスを使用して、ロード時に折りたたまれたサイドバーを表示します。
• ボックス化レイアウト：.layout-boxedクラスを使用して、1250pxまでのみ拡張されるボックス化レイアウトを取得します。
• トップナビゲーション .layout-top-navクラスを使用して、サイドバーを削除し、トップナビゲーションバーにリンクを表示します。

注：layout-boxedとfixedの両方を同時に使用することはできません。その他はすべて混在させることができます。

スキン

スキンはdist/css/skinsフォルダーにあります。必要なスキンファイルを選択し、適切なクラスをbodyタグに追加して、テンプレートの外観を変更します。利用可能なスキンのリストは次のとおりです。

AdminLTE Javascriptオプション

AdminLTEのapp.jsのオプションの変更は、次のいずれかの方法を使用して行うことができます。

app.jsの編集

メインのJavascriptファイル内で、ユースケースに合わせて$.AdminLTE.optionsオブジェクトを変更します。

AdminLTEOptionsの定義

または、AdminLTEOptionsという名前のグローバルオプション変数を定義し、app.jsをロードする前に初期化することもできます。

例

<script>
        var AdminLTEOptions = {
          //Enable sidebar expand on hover effect for sidebar mini
          //This option is forced to true if both the fixed layout and sidebar mini
          //are used together
          sidebarExpandOnHover: true,
          //BoxRefresh Plugin
          enableBoxRefresh: true,
          //Bootstrap.js tooltip
          enableBSToppltip: true
        };
      </script>
      <script src="dist/js/app.js" type="text/javascript"></script>

利用可能なAdminLTEオプション

{
        //Add slimscroll to navbar menus
        //This requires you to load the slimscroll plugin
        //in every page before app.js
        navbarMenuSlimscroll: true,
        navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
        navbarMenuHeight: "200px", //The height of the inner menu
        //General animation speed for JS animated elements such as box collapse/expand and
        //sidebar treeview slide up/down. This option accepts an integer as milliseconds,
        //'fast', 'normal', or 'slow'
        animationSpeed: 500,
        //Sidebar push menu toggle button selector
        sidebarToggleSelector: "[data-toggle='offcanvas']",
        //Activate sidebar push menu
        sidebarPushMenu: true,
        //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
        sidebarSlimScroll: true,
        //Enable sidebar expand on hover effect for sidebar mini
        //This option is forced to true if both the fixed layout and sidebar mini
        //are used together
        sidebarExpandOnHover: false,
        //BoxRefresh Plugin
        enableBoxRefresh: true,
        //Bootstrap.js tooltip
        enableBSToppltip: true,
        BSTooltipSelector: "[data-toggle='tooltip']",
        //Enable Fast Click. Fastclick.js creates a more
        //native touch experience with touch devices. If you
        //choose to enable the plugin, make sure you load the script
        //before AdminLTE's app.js
        enableFastclick: true,
        //Control Sidebar Tree Views
        enableControlTreeView: true,
        //Control Sidebar Options
        enableControlSidebar: true,
        controlSidebarOptions: {
          //Which button should trigger the open/close event
          toggleBtnSelector: "[data-toggle='control-sidebar']",
          //The sidebar selector
          selector: ".control-sidebar",
          //Enable slide over content
          slide: true
        },
        //Box Widget Plugin. Enable this plugin
        //to allow boxes to be collapsed and/or removed
        enableBoxWidget: true,
        //Box Widget plugin options
        boxWidgetOptions: {
          boxWidgetIcons: {
            //Collapse icon
            collapse: 'fa-minus',
            //Open icon
            open: 'fa-plus',
            //Remove icon
            remove: 'fa-times'
          },
          boxWidgetSelectors: {
            //Remove button selector
            remove: '[data-widget="remove"]',
            //Collapse button selector
            collapse: '[data-widget="collapse"]'
          }
        },
        //Direct Chat plugin options
        directChat: {
          //Enable direct chat by default
          enable: true,
          //The button to open and close the chat contacts pane
          contactToggleSelector: '[data-widget="chat-pane-toggle"]'
        },
        //Define the set of colors to use globally around the website
        colors: {
          lightBlue: "#3c8dbc",
          red: "#f56954",
          green: "#00a65a",
          aqua: "#00c0ef",
          yellow: "#f39c12",
          blue: "#0073b7",
          navy: "#001F3F",
          teal: "#39CCCC",
          olive: "#3D9970",
          lime: "#01FF70",
          orange: "#FF851B",
          fuchsia: "#F012BE",
          purple: "#8E24AA",
          maroon: "#D81B60",
          black: "#222222",
          gray: "#d2d6de"
        },
        //The standard screen sizes that bootstrap uses.
        //If you change these in the variables.less file, change
        //them here too.
        screenSizes: {
          xs: 480,
          sm: 768,
          md: 992,
          lg: 1200
        }
      }

コンポーネント

メインヘッダー

メインヘッダーには、ロゴとナビゲーションバーが含まれています。ナビゲーションバーの構成は、Bootstrapが提供していないコンポーネントがあるため、Bootstrapとはわずかに異なります。ナビゲーションバーは2つの方法で構成できます。これは通常のナビゲーションバーの例であり、次にトップナビゲーションレイアウトの例を示します。

<header class="main-header">
        <a href="../../index2.html" class="logo">
          <!-- LOGO -->
          AdminLTE
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
              <li class="dropdown messages-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-envelope-o"></i>
                  <span class="label label-success">4</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">You have 4 messages</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li><!-- start message -->
                        <a href="#">
                          <div class="pull-left">
                            <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            Sender Name
                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
                          </h4>
                          <p>Message Excerpt</p>
                        </a>
                      </li><!-- end message -->
                      ...
                    </ul>
                  </li>
                  <li class="footer"><a href="#">See All Messages</a></li>
                </ul>
              </li>
              <!-- Notifications: style can be found in dropdown.less -->
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <span class="label label-warning">10</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">You have 10 notifications</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <i class="ion ion-ios-people info"></i> Notification title
                        </a>
                      </li>
                      ...
                    </ul>
                  </li>
                  <li class="footer"><a href="#">View all</a></li>
                </ul>
              </li>
              <!-- Tasks: style can be found in dropdown.less -->
              <li class="dropdown tasks-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-flag-o"></i>
                  <span class="label label-danger">9</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">You have 9 tasks</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li><!-- Task item -->
                        <a href="#">
                          <h3>
                            Design some buttons
                            <small class="pull-right">20%</small>
                          </h3>
                          <div class="progress xs">
                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <span class="sr-only">20% Complete</span>
                            </div>
                          </div>
                        </a>
                      </li><!-- end task item -->
                      ...
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">View all tasks</a>
                  </li>
                </ul>
              </li>
              <!-- User Account: style can be found in dropdown.less -->
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                  <span class="hidden-xs">Alexander Pierce</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- User image -->
                  <li class="user-header">
                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    <p>
                      Alexander Pierce - Web Developer
                      <small>Member since Nov. 2012</small>
                    </p>
                  </li>
                  <!-- Menu Body -->
                  <li class="user-body">
                    <div class="col-xs-4 text-center">
                      <a href="#">Followers</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Sales</a>
                    </div>
                    <div class="col-xs-4 text-center">
                      <a href="#">Friends</a>
                    </div>
                  </li>
                  <!-- Menu Footer-->
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-default btn-flat">Profile</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" class="btn btn-default btn-flat">Sign out</a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </header>

トップナビゲーションレイアウト。メインヘッダーの例。

      <header class="main-header">
        <nav class="navbar navbar-static-top">
          <div class="container-fluid">
          <div class="navbar-header">
            <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
              <i class="fa fa-bars"></i>
            </button>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
              </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </header>

サイドバー

このページの左側で使用されているサイドバーは、サイドバーがどのように表示されるかの例を提供します。サイドバーの構成

      <div class="main-sidebar">
        <!-- Inner sidebar -->
        <div class="sidebar">
          <!-- user panel (Optional) -->
          <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>User Name</p>

              <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
            </div>
          </div><!-- /.user-panel -->

          <!-- Search Form (Optional) -->
          <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form><!-- /.sidebar-form -->

          <!-- Sidebar Menu -->
          <ul class="sidebar-menu">
            <li class="header">HEADER</li>
            <!-- Optionally, you can add icons to the links -->
            <li class="active"><a href="#"><span>Link</span></a><</li>
            <li><a href="#"><span>Another Link</span></a></li>
            <li class="treeview">
              <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
              <ul class="treeview-menu">
                <li><a href="#">Link in level 2</a></li>
                <li><a href="#">Link in level 2</a></li>
              </ul>
            </li>
          </ul><!-- /.sidebar-menu -->

        </div><!-- /.sidebar -->
      </div><!-- /.main-sidebar -->

コントロールサイドバー

コントロールサイドバーは右側のサイドバーです。多くの目的で使用でき、作成が非常に簡単です。サイドバーには、2つの異なる表示/非表示スタイルが付属しています。1つ目は、サイドバーをコンテンツの上にスライドさせることを許可します。2つ目は、サイドバーのスペースを作るためにコンテンツをプッシュします。これらのいずれかのメソッドは、Javascriptオプションを通じて設定できます。

次のコードは、.wrapper div内に配置する必要があります。私はフッターの直後に配置することを好みます。

ダークサイドバーマークアップ

<!-- The Right Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Content of the sidebar goes here -->
      </aside>
      <!-- The sidebar's background -->
      <!-- This div must placed right after the sidebar for it to work-->
      <div class="control-sidebar-bg"></div>

ライトサイドバーマークアップ

<!-- The Right Sidebar -->
      <aside class="control-sidebar control-sidebar-light">
        <!-- Content of the sidebar goes here -->
      </aside>
      <!-- The sidebar's background -->
      <!-- This div must placed right after the sidebar for it to work-->
      <div class="control-sidebar-bg"></div>

サイドバーを作成したら、開閉するためのトグルボタンが必要です。任意のボタンにdata-toggle="control-sidebar"属性を追加すると、自動的にトグルボタンとして機能します。

トグルボタンの例

サイドバートグルマークアップ

<button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>

インフォボックス

インフォボックスは、統計スニペットを表示するために使用されます。インフォボックスには2つのタイプがあります。

最初のタイプのインフォボックス

マークアップ

<div class="info-box">
        <!-- Apply any bg-* class to to the icon to color it -->
        <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">Likes</span>
          <span class="info-box-number">93,139</span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->

2番目のタイプのインフォボックス

マークアップ

<!-- Apply any bg-* class to to the info-box to color it -->
      <div class="info-box bg-red">
        <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">Likes</span>
          <span class="info-box-number">41,410</span>
          <!-- The progress section is optional -->
          <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
          </div>
          <span class="progress-description">
            70% Increase in 30 Days
          </span>
        </div><!-- /.info-box-content -->
      </div><!-- /.info-box -->

これらのスタイルを切り替えるために変更する必要があるのは、bg-*クラスの配置を変更することだけです。最初のスタイルでは、bg-*クラスをアイコン自体に適用します。もう一方のスタイルでは、bg-*クラスをinfo-box divに適用します。

ボックス

ボックスコンポーネントは、このテンプレート全体で最も広く使用されているコンポーネントです。チャートの表示からテキストブロックまで、あらゆることに使用できます。以下で説明するさまざまなスタイルがあります。

デフォルトボックスマークアップ

<div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">Default Box Example</h3>
          <div class="box-tools pull-right">
            <!-- Buttons, labels, and many other things can be placed here! -->
            <!-- Here is a label for example -->
            <span class="label label-primary">Label</span>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div><!-- /.box-body -->
        <div class="box-footer">
          The footer of the box
        </div><!-- box-footer -->
      </div><!-- /.box -->

ボックスバリアント

コンテキストクラスを追加することで、ボックスのスタイルを変更できます。

<div class="box box-default">...</div>
      <div class="box box-primary">...</div>
      <div class="box box-info">...</div>
      <div class="box box-warning">...</div>
      <div class="box box-success">...</div>
      <div class="box box-danger">...</div>

ソリッドボックス

ソリッドボックスは、ボックスを表示する別の方法です。ボックスコンポーネントに `box-solid` クラスを追加するだけで作成できます。ソリッドボックスには、コンテキストクラスを使用することもできます。

      <div class="box box-solid box-default">...</div>
      <div class="box box-solid box-primary">...</div>
      <div class="box box-solid box-info">...</div>
      <div class="box box-solid box-warning">...</div>
      <div class="box box-solid box-success">...</div>
      <div class="box box-solid box-danger">...</div>

ボックツール

ボックスには、特定のイベントを展開したり、簡単な情報を提供するためのツールを含めることができます。次の例では、ボックスのヘッダー内で複数のAdminLTEコンポーネントを使用しています。

AdminLTEの `data-widget` 属性は、ボックスを折りたたんだり削除したりする機能を提供します。ボタンは、ボックスヘッダーにある `box-tools` に配置されます。

      <!-- This will cause the box to be removed when clicked -->
      <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
      <!-- This will cause the box to collapse when clicked -->
      <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>

      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Collapsable</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div><!-- /.box-body -->
      </div><!-- /.box -->

      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Removable</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div><!-- /.box-body -->
      </div><!-- /.box -->

      <div class="box box-default collapsed-box">
        <div class="box-header with-border">
          <h3 class="box-title">Expandable</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div><!-- /.box-body -->
      </div><!-- /.box -->

ラベル、バッジ、ページネーション、ツールチップ、入力など、さらに多くのものをボックツールに追加できます。いくつかの例を挙げます。

      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Labels</h3>
          <div class="box-tools pull-right">
            <span class="label label-default">8 New Messages</span>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div><!-- /.box-body -->
      </div><!-- /.box -->

      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Input</h3>
          <div class="box-tools pull-right">
            <div class="has-feedback">
              <input type="text" class="form-control input-sm" placeholder="Search...">
              <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div><!-- /.box-body -->
      </div><!-- /.box -->

      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Tooltips on buttons</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
          </div><!-- /.box-tools -->
        </div><!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div><!-- /.box-body -->
      </div><!-- /.box -->

`app.js` がロードされた後にドキュメントにボックスを挿入した場合、`.activateBox()` を呼び出して、折りたたみ/削除ボタンを明示的にアクティブにする必要があります。

<script>
          $("#box-widget").activateBox();
      </script>

ローディング状態

ローディング状態をシミュレートするには、`.box` の終了タグの前にこのコードを配置するだけです。

<div class="overlay">
        <i class="fa fa-refresh fa-spin"></i>
      </div>
      

ダイレクトチャット

ダイレクトチャットウィジェットは、ボックスコンポーネントを拡張して、美しいチャットインターフェイスを作成します。このウィジェットは、必須のメッセージペインと、オプションの連絡先ペインで構成されています。例

ダイレクトチャット

3

アレクサンダー・ピアース 1月23日午後2時00分

このテンプレートは本当に無料ですか？信じられない！

サラ・ブロック 1月23日午後2時05分

信じた方がいい！

• 
  ドラキュラ伯爵 2015/2/28 元気だった？私は...

送信

ダイレクトチャット

3

アレクサンダー・ピアース 1月23日午後2時00分

このテンプレートは本当に無料ですか？信じられない！

サラ・ブロック 1月23日午後2時05分

信じた方がいい！

• 
  ドラキュラ伯爵 2015/2/28 元気だった？私は...

送信

ダイレクトチャット

3

アレクサンダー・ピアース 1月23日午後2時00分

このテンプレートは本当に無料ですか？信じられない！

サラ・ブロック 1月23日午後2時05分

信じた方がいい！

• 
  ドラキュラ伯爵 2015/2/28 元気だった？私は...

送信

ダイレクトチャット

3

アレクサンダー・ピアース 1月23日午後2時00分

このテンプレートは本当に無料ですか？信じられない！

サラ・ブロック 1月23日午後2時05分

信じた方がいい！

• 
  ドラキュラ伯爵 2015/2/28 元気だった？私は...

送信

ダイレクトチャットのマークアップ

      <!-- Construct the box with style you want. Here we are using box-danger -->
      <!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
      <!-- The contextual class should match the box, so we are using direct-chat-danger -->
      <div class="box box-danger direct-chat direct-chat-danger">
        <div class="box-header with-border">
          <h3 class="box-title">Direct Chat</h3>
          <div class="box-tools pull-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <!-- In box-tools add this button if you intend to use the contacts pane -->
            <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
            <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
          </div>
        </div><!-- /.box-header -->
        <div class="box-body">
          <!-- Conversations are loaded here -->
          <div class="direct-chat-messages">
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-left">Alexander Pierce</span>
                <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                Is this template really for free? That's unbelievable!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->

            <!-- Message to the right -->
            <div class="direct-chat-msg right">
              <div class="direct-chat-info clearfix">
                <span class="direct-chat-name pull-right">Sarah Bullock</span>
                <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
              </div><!-- /.direct-chat-info -->
              <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
          <div class="direct-chat-contacts">
            <ul class="contacts-list">
              <li>
                <a href="#">
                  <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
                  <div class="contacts-list-info">
                    <span class="contacts-list-name">
                      Count Dracula
                      <small class="contacts-list-date pull-right">2/28/2015</small>
                    </span>
                    <span class="contacts-list-msg">How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
        <div class="box-footer">
          <div class="input-group">
            <input type="text" name="message" placeholder="Type Message ..." class="form-control">
            <span class="input-group-btn">
              <button type="button" class="btn btn-danger btn-flat">Send</button>
            </span>
          </div>
        </div><!-- /.box-footer-->
      </div><!--/.direct-chat -->
      

もちろん、ボックスに `solid-box` クラスを追加することで、ソリッドボックスでダイレクトチャットを使用できます。いくつかの例を挙げます。

ソリッドボックスのダイレクトチャット

3

アレクサンダー・ピアース 1月23日午後2時00分

このテンプレートは本当に無料ですか？信じられない！

サラ・ブロック 1月23日午後2時05分

信じた方がいい！

• 
  ドラキュラ伯爵 2015/2/28 元気だった？私は...

送信

ソリッドボックスのダイレクトチャット

3

アレクサンダー・ピアース 1月23日午後2時00分

このテンプレートは本当に無料ですか？信じられない！

サラ・ブロック 1月23日午後2時05分

信じた方がいい！

• 
  ドラキュラ伯爵 2015/2/28 元気だった？私は...

送信

プラグイン

AdminLTEは、以下のプラグインを使用しています。ドキュメント、アップデート、またはライセンス情報については、提供されているリンクにアクセスしてください。

ブラウザサポート

AdminLTEは、以下のブラウザをサポートしています。

• IE9+
• Firefox (最新)
• Safari (最新)
• Chrome (最新)
• Opera (最新)

注: IE9は、トランジションまたはアニメーションをサポートしていません。テンプレートは正しく機能しますが、IE9ではアニメーション/トランジションは使用されません。

アップグレードガイド

バージョン1.xから最新バージョンにアップグレードするには、このガイドに従ってください。

新しいファイル

AdminLTEに関連するすべてのCSSおよびJSファイルを更新してください。そうしないと、レイアウトが正しく機能しません。最も重要なファイルは、AdminLTE.css、スキンCSSファイル、およびapp.jsです。

レイアウトの変更

1. `.wrapper` divは、ヘッダーの後ではなく、bodyタグの直後に配置する必要があります。
2. `.header` divを `.main-header` に変更します。<div class="main-header">
3. `.right-side` クラスを `.content-wrapper` に変更します。<div class="content-wrapper">
4. `.left-side` クラスを `.main-sidebar` に変更します。<div class="main-sidebar">
5. ナビゲーションバーで、`.navbar-right` を `.navbar-custom-menu` に変更します。<div class="navbar-custom-menu">

ナビゲーションバーのカスタムドロップダウンメニュー

1. 通知メニューのアイコンには、`bg-*` クラスは必要ありません。`text-aqua` や `text-red` などのコンテキストテキストカラークラスに置き換える必要があります。

ログイン、登録、ロックスクリーンページ

これらのページのHTMLマークアップとスタイルには大きな変更があります。最適な方法は、ページのコードをコピーしてカスタマイズすることです。

これで準備完了です！

メールボックス

メールボックスは、3つの異なるビューを含むようにアップグレードされました。ビューは、受信トレイ、メールの閲覧、および新規メールの作成です。これらのビューを使用するには、`pages/mailbox` フォルダーにある提供されたHTMLファイルを使用する必要があります。

注: 古いメールボックスレイアウトは、新しいレイアウトを優先して非推奨となり、次回のリリースで削除されます。

実装

AdminLTEの多くのユーザーのおかげで、バックエンドフレームワークとの簡単な統合のために、テンプレートの複数の実装が存在します。以下にその一部を示します。

• ペルシア語 RTL (作成者: Mohammad Sharifi)
• Yii 2 (作成者: Tobias Munk)
• Laravel (作成者: Arjay Angeles)
• Laravel 5 パッケージ (作成者: Sergi Tur Badenas)
• Laravel-AdminLTE (作成者: Jeroen Noten)
• Symfony (作成者: Marc Bach)
• Rails gem: adminlte2-rails (作成者: Nicolas Besnard) および lte-rails (AdminLTEソースを使用) (作成者: RacketLoggerのCarlos)
• CoPilot (AdminLTE with Vue.js) (作成者: Gil Ferreira)
• pi-hole dashboard (作成者: pi-hole)

注: これらの実装は、Almsaeed Studioではサポートされていません。ただし、AdminLTEをさまざまなフレームワークに統合する方法の良い例を提供しています。AdminLTEの最新リリースについては、リポジトリまたはウェブサイトにアクセスしてください。

FAQ

AdminLTEはWordpressで使用できますか？

AdminLTEは、あらゆる目的に使用できるHTMLテンプレートです。ただし、Wordpressに簡単にインストールできるように作成されていません。そのためには、ある程度の努力とWordpressスクリプトに関する十分な知識が必要です。

YiiやSymfonyなどのPHPフレームワークの統合ガイドはありますか？

簡単に言えば、いいえ。ただし、Web上には、さまざまなフレームワークとの統合方法に関する情報を提供するフォークやチュートリアルがあります。jQuery ajax、AngularJS、またはMVC5 ASP .NETと統合されたAdminLTEのバージョンもあります。

AdminLTEの新しいバージョンに関する通知を受け取るにはどうすればよいですか？

最適なオプションは、Almsaeed Studioの登録フォームを使用して、メーリングリストに登録することです。それが魅力的でない場合は、Githubのリポジトリを監視するか、Almsaeed Studioを時々訪問して、アップデートや発表を確認してください。

ライセンス

AdminLTE

AdminLTEは、MITライセンスに基づいてライセンスされたオープンソースプロジェクトです。これにより、著作権を「ソフトウェアのすべてのコピーまたは実質的な部分」に含める限り、ほぼすべてのことを実行できます。属性は必須ではありません（非常に感謝しますが）。