接觸到AdminLTE百度上面的資料很少,也沒有有系統的教學,學起來很是費勁,但是還是要開始
第一天學習的內容是關於AdminLTE的佈局
一、body樣式:
也就是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>
(三)body各部件的使用
1.頂部導航
2.左側導航
3.右控制側欄
4.框
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Default Box Example</h3>
<div class="box-tools pull-right">
<span class="label label-primary">Label</span>
</div>
</div>
<div class="box-body">
The body of the box
</div>
<div class="box-footer">
The footer of the box
</div>
</div>
5.信息框
6.直接聊天
所有的上述都可以在
https://adminlte.io/docs/2.4/direct-chat