Semantic UI

Install Semantic UI

Semantic UI is available in an eponymous package on NPM

npm install semantic-ui --save
cd semantic/
gulp build

Include in Your HTML

Running the gulp build tools will compile CSS and Javascript for use in your project. Just link to these files in your HTML along with the latest jQuery.

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

文章目錄

• 簡介
• • 安裝Semantic UI
  • 使用Semantic UI
• 按鈕
• • 標準按鈕
  • 優先級按鈕
  • 動畫效果按鈕
  • • 水平切換
    • 垂直切換
    • 淡入淡出
  • 空心按鈕
  • 陰性、陽性按鈕
  • 不一樣顏色的按鈕
  • 反轉色按鈕
  • 帶圖標的按鈕
  • 表示狀態的按鈕
  • • 激活狀態
    • 不可點擊的按鈕
    • 加載狀態按鈕
  • 表示狀態切換的按鈕
  • 帶標籤的按鈕
  • • 默認標籤在右側
    • 標籤在左側且帶向右的箭頭（藍色實心）
    • 標籤爲圖標的按鈕
  • 按鈕分組
  • • 普通按鈕分組
    • 垂直顯示的分組
    • 圖標按鈕分組
    • 帶標籤的按鈕分組
    • 混合類型的分組
    • 成員等寬的分組
    • 成員顏色不一樣的分組
    • 表示文件操做的按鈕組
  • 包含條件的按鈕
  • 不一樣大小的按鈕
  • 緊湊的按鈕
  • 圓形按鈕
  • 不一樣位置的按鈕
  • • 左右浮動的按鈕
    • 充滿整個容器的按鈕
    • 固定在頂部和底部的按鈕
    • 固定在頂部和底部的多個按鈕
    • 固定在左右的按鈕

後續此博客再也不更新，歡迎你們搜索關注微信公衆號「測開之美」，測試開發工程師技術修煉小站，持續學習持續進步。

簡介

網頁開發中，CSS控制網頁樣式。做爲測試開發工程師，我我的不太擅長手寫CSS、樣式微調、兼容瀏覽器等工做，因此我選擇使用成熟的前端框架，能夠快速開發出樣式美觀的網站，也解決了大部分瀏覽器兼容問題。前端框架百花齊放，咱們公司的產品使用了Bootstrap，我我的使用的是Semantic UI。

安裝Semantic UI

首先須要安裝node、全局安裝gulp（我使用的是Mac環境）：

• brew install node
• sudo npm install -g gulp

而後進入項目的靜態文件目錄，好比個人是/learnflask/static，執行npm install semantic-ui --save，進行一些Semantic UI的設置後，安裝完成（我設置的Semantic UI目錄是/learnflask/static/semantic)後cd到Semantic UI目錄，執行gulp build命令。

使用Semantic UI

使用Semantic UI，只須要在HTML文件頭部引入以下3個文件便可（使用了又拍雲的jQuery的CDN）：

`<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>` 

*   1
*   2
*   3

按鈕

學習前端框架無非是學習其各個組件，咱們先從按鈕開始。

標準按鈕

`<button type="button" class="ui button">Click</button>` 

*   1

樣式以下：

除了<button>標籤外，<div>標籤也能夠建立按鈕（樣式同上）：

`<div class="ui button" tabindex="0">Click</div>` 

*   1

優先級按鈕

`<button type="button" class="ui primary button">Primary</button>
 <button type="button" class="ui secondary button">Secondary</button>` 

*   1
*   2

樣式以下：

動畫效果按鈕

水平切換

`<div class="ui animated button" tabindex="0">
    <div class="visible content">下一步</div>
    <div class="hidden content">
        <i class="right arrow icon"></i>
    </div>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6

樣式以下：

垂直切換

`<div class="ui vertical animated button" tabindex="0">
    <div class="visible content">購物車</div>
    <div class="hidden content">
        <i class="shop icon"></i>
    </div>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6

樣式以下：

淡入淡出

`<div class="ui fade animated button">
    <div class="visible content">購買</div>
    <div class="hidden content">&yen;12.9/月</div>
</div>` 

*   1
*   2
*   3
*   4

樣式以下：

空心按鈕

`<button class="ui basic button">
    <i class="user icon"></i> 我的信息
</button>` 

*   1
*   2
*   3

樣式以下：

陰性、陽性按鈕

`<button class="ui positive button">Positive</button>
<button class="ui negative button">Negative</button>` 

*   1
*   2

樣式以下：

不一樣顏色的按鈕

