semantic ui框架学习笔记一

面包屑导航

面包屑导航经常用于多个栏目下的内容管理，是web页面里比较常用的组合。例如：

<div class="ui breadcrumb">
    <a class="section">主页</a>
    <div class="divider"> / </div>
    <a class="section">商店</a>
    <div class="divider"> / </div>
    <div class="active section">T恤</div>
</div>

如果想用箭头表示层级关系的话，可以用<i class="right angle icon divider"></i>代替<div class="divider"> / </div>，不过要注意把themes文件夹放在css文件夹下。
尺寸
在父div上加上mini，tiny，small，large，big，huge，massive就可以实现你想要的大小了。

表单

开发网站的第一步就是要写登录注册页面了。

<form class="ui form">
  <div class="required field">
    <label>用户昵称</label>
    <input type="text" name="username" placeholder="请输入用户名">
  </div>
  <div class="required field">
    <label>电子邮箱</label>
    <input type="email" name="email" placeholder="请输入邮箱">
  </div>
  <div class="required field">
    <label>密码</label>
    <input type="password" name="password" placeholder="请输入密码">
  </div>
  <div class="required field">
    <label>确认密码</label>
    <input type="password" name="repassword" placeholder="请再次输入密码">
  </div>
  <button class="ui button primary" type="submit">提交</button>
</form>

用户在input失去焦点时，通常会有个简单的格式验证，如果不成功的话，页面上会有个明显的提醒来告知用户输入格式不正确。例如：

#register-form-input input {
  width: 320px;
}

<form class="ui form" id="register-form-input">
  <div class="inline fields">
    <div class="two wide field">
      <label>用户名</label>
    </div>
    <div class="fourteen wide field">
      <div class="inline field error">
        <input type="text" placeholder="用户名">
        <div class="ui left pointing red basic label">
          这个名字已被占用
        </div>
      </div>
    </div>
  </div>
</form>

这个例子里面的label与input标签是左右分布的。

通常注册完成之后，会有一个页面通知，提醒已经注册成功。

成功消息：
<div class="ui success message">
  <div class="header">表单完成</div>
  <p>你已经注册成功</p>
</div>

失败消息：
<div class="ui error message">
  <p>用户不存在</p>
</div>

通常情况下用户可以更新个人资料，比如：头像，名字，所在城市，个人网站，个性签名，个人介绍等等。

<form class="ui form">
  <div class="field">
    <label>用户名</label>
    <input type="text" readonly="" value="dreamsline">
  </div>
  <div class="field">
    <label>电子邮箱</label>
    <input type="email" readonly="" value="1259415178@qq.com">
  </div>
  <div class="field">
    <label>Github</label>
    <div class="ui labeled input">
      <div class="ui label">
          https://github.com/
      </div>
      <input type="text" name="github" placeholder="yourname">
    </div>
  </div>
  <div class="field">
    <label>微博</label>
    <div class="ui labeled input">
      <div class="ui label">
          http://weibo.com/
      </div>
      <input type="text" name="weibo" placeholder="yourname">
    </div>
  </div>
  <div class="field">
    <label>个人网站</label>
    <input type="url" name="userUrl" placeholder="e.g.http://aaa.com">
  </div>
  <div class="field">
    <label>联系方式</label>
    <div class="inline fields">
      <div class="field">
        <input type="text" placeholder="(xxx)">
      </div>
      <div class="field">
        <input type="text" placeholder="xxx">
      </div>
      <div class="field">
        <input type="text" placeholder="xxxx">
      </div>
    </div>
  </div>
  <div class="field">
    <label>个人介绍</label>
    <textarea rows="3"></textarea>
  </div>
</form>

效果如下所示：

semantic ui框架学习笔记一

原文：https://www.cnblogs.com/sunshine21/p/10162089.html