LayUI 前端框架基礎知識

2021-09-11 04:36:46 字數 1397 閱讀 9941

layui.js

布局

layui-col-md-offset* 定義列偏移,只會在桌面螢幕下有效,當低於桌面螢幕的臨界值時,就會堆疊

layui-col-space* 定義列間距

柵格巢狀

後台布局

基本元件

尺寸 類可以一起用

自適應

圓角

大型百搭圓角按鈕 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"

按鈕組增加

編輯刪除

按鈕組

表單

下拉框請選擇乙個城市

北京上海

杭州屬性checked可設定預設選中

屬性lay-skin可設定核取方塊的風格 primary

設定value="1"可自定義值,否則選中時返回的就是預設的on

開關單選框

文字域組裝行內表單範圍-

密碼lay-ignore忽略美化

導航

水平導航

導航其它元素

主題

垂直主題

垂直、側邊導航

麵包屑導航

首頁國際新聞

亞太地區

正文選項卡

內容1內容2

內容3內容4

內容5tab選項卡提供多套風格,支援響應式,支援刪除選項卡等功能

layui-tab 表明選項卡 div

layui-tab-title 表明乙個選項 ul

layui-this 表示當前頁面

layui-tab-content (div) 中的各個layui-tab-item (div) 對應ul中各選項卡的內容

如果存在 layui-tab-item 的內容區域,在切換時自動定位到對應內容。如果不存在內容區域,則不會定位到對應內容。你通常需要設定過濾器

主題

id定位

進度條layui-progress-bar 表明進度條

面板

摺疊面板

內容區域

內容區域

內容區域

手風琴,只能開乙個

內容區域

內容區域

內容區域

**

tbody

徽章

橢圓體

可用layui-bg-*** 定義顏色

邊框體

可與其它元素搭配

時間線

輔助元素

欄位集區塊

分割線

內建模組

內容1內容2內容3

layui.use('element', function(){//呼叫element模組

LayUi前端框架

首先宣告一下這是我第一次使用前端框架完成後台的配合工作,這在我工作中也是第一次遇見,因為公司有自己的前端開發工程師,不必要我們自己去實現前端的效果,雖然前端的東西並不是很難,但是重點就是繁瑣,小零碎太多,不想後台一樣,側重於邏輯,但是學習起來還是很方便的,就是中間踩到了不少的坑。題外話 只要努力,你...

Layui 前端框架(1)

首先什麼是js物件導向開發?首先說一下什麼是layui,layui他是乙個非常靈活的前端框架,使用得當的話可以幫助我們後端人員解決不少麻煩,為什麼說他靈活,因為他可以幫助我們在前端實現分頁,日期格式化,動態 的搭建,這是我在實際開發中所遇到的。layui是通過js實現的一系列功能,但是並不完全是js...

前端基礎知識總結

1.將文字顯示在上 1 第一種方式 將作為背景 使用條件,的大小跟div的大小一樣,才能顯示完整,不然只會顯示一部分 style width 1490px height 600px background image url images x.png 2 第二種方式通過絕對定位將文字放到上,好處 可以...