`<button class="ui red basic button">Red</button>
 <button class="ui orange basic button">Orange</button>
 <button class="ui yellow basic button">Yellow</button>
 <button class="ui olive basic button">Olive</button>
 <button class="ui green basic button">Green</button>
 <button class="ui teal basic button">Teal</button>
 <button class="ui blue basic button">Blue</button>
 <button class="ui violet basic button">Violet</button>
 <button class="ui purple basic button">Purple</button>
 <button class="ui pink basic button">Pink</button>
 <button class="ui brown basic button">Brown</button>
 <button class="ui grey basic button">Grey</button>
 <button class="ui black basic button">Black</button>
 <button class="ui red button">Red</button>
 <button class="ui orange button">Orange</button>
 <button class="ui yellow button">Yellow</button>
 <button class="ui olive button">Olive</button>
 <button class="ui green button">Green</button>
 <button class="ui teal button">Teal</button>
 <button class="ui blue button">Blue</button>
 <button class="ui violet button">Violet</button>
 <button class="ui purple button">Purple</button>
 <button class="ui pink button">Pink</button>
 <button class="ui brown button">Brown</button>
 <button class="ui grey button">Grey</button>
 <button class="ui black button">Black</button>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25
*   26

樣式以下：

反轉色按鈕

`<div class="ui inverted segment">
     <button class="ui inverted button">Standard</button>
     <button class="ui inverted red button">Red</button>
     <button class="ui inverted orange button">Orange</button>
     <button class="ui inverted yellow button">Yellow</button>
     <button class="ui inverted olive button">Olive</button>
     <button class="ui inverted green button">Green</button>
     <button class="ui inverted teal button">Teal</button>
     <button class="ui inverted blue button">Blue</button>
     <button class="ui inverted violet button">Violet</button>
     <button class="ui inverted purple button">Purple</button>
     <button class="ui inverted pink button">Pink</button>
     <button class="ui inverted brown button">Brown</button>
     <button class="ui inverted grey button">Grey</button>
     <button class="ui inverted black button">Black</button>
 </div>
 <div class="ui inverted segment">
     <button class="ui inverted basic button">Basic</button>
     <button class="ui inverted red basic button">Basic Red</button>
     <button class="ui inverted orange basic button">Basic Orange</button>
     <button class="ui inverted yellow basic button">Basic Yellow</button>
     <button class="ui inverted olive basic button">Basic Olive</button>
     <button class="ui inverted green basic button">Basic Green</button>
     <button class="ui inverted teal basic button">Basic Teal</button>
     <button class="ui inverted blue basic button">Basic Blue</button>
     <button class="ui inverted violet basic button">Basic Violet</button>
     <button class="ui inverted purple basic button">Basic Purple</button>
     <button class="ui inverted pink basic button">Basic Pink</button>
     <button class="ui inverted brown basic button">Basic Brown</button>
     <button class="ui inverted grey basic button">Basic Grey</button>
     <button class="ui inverted black basic button">Basic Black</button>
 </div>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25
*   26
*   27
*   28
*   29
*   30
*   31
*   32

樣式以下：

帶圖標的按鈕

`<div class="ui icon button">
    <i class="cloud icon"></i> 雲存儲
</div>` 

*   1
*   2
*   3

樣式以下：

表示狀態的按鈕

激活狀態

`<button class="ui active button"><i class="user icon"></i>Logged In</button>` 

*   1

樣式以下：

不可點擊的按鈕

`<button class="ui disabled button"><i class="user icon"></i>Disabled</button>` 

*   1

樣式以下：

加載狀態按鈕

`<button class="ui loading button">加載中...</button>` 

*   1

樣式以下：

表示狀態切換的按鈕

樣式以下：

帶標籤的按鈕

默認標籤在右側

`<div class="ui labeled button" tabindex="0">
    <div class="ui button">
        <i class="heart icon"></i>
        Like
    </div>
    <a class="ui basic label">
        2,048
    </a>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9

樣式以下：

標籤在左側且帶向右的箭頭（藍色實心）

`<div class="ui left labeled button" tabindex="0">
    <a class="ui blue right pointing basic label">1,024</a>
    <div class="ui blue icon button">
        <i class="fork icon"></i> Forks
    </div>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6

樣式以下：

標籤爲圖標的按鈕

`<button class="ui labeled icon button">
    <i class="pause icon"></i> Pause
</button>
<button class="ui right labeled icon button">
    <i class="right arrow icon"></i> Next
</button>` 

*   1
*   2
*   3
*   4
*   5
*   6

樣式以下：

按鈕分組

普通按鈕分組

能夠爲組設置統一的顏色：

`<div class="ui blue buttons">
    <button class="ui button active">One</button>
    <button class="ui button">Two</button>
</div>` 

*   1
*   2
*   3
*   4

樣式以下：

還能夠設置其餘屬性，好比按鈕大小、是否空心等等。

垂直顯示的分組

能夠設置整個組爲空心按鈕：

`<div class="ui basic vertical buttons">
    <button class="ui button active">One</button>
    <button class="ui button">Two</button>
</div>` 

*   1
*   2
*   3
*   4

樣式以下：

圖標按鈕分組

`<div class="ui icon buttons">
     <button class="ui button"><i class="align left icon"></i></button>
     <button class="ui button"><i class="align center icon"></i></button>
     <button class="ui button"><i class="align right icon"></i></button>
     <button class="ui button"><i class="align justify icon"></i></button>
 </div>
 <div class="ui icon buttons">
     <button class="ui button"><i class="bold icon"></i></button>
     <button class="ui button"><i class="underline icon"></i></button>
     <button class="ui button"><i class="text width icon"></i></button>
 </div>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11

樣式以下：

帶標籤的按鈕分組

`<div class="ui labeled icon buttons">
     <button class="ui button"><i class="pause icon"></i> 暫停 </button>
     <button class="ui button"><i class="play icon"></i> 播放 </button>
     <button class="ui button"><i class="shuffle icon"></i> 隨機 </button>
 </div>` 

*   1
*   2
*   3
*   4
*   5

樣式以下：

混合類型的分組

`<div class="ui buttons">
        <button class="ui labeled icon button"><i class="left chevron icon"></i> 前一首 </button>
        <button class="ui button"><i class="stop icon"></i> 中止 </button>
        <button class="ui right labeled icon button"> 後一首 <i class="right chevron icon"></i> </button>
    </div>` 

*   1
*   2
*   3
*   4
*   5

樣式以下：

成員等寬的分組

在分組的設置中指明包含幾個成員，則這幾個成員平分所能佔據的寬度：

`<div class="five ui buttons">
    <button class="ui button">One</button>
    <button class="ui button">Two</button>
    <button class="ui button">Three</button>
    <button class="ui button">Four</button>
    <button class="ui button">Five</button>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7

樣式以下：

成員顏色不一樣的分組

`<div class="ui buttons">
    <button class="ui red basic button">One</button>
    <button class="ui blue basic button">Two</button>
    <button class="ui green basic button">Three</button>
</div>` 

*   1
*   2
*   3
*   4
*   5

樣式以下：

表示文件操做的按鈕組

`<div class="ui small basic icon buttons">
    <button class="ui button"><i class="file icon"></i></button>
    <button class="ui button"><i class="save icon"></i></button>
    <button class="ui button"><i class="upload icon"></i></button>
    <button class="ui button"><i class="download icon"></i></button>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6

樣式以下：

包含條件的按鈕

若是是中文，須要配合Semantic UI的data-text屬性爲中間的or添加本地文本：

`<div class="ui buttons">
    <button class="ui button">Register</button>
    <div class="or"></div>
    <button class="ui positive button">Login</button>
</div>
<div class="ui buttons">
    <button class="ui button">註冊</button>
    <div class="or" data-text="或"></div>
    <button class="ui positive button">登陸</button>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10

樣式以下：

不一樣大小的按鈕

`<button class="mini ui button">Mini </button>
<button class="tiny ui button">Tiny </button>
<button class="small ui button">Small </button>
<button class="medium ui button">Medium </button>
<button class="large ui button">Large </button>
<button class="big ui button">Big </button>
<button class="huge ui button">Huge </button>
<button class="massive ui button">Massive </button>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8

樣式以下：

緊湊的按鈕

`<button class="compact ui button">普通</button>
    <button class="ui compact icon button">
      <i class="pause icon"></i>
    </button>
    <button class="ui compact labeled icon button"><i class="pause icon"></i> 暫停</button>` 

*   1
*   2
*   3
*   4
*   5

樣式以下：

圓形按鈕

`<button class="ui circular icon button">
    <i class="settings icon"></i>
</button>` 

*   1
*   2
*   3

樣式以下：

不一樣位置的按鈕

左右浮動的按鈕

`<button class="ui right floated button">右浮動</button>
<button class="ui left floated button">左浮動</button>` 

*   1
*   2

樣式以下：

充滿整個容器的按鈕

`<button class="fluid ui button">Fluid</button>` 

*   1

樣式以下：

固定在頂部和底部的按鈕

`<div class="ui top attached button" tabindex="0">頂部按鈕</div>
<div class="ui attached segment">
    <p>這是一個段落。</p>
</div>
<div class="ui bottom attached button" tabindex="0">底部按鈕</div>` 

*   1
*   2
*   3
*   4
*   5

樣式以下：

固定在頂部和底部的多個按鈕

`<div class="ui two top attached buttons">
    <div class="ui button">左上角</div>
    <div class="ui button">右上角</div>
</div>
<div class="ui attached segment">
    <p>這是一個段落。</p>
</div>
<div class="ui two bottom attached buttons">
    <div class="ui button">左下角</div>
    <div class="ui button">右下角</div>
</div>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11

樣式以下：

固定在左右的按鈕

`<button class="ui left attached button"> 左</button>
<button class="ui right attached button"> 右</button>` 

*   1
*   2

樣式以下：