網頁學習|AdminLTE第一天

接觸到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">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="label label-primary">Label</span>
    </div>
    <!-- /.box-tools -->
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div>
  <!-- /.box-body -->
  <div class="box-footer">
    The footer of the box
  </div>
  <!-- box-footer -->
</div>
<!-- /.box -->

5.信息框

6.直接聊天



所有的上述都可以在

https://adminlte.io/docs/2.4/direct-chat 


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