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