layui框架的響應式佈局
阿新 • • 發佈:2018-12-01
關於layui框架響應式佈局的一些使用方法
寫在前面的
因為公司的需要,這幾天學習了layui框架,稍微有一些心得。介紹就不多說,貼上官網的說明文件,目前是2.0版本,上面有很詳細的介紹。
官網地址:https://www.layui.com/doc/element/layout.html
簡單的佈局
layui的響應式使用十分簡單,雖然官網寫了很多很詳細,但某種意義上增加了新手學習的難度和勸退的可能。但其實總結下來如何使用響應式佈局就幾個步驟:
-
第一,在第一個div設定一個佈局類 ,通常我只使用兩個類,分別是:layui-container和layui-fluid
layui-container//此類能在小螢幕以上的裝置中固定寬度,讓列可控。在PC端會設定一定的寬度且居中 layui-fluid//使用此類不會固定寬度,而是 100%自適應
-
第二,設定行,很簡單,只需要在第二個div選擇使用layui-row這個類就行了。
-
第三,設定列,layui-col(列)這個類需要被使用layui-row這個類的div包裹,這樣才能設定列的等分值。
-
最後,將你要寫的元素放入列(layui-col),就完成了簡單的佈局,這樣的佈局是具有響應式的頁面