當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

semantic ui要装什么才能使用

發布時間：2023/12/9 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 semantic ui要装什么才能使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作者：呆呆笨笨
鏈接：https://www.zhihu.com/question/32233356/answer/196799506
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

本答案將以兩種方式講解如何從零開始使用 Semantic-UI，其中第一種方式僅要求讀者理解最基本的 HTML 語法。

方式一：不用 npm

對于初學者來說，node, npm, gulp 等工具會造成不少麻煩，即陷入所謂的“依賴地獄”(dependency hell)。如果你不想用這些工具，可以簡單地將 Semantic-UI 預編譯好的 CSS 和 JavaScript 文件加入到 HTML 的 <head> 元素中，就跟你將 jQuery.min.js 加進去一樣。

1. 創建 index.html

<html><head></head><body><div>Default</div><div><div>Item A</div><div>Item B</div><div>Item C</div></div></body> </html>

現在頁面看起來是這樣的：

&lt;img src="https://pic3.zhimg.com/50/v2-14dc8f536f48ca251a135e764ba7afc6_hd.jpg" data-rawwidth="2870" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_r.jpg"&gt;

2. 下載 CSS 和 JS 文件

Semantic-UI 在 GitHub 上的代碼倉庫里，有準備好的 CSS 和 JS 文件供下載： https://github.com/Semantic-Org/Semantic-UI/tree/master/dist

&lt;img src="https://pic3.zhimg.com/50/v2-b8dbfe23e25777a9f9a8a84196a7531b_hd.jpg" data-rawwidth="1954" data-rawheight="544" class="origin_image zh-lightbox-thumb" width="1954" data-original="https://pic3.zhimg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_r.jpg"&gt;

我們目前需要的是 semantic.min.css 和 semantic.min.js 這兩個文件，將它們加入到 HTML 的頭部：

你會發現中間多了一個 jquery.min.js，沒錯，如果你要使用 Semantic-UI 涉及 JavaScript 的高級功能，比如 tab, progress, sticky, API 等，就必須加上 jQuery 庫，這是 Semantic-UI 所需要的全部依賴。

這里是一個 jQuery 的鏈接： https://code.jquery.com/jquery-3.1.1.min.js

3. 為 div 元素設定 ui 類

<body><div class="ui button">Default</div><div class="ui menu"><div class="item">Item A</div><div class="item">Item B</div><div class="item">Item C</div></div> </body>

然后去瀏覽器刷新一下，可以看到：

&lt;img src="https://pic4.zhimg.com/50/v2-246a6f0c1b6db999da0c2d21b913cf2e_hd.jpg" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic4.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_r.jpg"&gt;

聰明的你會發現，”ui button” 就代表一個按鈕，而“ui menu” 是一個菜單，以此類推，”ui label” 是標簽，”ui input” 是輸入框，等等。所以使用 Semantic-UI 時，最重要的魔法關鍵詞就是 “ui”。

現在的目錄結構(文件夾)也十分直觀，易于理解：

&lt;img src="https://pic3.zhimg.com/50/v2-9aafa6b8d62d040afd9e6037236aa083_hd.jpg" data-rawwidth="2864" data-rawheight="258" class="origin_image zh-lightbox-thumb" width="2864" data-original="https://pic3.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_r.jpg"&gt;

這一個例子展示了如何從零開始使用 Semantic-UI，包括目錄結構，HTML 的結構。除了按鈕，菜單，Semantic-UI 目前支持 50 多種網站中常見的 UI 組件，詳細文檔請打開官網查閱：https://semantic-ui.com

錄制了一個簡單的視頻，暫時放在 YouTube 上 (英文)，感興趣的話請點擊：

https://www.youtube.com/watch?v=JyBKcfLUabc

方式二：用 npm

如果你已經有一些前端開發的經驗，至少對 npm 感到不陌生，并聽說過 gulp，那么在你的項目中使用 Semantic-UI 將變得更加便捷。

為了簡單舉例，仍舊只使用一個基本的 index.html：

