基于layui框架響應(yīng)式布局的一些使用詳解
寫在前面的
因為公司的需要，這幾天學(xué)習(xí)了layui框架，稍微有一些心得。介紹就不多說，貼上官網(wǎng)的說明文檔，目前是2.0版本，上面有很詳細(xì)的介紹。
官網(wǎng)地址：https://www.layui.com/doc/element/layout.html
簡單的布局
layui的響應(yīng)式使用十分簡單，雖然官網(wǎng)寫了很多很詳細(xì)，但某種意義上增加了新手學(xué)習(xí)的難度和勸退的可能。但其實總結(jié)下來如何使用響應(yīng)式布局就幾個步驟：
第一，在第一個div設(shè)置一個布局類 ，通常我只使用兩個類，分別是：layui-container和layui-fluid。
layui-container//此類能在小屏幕以上的設(shè)備中固定寬度，讓列可控。在PC端會設(shè)置一定的寬度且居中 layui-fluid//使用此類不會固定寬度，而是 100%自適應(yīng)
第二，設(shè)置行，很簡單，只需要在第二個div選擇使用layui-row這個類就行了。
第三，設(shè)置列，layui-col（列）這個類需要被使用layui-row這個類的div包裹，這樣才能設(shè)置列的等分值。
最后，將你要寫的元素放入列（layui-col），就完成了簡單的布局，這樣的布局是具有響應(yīng)式的頁面
寫在后面的話
萌新第一次寫博客，如有不對的地方歡迎大家指出，我會之后再寫一些layui的模板使用，謝謝大家的支持！
以上這篇基于layui框架響應(yīng)式布局的一些使用詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap modal 多彈窗之疊加引起的滾動條遮罩陰影問題
這篇文章主要介紹了 Bootstrap modal 多彈窗之疊加引起的滾動條遮罩陰影問題,需要的朋友可以參考下2017-02-02
javascript創(chuàng)建含數(shù)字字母的隨機字符串方法總結(jié)
如果想創(chuàng)建一個含有數(shù)字、字母（大小寫）或者符號的字符串，比如從[a-zA-Z0-9]集合中中創(chuàng)建一個隨機的字符串，長度為5.有沒有什么比較好的代碼呢？本文提供了幾種方法，包括自動改變字符集合。一起來學(xué)習(xí)下。2016-08-08
uniapp和uniCloud開發(fā)中常出現(xiàn)的問題及解決匯總
使用uni 開發(fā)一段時間了,下面這篇文章主要給大家介紹了關(guān)于uniapp和uniCloud開發(fā)中常出現(xiàn)的問題及解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
js下將字符串當(dāng)函數(shù)執(zhí)行的方法
js下將字符串當(dāng)函數(shù)執(zhí)行的方法，需要的朋友可以參考下。2011-07-07
js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
這篇文章主要介紹了js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法,實例分析了oninput與onpropertychange實現(xiàn)下拉框里自動匹配關(guān)鍵字實時監(jiān)聽文本框value值變化的功能,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了js原生瀑布流插件制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
平移和縮放是查看圖像時常用的功能,我們可以放大圖像以查看更多細(xì)節(jié),進行圖像編輯,Dynamsoft Document Viewer是一個用于此目的的SDK,它為文檔圖像提供了一組查看器,在本文中,我們將演示如何使用它來平移和縮放圖像,需要的朋友可以參考下2024-08-08
js自執(zhí)行函數(shù)的幾種不同寫法的比較,需要的朋友可以參考下2012-08-08
uniapp微信小程序底部動態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
tabBar如果應(yīng)用是一個多tab應(yīng)用,可以通過tabBar配置項指定tab欄的表現(xiàn),以及tab切換時顯示的對應(yīng)頁,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序底部動態(tài)tabBar的解決方案,需要的朋友可以參考下2022-04-04