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