一起学Semantic UI

发表于

semantic-ui是前端view层好东西啊, 可能大家都听说过BootStrap, 觉得BootStrap这个框架已经很好用了, 那么或许你用过semantic-ui后就会发现semantic ui也挺好用的, 你会被它简单粗暴的语义化标签所吸引,(这时你会觉的BootStrap的有点繁琐, 有点冗长), github上面的star也很好, 也说明了大家对该框架的认可. 自从知道了semantic-ui导致我写前端页面时, 再也不用BootStrap了.😜

那么开始吧!

补充下: semantic的意思也就是语义化的意思, 即semantic-ui用起来就像语义化一样

创建一个按钮, (反转 蓝色 按钮)

class=”ui inverted blue button”

先看效果图, 这里就不一一贴每个组件了, 就用一张大图!

开始之前, 按照惯例当然要先引进样式表, 可以下载semantic-ui到本地, 也可以使用CDN服务.

<link rel="stylesheet" type="text/css" href="./semantic/dist/semantic.min.css">

一个容器(会将我们的内容居中等调整)

1
<div class="ui container" style="padding:50px 0px"></div>

带下划线的标题

1
<div class="ui dividing header">语义化的semantic-ui</div>

按钮

1
2
3
4
5
<div class="ui primary button">primary</div>
<div class="ui positive button">positive</div>
<div class="ui negative button">negative</div>
<div class="ui massive button">massive</div>
<div class="ui small button">small</div>

有动画的按钮

1
2
3
4
5
6
<div class="ui animated button">
  <div class="visible content">下一步</div>
  <div class="hidden content">
    <i class="right computer icon"></i>
  </div>
</div>

