LayUI輕量級前端開發框架實戰講解

LayUI前端框架開發視頻講解（欣茂Java學院）

 在html中都使用過這樣的場景。使用input或者button定義按鈕。這些都是
原生的樣式，定義出來都不是那麼好看。 
 範例：使用html定義按鈕 
<button type="button">html按鈕</button> <br> <input type="button" value="input按鈕"> 
 
 範例：使用layui定義樣式改變按鈕效果 
<button class="layui-btn">按鈕</button> 
 
 範例：在layui中對於按鈕也分爲多個顏色 
  <button class="layui-btn">默認按鈕</button>   <button class="layui-btn layui-btn-primary">原始按鈕</button>   <button class="layui-btn layui-btn-normal">百搭按鈕</button>   <button class="layui-btn layui-btn-warm">暖色按鈕</button>   <button class="layui-btn layui-btn-danger">警告按鈕</button>   <button class="layui-btn layui-btn-disabled">禁用按鈕</button> 
 
 範例：定義按鈕大小 
<button class="layui-btn layui-btn-lg">最大</button>   <button class="layui-btn layui-btn-md">默認</button>   <button class="layui-btn layui-btn-sm">較小</button>   <button class="layui-btn layui-btn-xs">最小</button> 
 
 範例：流體按鈕 
<button type="button" class="layui-btn layui-btnfluid">這是一個流體按鈕</button> <button type="button" class="layui-btn layui-btn-fluid layui-btnsm">這是一個流體按鈕</button> 
```![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200423125938821.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lsY3Rv,size_16,color_FFFFFF,t_70#pic_center)```javascript
<div class="layui-progress">     <div class="layui-progress-bar" laypercent="50%"></div>    </div> 
 
 範例：顯示進度條文本比例 
<div class="layui-progress" lay-showPercent="true">     <div class="layui-progress-bar" laypercent="50%"></div>    </div> 
 範例：在進度條中間顯示文本 
<div class="layui-progress" lay-showPercent="yes">     <div class="layui-progress-bar" laypercent="50%"></div>    </div> 
範例：進度條設置顏色 
<div class="layui-progress layui-progress-big" lay-showPercent="yes">     <div class="layui-progress-bar layui-bg-blue" laypercent="50%"></div>    </div>