semantic ui框架学习笔记一

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

<div> <a>主页</a> <span>/</span> <a>商店</a> <span>/</span> <div>水果</div> </div>

如果想用箭头表示层级关系的话，要注意把themes文件夹放在css文件夹下。

<div> <a>主页</a> <i></i> <a>商店</a> <i></i> <div>水果</div> </div>

尺寸
在父div上加上mini，tiny，small，large，big，huge，massive就可以实现你想要的大小了。

表单 登陆注册页面

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

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

若要改变表单的尺寸，同样也是在form标签的class里面加上mini，tiny，small，large，big，huge，massive就可以了。
记住密码复选框
用户在登录的时候，经常会有一个复选框，提示用户要不要记住密码，或者是一周内自动登陆。

<div> <div> <input type="checkbox" value="true"> <label>7天内自动登陆</label> </div> </div>

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

#register-form-input input { width: 320px; } <form> <div> <div> <label>用户名</label> </div> <div> <div> <input type="text" placeholder="用户名"> <div> 这个名字已被占用 </div> </div> </div> </div> </form> 这个例子里面的label与input标签是左右分布的。颜色可以在主题里面找到，另外需要注意的是Semantic的网格系统默认主题有16列。

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

成功消息： <div> <div>表单完成</div> <p>你已经注册成功</p> </div> 失败消息： <div> <p>用户不存在</p> </div> 更新信息页面

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

<form> <div> <label>用户名</label> <input type="text" readonly="" value="dreamsline"> </div> <div> <label>电子邮箱</label> <input type="email" readonly="" value="1259415178@qq.com"> </div> <div> <label>性别</label> <div> <input type="hidden"> <i></i> <div>性别</div> <div> <div data-value="1">男</div> <div data-value="0">女</div> </div> </div> </div> <div> <label>省份</label> <select> <option value="beijing">北京市</option> <option value="hebei">河北省</option> <option value="shanxi">山西省</option> <option value="shandong">山东省</option> </select> </div> <div> <label>Github</label> <div> <div> https://github.com/ </div> <input type="text" placeholder="yourname"> </div> </div> <div> <label>微博</label> <div> <div> </div> <input type="text" placeholder="yourname"> </div> </div> <div> <label>个人网站</label> <input type="url" placeholder="e.g."> </div> <div> <label>联系方式</label> <div> <div> <input type="text" placeholder="(xxx)"> </div> <div> <input type="text" placeholder="xxx"> </div> <div> <input type="text" placeholder="xxxx"> </div> </div> </div> <div> <label>个人介绍</label> <textarea rows="3"></textarea> </div> </form> <script> $(\'.ui.dropdown\').dropdown(); </script>

效果如下所示：

菜单