酷客网Bulma模板，正如下面的HTML标签一样，为了让登录页面正常工作，编写页面时必须遵循HTML5标准。
<! DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
一个完整的HTML5页面模板如下：
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<! -- 在此处编写页面内容代码 -->
</body>
</html>
这样就得到了一个有效的页面，但它还没有内容，下面开始添加内容。
Bulma提供了hero类来实现Banner效果，用于展示重要内容。在我们的例子中，登录表单将放置在这样的Banner中。hero还可以和其他修饰符搭配使用，生成不同主题的效果。
在<body>标签中添加如下代码片段：
<section class="hero is-primary is-fullheight">
<div class="hero-body">Login</div>
</section>
除hero类外，还利用了两个修饰符：is-primary和is-fullheight。is-primary添加默认的主色调（青绿色）, is-fullheight将hero的高度设置为浏览器高度的100%。
现在整个浏览器窗口是青绿色的，在左侧垂直居中的位置有一个白色的“Login”文本，如图:
提示：如果没有显示青绿色的页面，请确保已经引入了所有类型的资源，并处于联网状态。
评论前必须登录！
注册