跳到主要內容

發表文章

目前顯示的是 2月, 2015的文章

Semantic UI 佈景主題( Themes )樣式變更的方法

並不是所有 Semantic UI的元件或組計都有 佈景主題 ( Themes ) 可變化,因此如果想要知道是否有可變化的佈景主題 ( Themes ) ,則可以到官方網站去看每個元件的佈景主題 ( Themes ) 支援程度。 我們可以利用 Node 將 Semantic UI的佈景主題重新編譯,  Windows 用戶可以到 這裡下載 Node 。 安裝以後執行  Node.js command prompt 開啟命令列模式。 接著到 Semantic UI 官方網站 下載最新版本的內容 下載以後解縮到硬碟,記住Semantic UI的路徑,等會將會需要用到。 依照Semantic UI 官方教材所說的,還需要安裝 Gulp ,因此在剛剛開啟命令列提示視窗中輸入 npm install -g gulp 安裝Gulp以後,進入Semantic UI的目錄底下,在此例子中,路徑為 D:\Semantic-UI-1.10.2 ,進入該路徑。 進入目錄時,要先確定該目錄是否含有  package.json     如果這時候想更換佈景主題, 就必須先到 src 這個目錄底下找出  theme.config.example 這個檔案,將檔案內容部分變更為你理想中的佈景主題 。 可以看到設定 default 為主要佈景主題方案,如果需要,可以將其中一個項目改為目標佈景主題,例如,將button項目改為  material   /* Global */ @site       : 'default'; @reset      : 'default'; /* Elements */ @button     : 'material '; @divider    : 'default'; @flag       : 'default'; @header     : 'default'; @icon       : 'default'; @image      : 'default&#

Semantic UI 簡介與 Bootstrap 的差異

Semantic UI 是一個語意化的前端UI框架,不同於 Bootstrap 的集合分類描述, Semantic UI  使用英語語意去描述元素展示的 方式,例如: Semantic UI的選單描述為 <nav class="ui menu">     <h3 class="header item">Title</h3>     <a class="active item">Home</a>     <a class="item">Link</a>     <a class="item">Link</a>     <span class="right floated text item">         Signed in as <a href="#">user</a>     </span> </nav> 而Bootstrap則為 <div class="navbar">     <a class="navbar-brand" href="#">Title</a>     <ul class="nav navbar-nav">         <li class="active"><a href="#">Home</a></li>         <li><a href="#">Link</a></li>         <li><a href="#">Link</a></li>         <p class="navbar-text pull-ri