基于layui框架響應式布局的一些使用詳解
更新時間：2019年09月16日 09:54:23 作者：DSRCcsdn
今天小編就為大家分享一篇基于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），就完成了簡單的布局，這樣的布局是具有響應式的頁面
寫在后面的話
萌新第一次寫博客，如有不對的地方歡迎大家指出，我會之后再寫一些layui的模板使用，謝謝大家的支持！
以上這篇基于layui框架響應式布局的一些使用詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Bootstrap modal 多彈窗之疊加引起的滾動條遮罩陰影問題
這篇文章主要介紹了 Bootstrap modal 多彈窗之疊加引起的滾動條遮罩陰影問題,需要的朋友可以參考下2017-02-02
javascript創(chuàng)建含數字字母的隨機字符串方法總結
如果想創(chuàng)建一個含有數字、字母（大小寫）或者符號的字符串，比如從[a-zA-Z0-9]集合中中創(chuàng)建一個隨機的字符串，長度為5.有沒有什么比較好的代碼呢？本文提供了幾種方法，包括自動改變字符集合。一起來學習下。2016-08-08
uniapp和uniCloud開發(fā)中常出現的問題及解決匯總
使用uni 開發(fā)一段時間了,下面這篇文章主要給大家介紹了關于uniapp和uniCloud開發(fā)中常出現的問題及解決的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了微信小程序實現輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
js下將字符串當函數執(zhí)行的方法，需要的朋友可以參考下。2011-07-07
js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法,實例分析了oninput與onpropertychange實現下拉框里自動匹配關鍵字實時監(jiān)聽文本框value值變化的功能,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
平移和縮放是查看圖像時常用的功能,我們可以放大圖像以查看更多細節(jié),進行圖像編輯,Dynamsoft Document Viewer是一個用于此目的的SDK,它為文檔圖像提供了一組查看器,在本文中,我們將演示如何使用它來平移和縮放圖像,需要的朋友可以參考下2024-08-08
js自執(zhí)行函數的幾種不同寫法的比較,需要的朋友可以參考下2012-08-08
uniapp微信小程序底部動態(tài)tabBar的解決方案(自定義tabBar導航)
tabBar如果應用是一個多tab應用,可以通過tabBar配置項指定tab欄的表現,以及tab切換時顯示的對應頁,下面這篇文章主要給大家介紹了關于uniapp微信小程序底部動態(tài)tabBar的解決方案,需要的朋友可以參考下2022-04-04