AdminLte學習記錄一_結構

此文章版本爲:AdminLTE-2.3.11

一.基本介紹

adminLTE是基於bootstrap3的前端框架,並且將bootstrap3進行修改來適應自身的樣式。

adminLTE除了可以使用bootstrap3的大多數樣式之外,自身也提供了一些非常實用的樣式包裝,並且在樣式演示中已經基本羅列出來。

adminLTE的js是基於jquery2。

adminLTE的插件中使用的基本都是bootstrap和jquery的插件。




AdminLte提供了基礎模板starter.html,可以在此基礎上進行快速地開發



二.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>


三.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">

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章