layui - 页面元素
生活随笔
收集整理的這篇文章主要介紹了
layui - 页面元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考：https://www.layui.com/doc/base/element.html? ?
內容包括：css (即已定義樣式的class)、HTML (即一些layui自定義的屬性)
細分為：布局、顏色、圖標、動畫、按鈕、表單、導航、選項卡、進度條、面板、表格、徽章、時間線、輔助
概括：
css規范：
? ? ? css內置公共類(已定義內置樣式的類名class)：(部分常用)
? ?? ? ?布局 / 容器：
? ? ? ? ? ? layui-main? ? ?用于設置一個寬度為 1140px 的水平居中塊（無響應式）
? ? ? ? ? ? layui-inline?? ?用于將標簽設為內聯塊狀元素
? ? ? ? ? ? layui-box? ? ? 用于排除一些UI框架（如Bootstrap）強制將全部元素設為box-sizing: border-box所引發的尺寸偏差
? ? ? ? ? ? layui-clear?? ?用于消除浮動（一般不怎么常用，因為layui幾乎沒用到浮動）
? ? ? ? ? ? layui-btn-container?? ?用于定義按鈕的父容器。（layui 2.2.5 新增）
? ? ? ? ? ? layui-btn-fluid?? ?用于定義流體按鈕。即寬度最大化適應。（layui 2.2.5 新增）
? ? ?? ?輔助：
? ? ? ? ? ? layui-icon?? 用于圖標
? ? ? ? ? ? layui-elip?? ?用于單行文本溢出省略
? ? ? ? ? ? layui-unselect?? ?用于屏蔽選中
? ? ? ? ? ? layui-disabled?? ?用于設置元素不可點擊狀態
? ? ? ? ? ? layui-circle?? ?用于設置元素為圓形
? ? ? ? ? ? layui-show?? ?用于顯示塊狀元素
? ? ? ? ? ? layui-hide? ? ? 用于隱藏元素
? ? ? ? 文本：
? ? ? ? ? ? layui-text?? ?定義一段文本區域（如文章），該區域內的特殊標簽（如a、li、em等）將會進行相應處理
? ? ? ? ? ? layui-word-aux?? ?灰色標注性文字，左右會有間隔
? ? ? ? 背景色（layui內置7種背景色）：
? ? ? ? ? ? layui-bg-red? ? ? ? ?用于設置元素赤色背景
? ? ? ? ? ? layui-bg-orange?? 用于設置元素橙色背景
? ? ? ? ? ? layui-bg-green? ? ?用于設置元素墨綠色背景（主色調）
? ? ? ? ? ? layui-bg-cyan? ? ? ?用于設置元素藏青色背景
? ? ? ? ? ? layui-bg-blue? ? ? ?用于設置元素藍色背景
? ? ? ? ? ? layui-bg-black? ? ?用于設置元素經典黑色背景
? ? ? ? ? ? layui-bg-gray? ? ? 用于設置元素經典灰色背景
? ? ? 若需要自行定義一些樣式請參考內置css class命名使class命名遵循一定規范，
? ? ? 命名格式一般分為兩種：一：layui-模塊名-狀態或類型，二：layui-狀態或類型，但請勿占用Layui已經命名好的類。
HTML規范：
? ? ? 結構：使用layui元素模塊時請嚴格遵守其相應HTML結構，否則可能導致其功能失效（標簽、類名）
? ? ? 公共屬性：以 lay- 為前綴的自定義屬性，各模塊需要用到的詳見官網介紹，常用(普遍運用于所有元素上的)屬性如：
? ? ? ? ? ? lay-skin=" "? ? ? 定義相同元素的不同風格，如checkbox的開關風格
? ? ? ? ? ? lay-filter=" "? ? ? 事件過濾器，一般用于監聽特定的自定義事件，可視為一個ID選擇器
? ? ? ? ? ? lay-submit? ? ? 定義一個觸發表單提交的button，不用填寫值
?
layui頁面元素包括：
<!-- --> 布局? ?柵格 / 后臺布局柵格：布局規則：lay-row 定義行，如 <div class="layui-row"></div>layui-col-md* 定義一組列(column) 放在行(row)中，md表示不同屏幕下的標記(見響應式規則)，*可選值1-12，*總和 =12剛好排滿列 >12則另起一行列可以同時出現最多4種不同組合，即 xs、sm、md、lg，分別詳見響應式規則layui-col-space5、layui-col-md-offset3 類似的預設類可定義列的間距和偏移在列(column)中可放入任意內容布局容器：class="layui-container"? ? ? 將柵格放入容器 在小屏幕以上的設備中固定寬度讓列可控? ?<div class="layui-container"><div class="layui-row">...</div></div>class="layui-fluid"? ? ? 將柵格或其他元素放入容器 不固定寬度而是100%適應? ?<div class="layui-fluid">...</div>響應式規則：（ * 取值1-12? 即列寬為*列? 每列寬度為容器寬度的1/12? ? ? 總列數均為12）超小屏幕? 手機<768px? ? ?.layui-container的值為auto? ?標記xs? ?列對應類 layui-col-xs*? ?響應式行為 始終按設定的比例水平排列小屏幕? 平板>=768px? ? ?.layui-container的值為750px? ?標記sm? ?列對應類 layui-col-sm*? ?響應式行為 在當前屏幕下水平排列-當屏幕大小低于臨界值則堆疊排列中等屏幕? 桌面>=992px? ? ?.layui-container的值為970px? ?標記md? ?列對應類 layui-col-md*? ?響應式行為 在當前屏幕下水平排列-當屏幕大小低于臨界值則堆疊排列大型屏幕? 桌面>=1200px? ? ?.layui-container的值為1170px? ?標記lg? ?列對應類 layui-col-lg*? ?響應式行為 在當前屏幕下水平排列-當屏幕大小低于臨界值則堆疊排列響應式公共類： * 可選值 xs、sm、md、lglayui-show-*-block? ? ? 定義不同設備下的 display:block;layui-show-*-inline? ? ? 定義不同設備下的 display:inline;layui-show-*-inline-block? ? ? 定義不同設備下的 display:inline-block;layui-hide-*? ? ? 定義不同設備下的隱藏類，即?display:none;列間距：layui-col-space*? ? ? 間距 *px? ?*取值1-30的所有雙數以及 1 5 15 25列偏移：layui-col-md-offset*? ? ? 使列向右偏移*列 (每列寬度1/12容器寬度)嵌套：理論上可以對柵格進行無限嵌套，如在列(layui-col-md)中插入一個行元素(layui-row)<div class="layui-row layui-col-space5"><div class="layui-col-md5"><div class="layui-row"><div class="layui-col-md3">內部列</div></div></div></div>兼容：柵格的響應式能力得益于css3的媒體查詢(Media Queries)，但IE8/9不支持媒體查詢，可以使用以下補丁(來自開源社區,布丁可放在<body>任意位置)使之兼容--<!-- 讓IE8/9支持媒體查詢，從而兼容柵格 --><!--[if lt IE 9]><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]-->后臺布局：layui既可編織出絢麗的前臺頁面，又可滿足繁雜的后臺功能需求（官網提供后臺現場方案 https://www.layui.com/doc/element/layout.html#admin 可供參考） <!-- --> 顏色? ?主題色設計感 / 內置背景色主題色設計感可參考官網提供的一些示例及layuiAdmin。layui還內置7種背景色（見css內置公共類）<!-- --> 圖標? ?字體圖標<i class="layui-icon layui-icon-face-smile" style="font-size:30px;color:#1E9FFF;"></i>類 layui-icon 為必須，layui-icon-face-smile 為笑臉圖標，此處style設置圖標大小和顏色，layui2.3.0起支持font-class的形式定義圖標，這之前只能用unicode來定義圖標：<i class="layui-icon"></i>圖標參考：https://www.layui.com/doc/element/icon.html#table跨域問題：由于瀏覽器存在同源策略，所以如果 layui（里面含圖標字體文件）所在的地址與當前頁面地址不在同一個域下會出現圖標跨域問題。所以要么把 layui 與網站放在同一服務器，要么就對 layui 所在資源服務器的 Response Headers 加上屬性：Access-Control-Allow-Origin: *<!-- --> 動畫? ?內置 CSS3 動畫<div class="layui-anim layui-anim-up"></div>? ? ??其中 layui-anim 是必須的? 后面跟著的即是不同的動畫類<div class="layui-anim layui-anim-up layui-anim-loop"></div>? ? ??循環動畫，追加：layui-anim-loop內置css3動畫：layui-anim-up? ?從最底部往上滑入? ?? layui-anim-upbit? ?微微往上滑入layui-anim-scale? ?平滑放大? ? ? ? ?layui-anim-scaleSpring? ?彈簧式放大layui-anim-fadein? ?漸現? ? ? ? ? layui-anim-fadeout? ?漸隱layui-anim-rotate? ?360度旋轉? ?? ? 追加：layui-anim-loop? ?循環動畫 <!-- --> 按鈕? ?button 組基本用法： class="layui-btn"<button type="button" class="layui-btn">一個標準的按鈕</button><a href="http://www.layui.com" class="layui-btn">一個可跳轉的按鈕</a>主題名稱?? ? ?組合原始 ? ? ?class="layui-btn layui-btn-primary"默認 ? ? ?class="layui-btn"百搭 ? ? ?class="layui-btn layui-btn-normal"暖色 ? ? ?class="layui-btn layui-btn-warm"警告 ? ? ?class="layui-btn layui-btn-danger"禁用 ? ? ?class="layui-btn layui-btn-disabled"尺寸 ? ? ? 組合大型 ? ? ?class="layui-btn layui-btn-lg"默認 ? ? ?class="layui-btn"小型 ? ? ?class="layui-btn layui-btn-sm"迷你 ? ? ?class="layui-btn layui-btn-xs"大型百搭??class="layui-btn layui-btn-lg layui-btn-normal"正常暖色??class="layui-btn layui-btn-warm"小型警告??class="layui-btn layui-btn-sm layui-btn-danger"迷你禁用??class="layui-btn layui-btn-xs layui-btn-disabled"圓角主題?? ? ?組合原始 ? ? ?class="layui-btn layui-btn-radius layui-btn-primary"默認 ? ? ?class="layui-btn layui-btn-radius"百搭 ? ? ?class="layui-btn layui-btn-radius layui-btn-normal"暖色 ? ? ?class="layui-btn layui-btn-radius layui-btn-warm"警告 ? ? ?class="layui-btn layui-btn-radius layui-btn-danger"禁用 ? ? ?class="layui-btn layui-btn-radius layui-btn-disabled"大型百搭??class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"小型警告??class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"迷你禁用??class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"圖標： 如--<button type="button" class="layui-btn"><i class="layui-icon"></i> 添加</button>按鈕組： 將按鈕放入一個class="layui-btn-group"元素中，即可形成按鈕組，按鈕本身仍然可以隨意搭配<div class="layui-btn-group"><button type="button" class="layui-btn">增加</button><button type="button" class="layui-btn">編輯</button><button type="button" class="layui-btn">刪除</button></div>按鈕容器： 如--<div class="layui-btn-container"><button type="button" class="layui-btn">按鈕一</button>?<button type="button" class="layui-btn">按鈕二</button>?<button type="button" class="layui-btn">按鈕三</button>?</div> <!-- --> 表單? ?form 元素集合? ?(此處僅展示元素，更多完整form使用示例詳情見form模塊)基本用法： 設置class layui-form layui-form-item ...<form class="layui-form" action=""></form>依賴加載模塊：form （如果不加載form模塊，select、checkbox、radio等將無法顯示，并且無法使用form相關功能）<script>layui.use('form', function(){var form = layui.form;//各種基于事件的操作});</script>輸入框：<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">required：注冊瀏覽器所規定的必填字段? ? ? lay-verify：注冊form模塊需要驗證的類型? ? ? class="layui-input"：layui.css提供的通用CSS類下拉選擇框：<select name="city" lay-verify="" lay-search>? ? ? <!--?lay-search 開啟搜索匹配功能?--><option value="">請選擇一個城市</option>? ? ? <!-- 空值占位，預留“請選擇”的提示空間，若無此行下面有value的第一行將作默認選中項?--><optgroup label="城市">? ? ? <!--?optgroup 分組 --><option value="010">北京</option><option value="021" disabled>上海(禁用效果)</option>? ? ? <!--?disabled 禁用，select和option標簽都支持?--><option value="0571" selected>杭州</option>? ? ? <!--?selected 默認選中 --></optgroup><optgroup label="xx"><option value="北京">北京</option></optgroup></select>復選框：（設置value="1"可自定義值否則選中時返回的是默認的on）默認風格：（標簽式，外層框--文字+選框）<input type="checkbox" name="" title="寫作" checked>? ? ? <!-- checked 默認選中 --><input type="checkbox" name="" title="發呆">? ? ? <!-- title 自定義文本，若只想顯示復選框可不設置 --><input type="checkbox" name="" title="禁用" disabled>? ? ? <!-- disabled 禁用 -->原始風格：（常見樣式，選框+文字）<input type="checkbox" name="" title="寫作" lay-skin="primary" checked>? ? ? <!-- lay-skin 設置復選框風格 --><input type="checkbox" name="" title="發呆" lay-skin="primary"><input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>開關：（設置value="1"可自定義值否則選中時返回的是默認的on）其實就是checkbox復選框的“變種”，通過設定?lay-skin="switch"?形成了開關風格<input type="checkbox" name="xxx" lay-skin="switch"><input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>? ? ? <!-- checked 默認開狀態?--><input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啟|關閉">? ? ? <!-- lay-text 設置兩種狀態的文本 --><input type="checkbox" name="aaa" lay-skin="switch" disabled>? ? ? <!-- disabled 禁用 -->單選框：<input type="radio" name="sex" value="nan" title="男">? ? ? <!-- title 自定義文本 --><input type="radio" name="sex" value="nv" title="女" checked>? ? ? <!-- checked 默認選中 --><input type="radio" name="sex" value="" title="中性" disabled>? ? ? <!-- disabled 禁用 -->文本域：設置class="layui-textarea"即使用layui提供的通用css類<textarea name="" required lay-verify="required" placeholder="請輸入" class="layui-textarea"></textarea>組裝行內表單：（使表單元素如輸入框顯示在同一行內）<div class="layui-form-item"><div class="layui-inline">? ? ? <!--?class="layui-inline"?定義外層行內，此例 范圍 和 密碼 及其后輸入框均顯示在一行?--><label class="layui-form-label">范圍</label><div class="layui-input-inline" style="width: 100px;">? ? ? <!--?class="layui-input-inline"?定義內層行內，此例2個￥輸入框顯示在一行 --><input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"></div><div class="layui-form-mid">-</div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">密碼</label><div class="layui-input-inline" style="width: 100px;"><input type="password" name="" autocomplete="off" class="layui-input"></div></div></div>忽略美化：<select lay-ignore>? ? ? <!-- lay-ignore 使表單元素保留系統默認風格，但一般不推薦使用，可能會導致ui風格不和諧?--><option>…</option></select>表單方框風格：追加 layui-form-pane 的class可設置表單為方框風格(即使表單元素和其鄰近的label文字被方框劃為一行的樣式)<form class="layui-form layui-form-pane" action=""><!--?內部結構都一樣，值得注意的是 復選框/開關/單選框 這些組合在該風格下需要在其class="layui-form-item"的div額外添加 pane 屬性?--><div class="layui-form-item" pane> <!--表單元素--> </div></form> <!-- --> 導航? ?菜單 / 面包屑基本用法： 設置class layui-nav layui-nav-item ...依賴加載模塊：elementlayui.use('element', function(){ var element = layui.element; /*其他操作略*/ }); });示例：<!-- 水平導航 --><ul class="layui-nav" lay-filter=""> <!-- layui-nav 導航欄，class可追加css背景類讓導航呈現不同的主題色 --><li class="layui-nav-item"><a href="">導航1</a></li><li class="layui-nav-item layui-this"><a href="">導航2</a></li> <!-- layui-this 指向當前頁面分類 --><li class="layui-nav-item"><a href="">導航3</a></li><li class="layui-nav-item"><a href="javascript:;">導航4</a><dl class="layui-nav-child"> <!-- 二級菜單 --><dd><a href="">導航4-1</a></dd><dd><a href="">導航4-2</a></dd><dd><a href="">導航4-3</a></dd></dl></li><li class="layui-nav-item"><a href=""><img src="" class="layui-nav-img">導航5</a></li> <!-- 添加圖片(可做頭像之類的) --><li class="layui-nav-item"><a href="">導航6<span class="layui-badge">9</span></a></li> <!-- 顯示帶數字9的方塊(可做消息提示之類的) --><li class="layui-nav-item"><a href="">導航7<span class="layui-badge-dot"></span></a></li> <!-- 顯示圓點(可做消息提示之類的) --></ul><script>layui.use('element', function(){ // 導航 依賴 element 模塊，否則無法進行功能性操作var element = layui.element;//…});</script>更多: 導航欄class可追加css背景類讓導航呈現不同的主題色，水平導航支持 layui-bg-cyan（藏青）、layui-bg-molv（墨綠）、layui-bg-blue（艷藍），垂直導航支持 layui-bg-cyan（藏青），如--<ul class="layui-nav layui-bg-green" lay-filter=""><!--墨綠背景--></ul>水平、垂直、側邊三個導航的HTML結構是完全一樣的，不同的是 垂直導航需要追加class：layui-nav-tree 側邊導航需要追加class：layui-nav-tree layui-nav-side 如--<ul class="layui-nav layui-nav-tree" lay-filter="test"><!-- 側邊導航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><li class="layui-nav-item layui-nav-itemed"> <!-- layui-nav-itemed 導航選中 --><!-- 二級菜單內容略 --></li></ul>可選屬性--<!-- lay-shrink 設置展開子菜單時是否收縮兄弟節點已展開的子菜單(全部收縮)，默認值為空即不收縮 設置值為all即收縮，layui2.2.6新增 --><ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul><!-- lay-unselect 設置點擊導航菜單時不出現選中效果，layui2.2.0新增 --><li class="layui-nav-item" lay-unselect>刷新</li>面包屑--<!-- 首頁 / 國際新聞 / 亞太地區 / 正文 --><span class="layui-breadcrumb"> <!-- 添加 lay-separator="-" 可自定義分隔符 --><a href="">首頁</a><a href="">國際新聞</a><a href="">亞太地區</a><a><cite>正文</cite></a></span><!-- 也可以做小導航 如 --><!-- 娛樂 | 八卦 | 體育 | 搞笑 | 視頻 | 游戲 | 綜藝 --><span class="layui-breadcrumb" lay-separator="|"><a href="">娛樂</a><a href="">八卦</a><a href="">體育</a><a href="">搞笑</a><a href="">視頻</a><a href="">游戲</a><a href="">綜藝</a></span><!-- --> 選項卡? ?Tabs 切換基本用法： 設置class layui-tab layui-tab-title layui-tab-content ...依賴加載組件：element （必須加載element模塊，相關功能才能正常使用）示例：<div class="layui-tab"> <!-- 追加class： layui-tab-brief 可設定簡潔風格， 追加class： layui-tab-card 可設定卡片風格， 設置屬性 lay-allowClose="true" 可允許Tab選項卡被刪除 --><ul class="layui-tab-title"><li class="layui-this">tab1</li> <!-- layui-this 選中tab --><li>tab2</li><li>tab3</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內容1</div> <!-- kayui-show 展示 --><div class="layui-tab-item">內容2</div><div class="layui-tab-item">內容3</div></div></div><script>layui.use('element', function(){ // 選項卡 依賴 element 模塊，否則無法進行功能性操作var element = layui.element;//…});</script>ID焦點定位： 設置 lay-id="xxx" 可作唯一的匹配索引以用于外部的定位切換，如--<div class="layui-tab" lay-filter="test1"><ul class="layui-tab-title"><li class="layui-this" lay-id="111" >文章列表</li><li lay-id="222">發送信息</li><li lay-id="333">權限分配</li><li lay-id="444">審核</li><li lay-id="555">訂單管理</li></ul><div class="layui-tab-content"> ... </div></div><!-- 動態操作(部分代碼) --><script>layui.use('element', function(){var element = layui.element;//獲取hash來切換選項卡，假設當前地址的hash為lay-id對應的值var layid = location.hash.replace(/^#test1=/, '');element.tabChange('test1', layid); //假設當前地址為：http://a.com#test1=222，那么選項卡會自動切換到“發送消息”這一項//監聽Tab切換，以改變地址hash值element.on('tab(test1)', function(){location.hash = 'test1='+ this.getAttribute('lay-id');});});</script>注：無論是導航、還是Tab，都需依賴 element模塊，大部分行為都是在加載完該模塊后自動完成的，但一些交互操作，如Tab事件監聽等，需按照場景選擇性使用 <!-- --> 進度條? ?progress基本用法： 設置class layui-progress ...依賴加載組件：element示例：<div class="layui-progress"> <!-- 追加class：layui-progress-big 即為大尺寸的進度條風格(增加高度且文字在進度條內顯示而默認在進度條右上顯示)， 設置屬性 lay-showPercent="yes" 可開啟進度比的文本顯示 若不想顯示務必直接刪除此屬性不要設置no或false layui2.1.7新增 --><div class="layui-progress-bar" lay-percent="10%"></div> <!-- lay-percent 進度條的初始百分比，可動態改變進度 --></div><script>layui.use('element', function(){ // 進度條依賴 element 模塊，否則無法進行正常渲染和功能性操作var element = layui.element;});</script><!-- --> 面板? ?折疊 / 手風琴基本用法： 設置class layui-card layui-card-header layui-card-body ...一個獨立的容器，適用于 QA說明、幫助文檔等依賴加載組件：element示例：<!-- 卡片面板 --><div class="layui-card"><div class="layui-card-header">卡片面板</div> <!-- 頭部標題 --><div class="layui-card-body"> <!-- 內容 -->卡片式面板面板通常用于非白色背景色的主體內從而映襯出邊框投影，如果網頁采用的是默認的白色背景則不建議使用卡片面板</div></div><!-- 折疊面板/手風琴 --><div class="layui-collapse"> <!-- 添加屬性 lay-accordion (無值)可開啟手風琴(即在進行折疊操作時始終只會展現當前的面板其他展開的面板自動收起) --><div class="layui-colla-item"><h2 class="layui-colla-title">面板1</h2><div class="layui-colla-content layui-show">內容區域</div> <!-- 設置class為 layui-show 來選擇性初始展開某一個面板，element 模塊會自動呈現狀態圖標 --></div><div class="layui-colla-item"><h2 class="layui-colla-title">面板2</h2><div class="layui-colla-content layui-show">內容區域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">面板3</h2><div class="layui-colla-content layui-show">內容區域</div></div></div><script>layui.use('element', function(){ // 折疊面板 依賴 element 模塊，否則無法進行功能性操作var element = layui.element; //…});</script> <!-- --> 表格? ?靜態 table基本用法： 設置class layui-table示例：<table class="layui-table"> <!-- 添加屬性 lay-even 開啟隔行背景， 添加屬性 lay-skin="值" 設置邊框風格 可取值 line(行邊框風格) row(列邊框風格) nob(無邊框風格) 使用默認風格不設置該屬性即可， 添加屬性 lay-size="值" 設置表格尺寸 可取值 sm(小尺寸) lg(大尺寸) 使用默認尺寸不設置該屬性即可 --><colgroup> <!-- 樣式 --><col width="150"><col width="200"><col></colgroup><thead> <!-- 表頭 --><tr><th>昵稱</th><th>加入時間</th><th>簽名</th></tr> </thead><tbody> <!-- 數據 --><tr> <!-- 行 --><td>行1列1</td> <!-- 列 --><td>2020-12-09</td><td>行1列3</td></tr><tr><td>行2列1</td><td>2020-12-10</td><td>行2列3...</td></tr></tbody></table>注： 此為靜態表格，若需要對表格進行排序、數據交互等一系列功能性操作請參考table模塊 <!-- --> 徽章? ?小圓點 / 小邊框示例： <!-- 可追加class： layui-bg-* 添加背景色(7種內置背景色) --><!-- 小圓點 --><span class="layui-badge-dot"></span><!-- 橢圓體 --><span class="layui-badge">9</span><!-- 邊框體 --><span class="layui-badge-rim">8</span>也可搭配 導航、按鈕、選項卡等使用<!-- --> 時間線? ?timeline基本用法： 設置class layui-timeline layui-timeline-item layui-timeline-axis layui-timeline-content layui-timeline-title ...示例： <!-- 既可作時間線也可作其他類似用處 --><ul class="layui-timeline"> <!-- 時間線(容器) --><li class="layui-timeline-item"> <!-- 時間線(1條) --><i class="layui-icon layui-timeline-axis"></i> <!-- 圓圈圖標(可自定義更改但不推薦自行更改) --><div class="layui-timeline-content layui-text"> <!-- 文字 --><h3 class="layui-timeline-title">8月18日</h3> <!-- 時間/標題 --><p>時間線1<i class="layui-icon layui-icon-face-smile"></i></p> <!-- 任意內容(文字 圖標 ...) --></div></li><li class="layui-timeline-item"> ... </li> <!-- li同結構不同標題和內容 --></ul><!-- --> 輔助? ?引用 / 字段集 / 橫線等示例： <!-- 引用區塊 layui-elem-quote --> <!-- blockquote 標簽本身有塊引用的作用，而layui內置css進行樣式修飾 --><blockquote class="layui-elem-quote">引用區域的文字</blockquote> <!-- 默認樣式風格(綠色左邊框淺灰文字背景) --><blockquote class="layui-elem-quote layui-quote-nm">引用區域的文字</blockquote> <!-- 增加樣式風格(灰色邊框并加粗左邊框白色文字背景) --><!-- 字段集區塊 layui-elem-field --><fieldset class="layui-elem-field"> <!-- 默認風格(全邊框且標題嵌在上邊框) --><legend>標題</legend><div class="layui-field-box"> 任意內容，比如表單... </div></fieldset><fieldset class="layui-elem-field layui-field-title"> <!-- 追加樣式(無邊框而標題帶有容器長度100%的橫線) --><legend>帶標題的橫線</legend><div class="layui-field-box"> 任意內容，比如表單... </div></fieldset><!-- 橫線/分割線 --> <!-- hr 標簽本身就是一條水平線，而layui內置css進行樣式修飾 --><hr> <!-- 默認分割線 --><hr class="layui-bg-red"> <!-- 赤色分割線 --><hr class="layui-bg-orange"> <!-- 橙色分割線 --><hr class="layui-bg-green"> <!-- 墨綠分割線 --><hr class="layui-bg-cyan"> <!-- 青色分割線 --><hr class="layui-bg-blue"> <!-- 藍色分割線 --><hr class="layui-bg-black"> <!-- 黑色分割線 --><hr class="layui-bg-gray"> <!-- 灰色分割線 -->?
總結
以上是生活随笔為你收集整理的layui - 页面元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 30行代码就可以实现看图识字！pytho
- 下一篇： NAT技术总结