1. 程式人生 > >layui按鈕總結

layui按鈕總結

                                          layui按鈕總結

按鈕類設定:class="layui-btn" ;不設定其它任何二級類名就是普通按鈕

1   主題類 :layui-btn-primary 原始主題。

原始 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"

2   尺寸 layui-btn-lg 大型

尺寸 組合
大型 class="layui-btn layui-btn-lg"
預設 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"

3   圓角  layui-btn-radius

主題 組合
原始 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"

 PS:各種型別可疊加:

<button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">圓角百搭小型按鈕</button>

PS:流體按鈕:

<button class="layui-btn layui-btn-fluid">流體按鈕(最大化適應)</button>

PS:連結按鈕:

<a href="http://www.layui.com" class="layui-btn">一個可跳轉的按鈕</a>

總結只要類設定了layui-btn就是個按鈕

按鈕組:

將按鈕放入一個class="layui-btn-group"元素中,即可形成按鈕組,按鈕本身仍然可以隨意搭配

<div class="layui-btn-group">
  <button class="layui-btn">增加</button>
  <button class="layui-btn">編輯</button>
  <button class="layui-btn">刪除</button>
</div>

圖示 :按鈕裡可設定圖示區分功能

 更多圖示見:https://www.layui.com/doc/element/icon.html

通過對一個內聯元素(一般推薦用 i標籤)設定 class="layui-icon",來定義一個圖示,然後對元素加上圖示對應的 font-class 

<button class="layui-btn">
//兩種方法
  <i class="layui-icon">&#xe6c6;</i> 贊
  <i class="layui-icon" class="layui-icon-praise"></i> 贊 
</button>

 自定義它的顏色或者大小,大小要注意不能大於父元素

<button class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon" style="color: red;font-size: 30px;">&#xe6c6;</i>
</button>

按鈕容器

<div class="layui-btn-container">
  <button class="layui-btn">按鈕一</button> 
  <button class="layui-btn">按鈕二</button> 
  <button class="layui-btn">按鈕三</button> 
</div>