Bulma 表单

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设置了按钮的颜色 

 

看看效果：