基于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è)布局類(lèi) ，通常我只使用兩個(gè)類(lèi)，分別是：layui-container和layui-fluid。
layui-container//此類(lèi)能在小屏幕以上的設(shè)備中固定寬度，讓列可控。在PC端會(huì)設(shè)置一定的寬度且居中 layui-fluid//使用此類(lèi)不會(huì)固定寬度，而是 100%自適應(yīng)
第二，設(shè)置行，很簡(jiǎn)單，只需要在第二個(gè)div選擇使用layui-row這個(gè)類(lèi)就行了。
第三，設(shè)置列，layui-col（列）這個(gè)類(lèi)需要被使用layui-row這個(gè)類(lèi)的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)文章
因?yàn)槭褂?nbsp;Cycle.js 的 Vite + TSX 所以想詳細(xì)的探索 TSX 在 TS 配置中的編譯情況,本文主要講解 tsconfig 和 tsx 編譯與配置,以常見(jiàn)的框架 PReact 的虛擬 DOM + TSX 組合、snabbdom + TSX 組合不同的配置以及編譯輸出2023-09-09
這篇文章主要為大家詳細(xì)介紹了js基于myFocus實(shí)現(xiàn)輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
在Javascript中,每個(gè)對(duì)象都有一個(gè)指向另一個(gè)對(duì)象的鏈接,這個(gè)鏈接被稱(chēng)為原型鏈,原型鏈?zhǔn)荍avascript的一種繼承機(jī)制,它通過(guò)鏈接對(duì)象的原型對(duì)象來(lái)實(shí)現(xiàn)屬性和方法的繼承,本文小編就來(lái)和大家一起深度探索JavaScript中的原型鏈機(jī)制2023-09-09
js實(shí)現(xiàn)網(wǎng)頁(yè)版貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁(yè)版貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了淺談webpack和webpack-cli模塊源碼分析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01![webpack打包html里面img后src為“[object Module]”問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg5.png)
webpack打包html里面img后src為“[object Module]”問(wèn)題
這篇文章主要介紹了webpack打包html里面img后src為“[object Module]”問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)瀑布流布局的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
trackingjs+websocket+百度人臉識(shí)別API實(shí)現(xiàn)人臉簽到
這篇文章主要介為大家詳細(xì)紹了trackingjs+websocket+百度人臉識(shí)別API實(shí)現(xiàn)人臉簽到功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript實(shí)現(xiàn)Promise流程詳解
首先呢，Promise是異步中比較重要的知識(shí)點(diǎn)，學(xué)習(xí)的最好方法就是掌握它的基本原理。所以這一篇主要說(shuō)一下如何用JS來(lái)實(shí)現(xiàn)一個(gè)自己的promise2022-09-09
js 設(shè)置選中行的樣式的實(shí)現(xiàn)代碼
設(shè)置選中的行樣式的js代碼，需要的朋友可以參考下，這里只給出了函數(shù)，具體的自己發(fā)揮。2010-05-05