AdminLTEの使い方

AdminLTEとは?

Bootstrap3ベースで作られた管理画面のデザインテンプレートです。
公式サイト:https://almsaeedstudio.com/
デモページ:https://almsaeedstudio.com/themes/AdminLTE/index2.html

AdminLTEのインストール

composerを使ってインストールする場合 バージョンなどは下記のページで随時確認してください。

AdminLTEの使い方

参照:【adminLTE】管理画面として使うときのテンプレートひな形としてまとめておく – とりあえずphpとか

ベースファイル

vendor/almasaeed2010/adminlte/pages/examplesディレクトリ内のblank.htmlファイルをベースとして作成します。このblank.htmlの内容をルートディレクトリにコピペしてカスタマイズしていきます。

相対リンクを調整

headエリアbody終了タグ前の相対パスを修正しましょう。
composerで設置した場合だと、vendor/almasaeed2010/adminlte/ほにゃららとなります。

個別パーツの使い方

公式ページのdocument参照をしてください。
AdminLTE 2 | Documentation
サンプルはデモページでほとんどみることができるようになっているので、デモページで確認してください。
デモページ

日本語フォントの変更・修正

googleのWebフォントを使う場合。 htmlファイルのheadエリアに下記コードを追記してください。※headエリアのCSSリンクの最下部 次に、style.cssを作成し、下記のコードを追記してください。

フォントアイコンを最新にする

AdminLTEの初期設定のfontawesomeが古くて使えないアイコンが多いので、cdnを新しいものに変更してください。 初期設定はこうなっています。 これを以下のように変更してください。

ヘッダーを固定する

bodyタグのclass属性にfixedを追加する。