按钮组(播放器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="ui vertical labeled icon buttons">
  <button class="ui button">
    <i class="play icon"></i>
    播放
  </button>
  <button class="ui button">
    <i class="pause icon"></i>
    暂停
  </button>
  <button class="ui button">
    <i class="shuffle icon"></i>
    随机播放
  </button>
</div>

分段segment

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
33
<div class="ui segments">
  <div class="ui segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  <div class="ui segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  <div class="ui segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  <div class="ui segment">
    <p>
      网易新闻
    </p>
    <div class="ui dividing header">ui dividing header</div>
    <div class="ui header">今日头条</div>
    <h1>今日头条</h1>
  </div>
</div>

//当然也可以水平分段

<div class="ui horizontal segments">
	<div class="ui red segment">
		<p>
			网页开发中，CSS控制网页样式。作为测试开发工程师，我个人不太擅长手写CSS、样式微调、兼容浏览器等工作，所以我选择使用成熟的前端框架，可以快速开发出样式美观的网站，也解决了大部分浏览器兼容问题。前端框架百花齐放，我们公司的产品使用了Bootstrap，我个人使用的是Semantic UI.
		</p>
	</div>
	<div class="ui blue segment">
		<p>
			网页开发中，CSS控制网页样式。作为测试开发工程师，我个人不太擅长手写CSS、样式微调、兼容浏览器等工作，所以我选择使用成熟的前端框架，可以快速开发出样式美观的网站，也解决了大部分浏览器兼容问题。前端框架百花齐放，我们公司的产品使用了Bootstrap，我个人使用的是Semantic UI.
		</p>
	</div>
	<div class="ui yellow segment">
		<p>
			网页开发中，CSS控制网页样式。作为测试开发工程师，我个人不太擅长手写CSS、样式微调、兼容浏览器等工作，所以我选择使用成熟的前端框架，可以快速开发出样式美观的网站，也解决了大部分浏览器兼容问题。前端框架百花齐放，我们公司的产品使用了Bootstrap，我个人使用的是Semantic UI.
		</p>
	</div>
</div>

表单示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="ui form">
  <div class="ui field">
    <label for="username">用户名</label>
    <div class="ui left icon input">
      <input type="text" name="uersname" placeholder="用户名" />
      <i class="user icon"></i>
    </div>
  </div>

  <div class="ui field">
    <label for="password">密码</label>
    <div class="ui left icon input">
      <input type="password" name="password" placeholder="密码" />
      <i class="lock icon"></i>
    </div>
  </div>
  <div class="ui buttons">
    <button class="ui blue button" type="submit">登录</button>
    <div class="blue or"></div>
    <button class="ui button" type="reset">重置</button>
  </div>
</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
<table class="ui selectable celled striped table center aligned">
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>成绩</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr> <!--class="ui positive"-->
      <td>11111</td>
      <td>daejong</td>
      <td>100</td>
      <td>
        <div class="ui blue button">修改</div>
      </td>
    </tr>
    <tr> <!--class="ui negative"-->
      <td>22222</td>
      <td>dottie</td>
      <td>23423402</td>
      <td>
        <div class="ui blue button">修改</div>
      </td>
    </tr>
  </tbody>
</table>

搜索框的使用

1
2
3
4
5
6
7
8
9
10
11
12
<div class="ui left icon focus input">
  <input type="text" placeholder="搜索" />
  <i class="search icon"></i>
</div>

<div class="ui divider"></div>

<div class="ui left icon focus action input">
  <i class="search icon"></i>
  <input type="text" placeholder="搜索" />
  <div class="ui blue button">搜索</div>
</div>

网格item的书写(带分割线)

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
33
34
35
36
37
38
<div class="ui divided items">
  <div class="ui item">
    <div class="content">
      <div class="ui header">我爱中国</div>
      <div class="meta">China</div>
      <div class="description">i love you!</div>
    </div>
  </div>
  <div class="ui item">
    <div class="ui content">
      <div class="ui header">网易新闻</div>
      <div class="meta">这是meta</div>
      <div class="description">这是desription</div>
    </div>
  </div>
</div>

放到segment中的item

<div class="ui segment">
  <!-- link就是当鼠标移动到item上的时候, ui header会高亮-->
  <div class="ui link divided items">
    <div class="ui item">
      <div class="ui content">
        <div class="ui header">网易新闻</div>
        <div class="meta">这是meta</div>
        <div class="description">这是desription</div>
      </div>
    </div>
    <div class="ui item">
      <div class="content">
        <div class="ui header">今日头条</div>
        <div class="meta">哈哈哈哈头条</div>
        <div class="description">哈哈哈description</div>
      </div>
    </div>
  </div>
</div>

标签label的使用

1
2
3
4
5
6
<div class="ui container segment">
  <h1 class="ui header">hello</h1>
  <h1 class="ui label">world</h1>
  <h1 class="ui label inverted red">js</h1>
  <h1 class="ui label inverted green">Objective-C</h1>
</div>

栅格系统(16)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="ui grid">
  <div class="eight wide column">
    <!-- <div class="ui left icon focus action input"> -->
    <div class="ui left icon focus input">
      <i class="ui search icon"></i>
      <input type="text" placeholder="搜索" />
      <!-- <div class="ui blue button">搜索</div> -->
    </div>
  </div>

  <div class="eight wide column">
    <div class="ui fluid selection dropdown" id="select" tabindex="0">
      <i class="dropdown icon"></i>
      <div class="default text">选择排序方式</div>
      <div class="menu">
          <div class="item">按学号排序</div>
          <div class="item">按年龄排序</div>
          <div class="item">按成绩排序</div>
      </div>
    </div>
  </div>
</div>

表单验证&api请求

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<form class="ui form">
  <div class="field">
    <label>First Name</label>
    <input type="text" name="firstName" placeholder="First Name">
  </div>
  <div class="field">
    <label>Last Name</label>
    <input type="text" name="lastName" placeholder="Last Name">
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden">
      <label>我同意本条款和条件</label>
    </div>
  </div>
  <button class="ui primary button" type="submit" id="login">Submit</button>
  <button class="ui inverted blue button" type="submit">Login in</button>
</form>

// 相应的要导入jQuery, 和 semantic.js
// <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
// <script src="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js"></script>

// 前端表单验证
$('.ui.form')
  .form(
    {
      inline: true,
      on: 'blur',
      fields: {
        firstName: {
          identifier: 'firstName',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter your first name'
            }
          ]
        },
        lastName: {
          identifier: 'lastName',
          rules: [
            {
              type   : 'empty',
              prompt : 'Please enter your last name'
            }
          ]
        }
       }
      }
  )

  // 设置后端请求api
  $.fn.api.settings.api = {
    'get followers' : 'https://api.douban.com/v2/movie/in_theaters'
  };

  // 绑定组建， 向后端发送请求， 并对请求进行响应处理
  $('#login')
    .api({
      action: 'get followers',
      dataType: 'jsonp',
      onSuccess: function(response) {
          console.log(response);
      },
      onFailure: function(response){
          console.log(response);
      }
    });

总结

好了, 大致常用的组件都简单的写了一下, 当然还有很多的还没写, 这个附上官方文档地址, semantic-u官方文档, 方便大家查找使用.

曾经有人这样说 css要品, js要磨, 那么就让我们一起品味这简单粗暴, 语义化标签的semantic-ui吧! 😁😁😁😁😁😁😁😁