管理画面用のBootstrapテンプレート「AdminLTE」を利用する際に知っておきたい基礎項目

![AdminLTE.png](https://qiita-image-store.s3.amazonaws.com/0/160563/6328206e-3f0b-3b5d-b48c-c5a3738f20cd.png)


#ファイルのダウンロード
![download.png](https://qiita-image-store.s3.amazonaws.com/0/160563/a50273fd-1a7e-6bc7-148c-2037ef2cb8bc.png)
[ダウンロード画面はこちら](https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html#download)

ダウンロード方法は2つ

* Ready：このテンプレートをベースにそのまま使う人向け(LESSファイルをカスタマイズしない)
* Source Code：テンプレートをカスタマイズする人向け(LESSファイルのコンパイルが必要)


#含まれているファイルの簡易説明

|ファイル名|内容|
|:---|:---|
|bootstrap|bootstrapのファイル|
|dist|AdminLTEを構成するCSS・JS・IMG|
|index.html|[サンプル1](https://almsaeedstudio.com/themes/AdminLTE/index.html)|
|index2.html|[サンプル2](https://almsaeedstudio.com/themes/AdminLTE/index2.html)|
|pages|コンポーネントの利用サンプル|
|plugins|サンプル画面を構築するのに必要なプラグイン|
|stater.html|コンテンツが空のファイル(このファイルをカスタマイズ)|
※その他のファイルはカスタマイズ向け


#レイアウトオプション
bodyにクラスを付与することでレイアウトの変更が可能

```html:qiita.rb
<!-- 記述例：bodyにfixedのクラスを付与 -->
<body class="hold-transition skin-black-light fixed">
```

|クラス名|内容|
|:---|:---|
|fixed|上部メニューを固定|
|layout-boxed|横幅を1250pxにし背景にイメージなどをつける|
|layout-top-nav|コンテンツを横幅いっぱいに広げる|
|sidebar-collapse|デフォルトでサイドバーを表示しない|
|sidebar-mini|サイドバーを閉じた時左にアイコンだけのメニューを表示|

##[layout-boxed](inlte.io/themes/AdminLTE/pages/layout/boxed.html)
![layout_boxed.png](https://qiita-image-store.s3.amazonaws.com/0/160563/ee44c3c1-aec8-c7d6-91f2-06ce0b4c08fb.png)

#[layout-top-nav](https://adminlte.io/themes/AdminLTE/pages/layout/top-nav.html)
![layout_top_nav.png](https://qiita-image-store.s3.amazonaws.com/0/160563/e3ca1cc5-19a5-6b61-09f5-bb91c30393fd.png)

#sidebar-collapse
![layout_sidebar_collapse.png](https://qiita-image-store.s3.amazonaws.com/0/160563/33444179-2b07-a127-8488-3ae1d7a7c6dd.png)

#[sidebar-mini](https://adminlte.io/themes/AdminLTE/pages/layout/collapsed-sidebar.html)
![layput_sidebar_mini.png](https://qiita-image-store.s3.amazonaws.com/0/160563/b6d11952-1562-a15e-3f38-036cf7d97435.png)


#スキン
カラーバリエーションは全部で6種類12パターン
(基本はサイドナビの色が紺。lightを指定すると灰色)
![skins.png](https://qiita-image-store.s3.amazonaws.com/0/160563/0cd7b635-974b-c498-60eb-ec5d143d49d2.png)

bodyタグのクラスを変更することで色味の変更可能

```html:qiita.rb
<!-- 記述例：bodyにfixedのクラスを付与 -->
<body class="hold-transition skin-green">
```

#コンポーネント
コンポーネントは下記からソースをコピーするか、ダッシュボードにあるサンプルのソースコードを利用

* [基本的なコンポーネント](https://adminlte.io/themes/AdminLTE/documentation/index.html#components)
* [デモサイト](https://adminlte.io/themes/AdminLTE/index2.html)

##コンポーネント一例
###タブ

```html:qiita.rb
<div class="nav-tabs-custom">
    <ul class="nav nav-tabs pull-right">
        <li><a href="#tab2" data-toggle="tab">タブ2</a></li>
        <li class="active"><a href="#tab1" data-toggle="tab">タブ1</a></li>
        <li class="pull-left header">タイトル</li>
    </ul>
    <div class="tab-content">
        <div class="chart tab-pane" id="tab2">
            <!-- タブ2の内容 -->
        </div>
        <div class="chart tab-pane active" id="tab1">
            <!-- タブ1の内容 -->
        </div>
    </div>
</div>
```

###ソーシャルウィジェット
```html:qiita.rb
<div class="widget-user-header bg-aqua-active">
        <h3 class="widget-user-username">名前</h3>
        <h5 class="widget-user-desc">役職</h5>
    </div>
    <div class="widget-user-image">
        <img class="img-circle" src="http://placehold.it/128x128" alt="User Avatar">
    </div>
    <div class="box-footer">
        <div class="row">
            <div class="col-sm-4 border-right">
                <div class="description-block">
                    <h5 class="description-header">3200</h5>
                    <span class="description-text">項目1</span>
                </div>
            </div>
            <div class="col-sm-4 border-right">
                <div class="description-block">
                    <h5 class="description-header">13,000</h5>
                    <span class="description-text">項目2</span>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="description-block">
                    <h5 class="description-header">35</h5>
                    <span class="description-text">項目3</span>
                </div>
            </div>
        </div>
    </div>
</div>
```

###タイムライン
```html:qiita.rb
<ul class="timeline">
    <li class="time-label">
        <span class="bg-gray">
            2017年4月
        </span>
    </li>
    <li>
        <i class="fa fa-user bg-gray"></i>
        <div class="timeline-item">
            <h3 class="timeline-header">タイトル</h3>
            <div class="timeline-body">
                詳細内容
            </div>
        </div>
    </li>
    <li class="time-label">
        <span class="bg-gray">
            2017年5月
        </span>
    </li>
    <li>
        <i class="fa fa-user bg-aqua"></i>
        <div class="timeline-item">
            <h3 class="timeline-header">タイトル</h3>
            <div class="timeline-body">
                詳細内容
            </div>
        </div>
    </li>
    <li>
        <i class="fa fa-user bg-green"></i>
        <div class="timeline-item">
            <h3 class="timeline-header">タイトル</h3>
            <div class="timeline-body">
                詳細内容
            </div>
        </div>
    </li>
    <li>
        <i class="fa fa-refresh bg-gray"></i>
    </li>
</ul>
```

#プラグイン
様々なプラグインもデフォルトで設定されている。

* [初期で入っているプラグイン一覧](https://adminlte.io/themes/AdminLTE/documentation/index.html#plugins)

##プラグイン例
* [Char.js](http://qiita.com/AquaMeria/items/5c0c0547039de46b0296)