Semantic UI:为攻城师而制作的可复用的开源前端框架

By youbbs at 2015-07-02 15:21:36 • 511次点击

Semantic 是围绕自然交流语言而架构的,这使得开发更加直观(易于理解)。
语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。

Semantic让你可以使用任何HTML标签 来表现UI控件。

SEMANTIC 示例

<main class="ui three column grid">
<aside class="column">1</aside>
<section class="column">2</section>
<section class="column">3</section>
</main>

<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>

<button class="large ui button">
<i class="heart icon"></i>
Like it
</button>

home http://www.semantic-ui.com/ 4
github https://github.com/Semantic-Org/Semantic-UI 1

semantic, ui, 前端, 框架


BOOTSTRAP 示例

<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>

<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>

<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-heart"></span>
Like
</button>

youbbs at 2015-07-02 15:22:55
1
登录 后发表评论