layui-學習03-頁面元素

佈局：

相關樣式：

包裹層 : layui-container （ 響應式 寬度 ） layui-fluid （ 100% 寬度 ）
行        : layui-row
列        : layui-col-md9* (* = 1 ~ 12) （響應式）
列間距 : layui-col-space* （ 列間距 *px ）
列偏移 : layui-col-md-offset* ( 列偏移 * 表明列數 )

例子：

<div class="layui-container"> // class="layui-fluid "
  常規佈局（以中型屏幕桌面爲例）：
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
      你的內容 9/12
    </div>
    <div class="layui-col-md3">
      你的內容 3/12
    </div>
  </div>

不固定容器寬度。將柵格或其它元素放入一個帶有 class="layui-fluid" 的容器中，那麼寬度將不會固定，而是 100% 適應

理論上，你能夠對柵格進行無窮層次的嵌套

 

顏色：

• 赤色：class="layui-bg-red"
• 橙色：class="layui-bg-orange"
• 墨綠：class="layui-bg-green"
• 藏青：class="layui-bg-cyan"
• 藍色：class="layui-bg-blue"
• 雅黑：class="layui-bg-black"
• 銀灰：class="layui-bg-gray"

 按鈕：

 

名稱	組合
原始	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-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"

 

 例子：

 

按鈕組：

 

<div class="layui-btn-group">
  <button class="layui-btn">增長</button>
  <button class="layui-btn">編輯</button>
  <button class="layui-btn">刪除</button>
</div>
      
<div class="layui-btn-group">
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>
<div class="layui-btn-group">
  <button class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>

　　

表單：

設定 class="layui-form" 來標識一個表單元素塊

依賴加載模塊：form （請注意：若是不加載form模塊，select、checkbox、radio等將沒法顯示，而且沒法使用form相關功能）

相關樣式：

layui-form

layui-form-item

layui-form-label

layui-input-block

layui-input-inline

layui-input

layui-textarea

layui-form-text

 

 輸入框：

<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> //搜索匹配功能
  <option value="">請選擇一個城市</option>
  <option value="010" selected>北京</option> //selected 來設定默認選中項
  <option value="021" disabled>上海</option> //禁用效果
  <option value="0571">杭州</option>
</select>

　　

分組：

<select name="quiz">
  <option value="">請選擇</option>
  <optgroup label="城市記憶">
    <option value="你工做的第一個城市">你工做的第一個城市？</option>
  </optgroup>
  <optgroup label="學生時代">
    <option value="你的工號">你的工號？</option>
    <option value="你最喜歡的老師">你最喜歡的老師？</option>
  </optgroup>
</select>

　　

 複選框:

原始風格:

原始風格：
<input type="checkbox" name="" title="寫做" lay-skin="primary" checked>
<input type="checkbox" name="" title="發呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled> 

屬性title可自定義文本（舒適提示：若是隻想顯示覆選框，能夠不用設置title） 
屬性checked可設定默認選中 
屬性lay-skin可設置複選框的風格 
設置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>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啓|關閉">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

屬性checked可設定默認開 
屬性disabled開啓禁用 
屬性lay-text可自定義開關兩種狀態的文本 
設置value="1"可自定義值，不然選中時返回的就是默認的on

 

單選框：

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

屬性title可自定義文本 
屬性disabled開啓禁用 
設置value="xxx"可自定義值，不然選中時返回的就是默認的on

 

 文本域：

<textarea name="" required lay-verify="required" placeholder="請輸入" class="layui-textarea"></textarea>

 

組裝行內表單:

<div class="layui-form-item">
 
  <div class="layui-inline">
    <label class="layui-form-label">範圍</label>
    <div class="layui-input-inline" style="width: 100px;">
      <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>

　　

 麪包屑：

依賴加載模塊：element

首頁/ 國際新聞/ 亞太地區/ 正文

<span class="layui-breadcrumb">
  <a href="">首頁</a>
  <a href="">國際新聞</a>
  <a href="">亞太地區</a>
  <a><cite>正文</cite></a>
</span>

 

你還能夠經過設置屬性 lay-separator="-" 來自定義分隔符。如： 首頁- 國際新聞- 亞太地區- 正文

<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>