在hellonodejs的下建一个libs目录,将bootstrap的文件放到放到这目录下,在vscode下可以看到这些文件。bootstrap用的3.3.7,jquery用的v3.2.1。
采用bootstrap进行布局的基本目标是在最上方显示一个导航条(主菜单),在导航条的下方是一个面包屑导航,接着是主区域,最后是脚注(状态栏)停靠在最下方。效果如图所示。
error.html和index.html不需要修改,只要修改layout.html就可以了。
layout.html的head部分,加载需要的css和js文件。为便于修改,直接定义了样式。用了一个swig模板的block,这也是为了方面扩展的文件增加自己的样式。
<head>
<title>{% block title %}{% endblock %}</title>
<link href="/libs/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="/libs/font-awesome/font-awesome.min.css" rel="stylesheet">
<script src="/libs/jquery/jquery.min.js"></script>
<script src="/libs/jquery/jquery.validate.min.js"></script>
<script src="/libs/bootstrap/bootstrap.min.js"></script>
<link href='/stylesheets/style.css' real='stylesheet'>
<style>
html{
height:100%;
padding: 0;
}
body {
height: 100%;
padding: 0px;
}
a {
color: #00B7FF;
}
#mainNav {
margin-bottom: 0px
}
#breadNav {
margin: 0px;
height: 35px;
}
#divMain {
height: 100%;
border: 1px solid #0000ff;
}
{% block cssdefine %}{% endblock %}
</style>
</head>
body包括5部分的内容,1)导航条,2)面包屑导航,3)main部分,4)footer,5)javascript。
1)导航条,用bootstrap的示例代码,稍加改动就可用了。
<nav id="mainNav" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HelloNodejs</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">配置管理</a></li>
<li><a href="#">项目管理</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="linkLogin" href="/login">登录</a></li>
<li><a href="/userRegister">注册</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
2)面包屑导航,bootstrap的示例代码。用了一个id,设置样式margin:0和height:35px。
<div id="breadNav" class="row" >
<div class="span6">
<ul class="breadcrumb">
<li>
<a href="#">Home</a> <span class="divider"></span>
</li>
<li>
<a href="#">Tutorials</a> <span class="divider"></span>
</li>
<li class="active">HTML5</li>
</ul>
</div>
</div>
3)main部分,定义了一个 swig的block,放到一个container里面。
<main>
<div id="divMain" class="container-fluid">
{% block content %}{% endblock %}
</div>
</main>
4)脚注
<footer id = "navFooter" class="footer navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 copyright">
<span>Copyright © 2017 HelloWorld股份有限公司</span>
</div>
<div class="text-right col-sm-8 region-us">
<div class="links">
<a href="#">联系我们</a> |
<a href="#">常见问题</a>
</div>
</div>
</div>
</div>
</footer>
5)javascript,两个作用,(1)控制脚注的位置,(2)设置main部分的container的高度。
<script>
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight,
winHeight = window.innerHeight;
if(!(contentHeight > winHeight)){
$("footer").addClass("fixed-bottom");
} else {
$("footer").removeClass("fixed-bottom");
}
var hh = $("#mainNav").height() + $("#breadNav").height() + $("#navFooter").height();
$("#divMain").height(winHeight - hh - 5);
}
footerPosition();
$(window).resize(footerPosition);
});
</script>
在layout.html的基础上,开发一个login.html,用作登录页面。增加了自己的样式,增加登录表单(form),其它从layout.html继承。
{% extends 'layout.html' %}
{% block title %}index {{ title }} {%endblock%}
{% block cssdefine %}
.textCetent {
text-align: center;
}
.divForm {
background: rgba(255, 255, 255, 0.2);
width: 400px;
margin: 100px auto;
}
#loginForm {
display: block;
}
{% endblock %}
{% block content %}
<div class="divForm row">
<form accept-charset="UTF-8" action="/loginAction" method="post"
class="form-horizontal" id="loginForm">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="" />
<input name="authenticity_token" type="hidden" value="" />
</div>
<div>
<h1 class="textCetent form-title">登录</h1>
</div>
<div class="form-group">
<label for="login_field">用户名</label>
<input autocapitalize="off" autocorrect="off" autofocus="autofocus"
name="login" tabindex="1" type="text"
class="form-control input-block" id="login_field" />
</div>
<div class="form-group">
<label for="password">密码
<a href="/password_reset" class="label-link">忘记密码?</a>
</label>
<input class="form-control form-control input-block" id="password" name="password" tabindex="2" type="password" />
</div>
<div class="form-group">
<input class="btn btn-primary btn-block" data-disable-with="Signing in…" name="commit" tabindex="3" type="submit" value="登录"/>
</div>
<div class="form-group">
<p class="create-account-callout mt-3">新用户?
<a href="/newUser">创建新用户</a>.
</p>
</div>
</form>
</div>
{% endblock %}
在index.js中增加一条路由
router.get('/login', function(req, res, next) {
res.render('login', {
title: 'login'
});
});
运行效果
基于express、swig和bootstrap的页面开发模式就基本建立起来了。