Semantic UI 之 按钮 button
生活随笔
收集整理的這篇文章主要介紹了
Semantic UI 之 按钮 button
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
第一步：創(chuàng)建項目
添加JQuery和Semantic UI包、創(chuàng)建button.html頁面：
第二步：button.html頁面
在button.html頁面中引入樣式文件和JS文件
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>按鈕</title><link rel="stylesheet" href="semantic-ui/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic.min.js"></script></head><body></body> </html>接下來在body中按下面所示添加代碼并在網(wǎng)頁中查看效果：
按鈕的樣式
<button class="ui button">標準</button> <button class="ui compact button">緊湊</button> <button class="ui basic button">基礎(chǔ)</button> <button class="ui primary button">主要</button> <button class="ui secondary button">次要</button> <button class="ui positive button">積極</button> <button class="ui negative">消極</button><button class="ui active button">激活</button> <button class="ui disabled button">禁用</button> <br> <button class="ui facebook button"><i class="facebook icon"></i>Facebook </button> <button class="ui twitter button"><i class="twitter icon"></i>Twitter </button> <button class="ui linkedin button"><i class="linkedin icon"></i>LinkedIn </button> <button class="ui instagram button"><i class="instagram icon"></i>Instagram </button> <button class="ui youtube button"><i class="youtube icon"></i>YouTube </button> <button class="ui google button"><i class="google icon"></i>Google </button> <button class="ui google plus button"><i class="google plus icon"></i>Google Plus </button> <!--圓形按鈕--> <button class="ui circular icon button"><i class="setting icon"></i> </button> <button class="ui circular icon teal button"><i class="setting icon"></i> </button> <br> <button class="ui right floated button">右浮</button> <button class="ui left floated button">左浮</button> <br> <button class="ui fluid button">滿行</button>效果：
按鈕的大小
<button class="ui mini button">最小</button> <button class="ui tiny button">微小</button> <button class="ui small button">很小</button> <button class="ui medium button">中等</button> <button class="ui large button">稍大</button> <button class="ui big button">很大</button> <button class="ui huge button">巨大</button> <button class="ui massive button">最大</button>效果：
按鈕的顏色
<button class="ui red button">紅色</button> <button class="ui orange button">橘色</button> <button class="ui yellow button">黃色</button> <button class="ui olive button">橄欖綠</button> <button class="ui green button">綠色</button> <button class="ui teal button">水鴨藍</button> <button class="ui blue button">藍色</button> <button class="ui violet button">紫羅蘭</button> <button class="ui purple button">紫色</button> <button class="ui pink button">粉色</button> <button class="ui brown button">棕色</button> <button class="ui grey button">灰色</button> <button class="ui black button">黑色</button>效果
按鈕的動畫
<!--水平動畫--><div class="ui horizontal animated button"><div class="visible content">顯示</div><div class="hidden content">隱藏<i class="right arrow icon"></i></div></div><!--垂直式動畫--><div class="ui vertical animated button"><div class="visible content">顯示</div><div class="hidden content">隱藏<i class="up arrow icon"></i></div></div><!--漸近式動畫--><div class="ui animated fade button"><div class="visible content">顯示</div><div class="hidden content">隱藏<i class="up arrow icon"></i></div></div><!--加載動畫--><button class="ui inverted red huge loading button">加載中</button>效果：
按鈕的組合
<H2>按鈕的組合:attached緊緊依附在一起</H2> <!--按鈕附著在內(nèi)容上下方--> <div class="ui top attached button"></div> <div class="ui attacted segment">梁云亮好</div> <div class="ui bottom attached button"></div> <!--按鈕左右依附在一起：若沒有attached會分開--> <div class="ui left attached button">左邊</div> <div class="ui right attached button">右邊</div> <br> <div class="ui vertical buttons"><button class="ui button">修改</button><button class="ui button">刪除</button><button class="ui button">增加</button> </div> <br> <div class="ui horizontal buttons"><button class="ui red basic button">修改</button><button class="ui pink button">刪除</button><button class="ui teal inverted button">增加</button> </div> <br> <div class="ui horizontal buttons"><button class="ui red button">修改</button><div class="or"></div><button class="ui teal button">增加</button> </div> <br> <div class="ui buttons"><button class="ui button"><i class="play icon"></i></button><button class="ui button"><i class="pause icon"></i></button><button class="ui button"><i class="shuffle icon"></i></button> </div>效果：
總結(jié)
以上是生活随笔為你收集整理的Semantic UI 之 按钮 button的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gpgpu_CPU与GPGPU
- 下一篇： OpenCore引导配置说明第三版