bootstrap AdminLTE模版的使用


參考:  https://adminlte.io/themes/AdminLTE/documentation/index.html

     https://blog.csdn.net/gebitan505/article/details/78680019

 

1.adminLTE提供了基礎模板頁面starter.html,再此基礎上做開發會快速很多

 

2. 想開始使用adminLTE樣式,只需要在項目演示中按F12打開調試窗口,使用箭頭選中控件,復制粘貼即可(F12調是界面,鼠標選中控件,右鍵 Inspest Element)

 

 

在adminLTE給的index2.php代碼中,有幾點需要注意:

一、body樣式:

 1、類hold-transition是對IE的transition做了一些修復,在body引用即可,沒什么深層含義

 2、皮膚的樣式  

 側邊欄默認是暗色。

 skin-blue中的 blue 藍 修改的是標題的顏色,

 只有指定第二個顏色的時候才會改變側邊欄顏色,

如skin-blue-light中第二個顏色表示側邊欄為亮色。

adminLTE提供的默認皮膚顏色有:

藍 skin-blue skin-blue-light 

黃 skin-yellow skin-yellow-light

綠 skin-green skin-green-light

紫 skin-purple skin-purple-light

紅skin-red  skin-red-light

字體黑,皮膚白  skin-black skin-black-light

3、布局

 默認側邊欄隱藏,標題不移動

 <body class="hold-transition skin-blue">

Fixed 只是為了固定導航欄

layout-boxed    只是將頁面包含在一個固定盒子中,max-width最大寬度: 1250px;

當fixed布局和layout-boxed布局一起使用時,layout-boxed樣式不會生效,只有fixed布局會生效

sidebar-collapse  讓側邊欄默認是隱藏狀態

layout-top-nav   將導航欄設置為單純的導航菜單,不使用側邊欄

 

sidebar-mini 讓側邊欄和左側導航一起折疊,並且最小化是小圖標。

sidebar-mini一般和Fixed layout-boxed sidebar-collapse 一起配合使用,因為layout-top-nav布局的目的就是不要側邊欄

 <body class="hold-transition skin-blue sidebar-mini">

 

 二、body構造

 <div class="wrapper">

    <!-- 頂部導航欄 -->

    <header class="main-header">

 

    </header>

 

    <!-- 左側菜單欄 -->

    <aside class="main-sidebar">

 

    </aside>

 

    <!-- 中間內容 -->

    <div class="content-wrapper">

 

    </div>

 

    <!-- 底部標注 -->

    <footer class="main-footer">

 

    </footer>

 

    <!-- 右側菜單欄 -->

    <aside class="control-sidebar control-sidebar-dark">

    </aside>

    <!-- 右側菜單欄的樣式,底部距離為0等 -->

    <div class="control-sidebar-bg"></div>

 

</div>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM