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-right">Signed in as <a href="#" class="navbar-link">User</a></p>
</ul>
</div>
如果以閱讀原始碼的理解程度來看的話,Semantic UI 比較容易理解,但是如果以簡潔程度來看,Bootstrap反而比較簡潔。
所以Semantic UI 的CSS類別內容與命名比較鬆散,如果需要某些效果,則必須使用多組class來達成,也因此可以彈性規劃不同樣式,相反的Bootstrap因為事先將某些CSS類別內容合併,所以可以在下CSS的時候快速的達到目標樣式,這樣的做法卻如果你需要變更某些類別的部分樣式,就需要多費些功夫去調整或新增新的相識類別。
至於使用Semantic UI 還是Bootstrap則看對哪個框架比較熟悉,如果都不熟,那從Semantic UI 開始,也許是個不錯的選擇。
留言
張貼留言