&lt;img src="https://pic1.zhimg.com/50/v2-81854e211271d58eec43ab31f9ca5a77_hd.jpg" data-rawwidth="2862" data-rawheight="268" class="origin_image zh-lightbox-thumb" width="2862" data-original="https://pic1.zhimg.com/v2-81854e211271d58eec43ab31f9ca5a77_r.jpg"&gt;

如果你沒有安裝過 gulp，那請用這條命令安裝它：

npm install -g gulp

1. Npm 項目初始化

npm init

這一步非常重要，新手通常會漏掉，造成后面很多文件路徑方面的麻煩。輸入該命令后，它會提示你輸入項目名稱等信息，直接點確定，使用默認值即可。結束之后會在當前目錄創建一個 package.json 的文件。

&lt;img src="https://pic2.zhimg.com/50/v2-c7cb39329ca88b1ba20d09762be67910_hd.jpg" data-rawwidth="2864" data-rawheight="242" class="origin_image zh-lightbox-thumb" width="2864" data-original="https://pic2.zhimg.com/v2-c7cb39329ca88b1ba20d09762be67910_r.jpg"&gt;

2. 安裝 Semantic-UI

npm install —-save semantic-ui

根據網速情況，可能會花幾分鐘到十幾分鐘不等。安裝完成后，當前目錄會多出 3 個條目：

&lt;img src="https://pic4.zhimg.com/50/v2-fdbd914e716ecd4c1b64b137268ffa55_hd.jpg" data-rawwidth="2862" data-rawheight="320" class="origin_image zh-lightbox-thumb" width="2862" data-original="https://pic4.zhimg.com/v2-fdbd914e716ecd4c1b64b137268ffa55_r.jpg"&gt;

你可以查看一下 semantic/ 目錄的詳細情況：

&lt;img src="https://pic4.zhimg.com/50/v2-a7b9eb6a498804f492d1dfcac5230de3_hd.jpg" data-rawwidth="2858" data-rawheight="1692" class="origin_image zh-lightbox-thumb" width="2858" data-original="https://pic4.zhimg.com/v2-a7b9eb6a498804f492d1dfcac5230de3_r.jpg"&gt;

3. 編譯 Semantic-UI 的 CSS 和 JS 文件

cd semantic gulp build

如果你安裝的 gulp 沒有任何問題，在一臺配置不錯的電腦上，這一步會花費大約 20 秒的時間，有時會稍長一些。

這樣一切就準備就緒了：

&lt;img src="https://pic3.zhimg.com/50/v2-108d6913c825f64a0ebfd794e5f5e0e7_hd.jpg" data-rawwidth="2844" data-rawheight="508" class="origin_image zh-lightbox-thumb" width="2844" data-original="https://pic3.zhimg.com/v2-108d6913c825f64a0ebfd794e5f5e0e7_r.jpg"&gt;

4. 將編譯好的 CSS 和 JS 加到 HTML 頭部

與第一個例子相比，只是修改了 semantic.min.css 和 semantic.min.js 的文件路徑。這里是為了說明方便，如果是實際使用，<script> 標簽最好放到 <body> 標簽的末尾，你肯定知道這一點了。

簡單的頁面就寫好了，在瀏覽器里可以打開查看。你可以自己在 “ui” 后加一些詞語，label, input 等看看會有什么效果。

這個例子的視頻長一些，是 7 分鐘，中間有一些實際安裝的步驟，暫時放在 YouTube 上 (英文)，感興趣請點擊： https://www.youtube.com/watch?v=F_iTE_j7erw

----------------------------------------

本文中文版原地址(知乎專欄):

從零開始用 Semantic-UI 搭建網頁 - 知乎專欄

本文英文版地址：

Building websites with Semantic-UI from scratch

更多 Semantic-UI 的模版，主題和教程請訪問：

http://semantic-ui-forest.com

Happy coding!

轉載于:https://www.cnblogs.com/sysnap/p/8966986.html

總結

以上是生活随笔為你收集整理的semantic ui要装什么才能使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

UI
Semantic

上一篇：数字滤波器的matlab 与fpga实现
下一篇： SQA