1. 准备工作
将遵循html5规范预定加载js及css文件。
2. 在body中添加标签
在body中添加了一个section,section是带有一个hero类的,设置了颜色is-primart,设置了高度,is-fullheight
中间的div就是hero的主体了,hero-body ,他可以让内容垂直居中, 效果如图:
3. 让登录部分水平也居中
<section class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column">
<form class="box">
Login
</form>
</div>
</div>
</div>
</div>
</section>
我们在hero-body所在的div的内部添加了一个container,让内容占满整个水平方向。
内部添加了一个列容器:columns,让列容器居中,is-centered
内部添加一个column,放置登录框。
登录框的form添加了box类,用于在背景上产生对比效果。
4. 让登录框小一些
默认的column会填满整个100%的宽度,我们让它窄一点。
让column在不同设备上响应式显示。
效果如下:
5. 添加logo
先添加个logo, has-text-centered让内容居中:
<form class="box">
<div class="field has-text-centered">
<img src="xx.jpg" width="167" />
</div>
</form>
6. 添加邮箱
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="e.g. alexjohn-son@gmail.com">
</div>
</div>
7. 添加邮箱的图标
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left">
<input class="input" type="email" placeholder="e.g. alexjohn-son@gmail.com" required>
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
在control中添加has-icons-left标记在左侧腾出图标的空间出来。
<span>放置具体的标签。is-small设置了大小,is-left设置了位置、
8. 添加密码框,密码框与上文十分类似:
9. 添加记住我复选框
10. 添加登录按钮
is-success设置了按钮的颜色
看看效果: