Node.js 入门笔记(3) - bootstrap

在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，这也是为了方面扩展的文件增加自己的样式。

body包括5部分的内容，1）导航条，2）面包屑导航，3）main部分，4）footer，5）javascript。

1）导航条，用bootstrap的示例代码，稍加改动就可用了。

            

              

                
                  Toggle navigation
                  
                  
                  
                
                HelloNodejs
              
              

                

                  
配置管理
                  
项目管理
                  
Contact
                  

                    Dropdown 
                    

                      
Action
                      
Another action
                      
Something else here
                      

                      
Nav header
                      
Separated link
                      
One more separated link
                    
                  
                
                

                  
登录
                  
注册
                
              
            
        

2）面包屑导航，bootstrap的示例代码。用了一个id，设置样式margin:0和height:35px。

        

            

                

                    

                        Home 
                    
                    

                        Tutorials 
                    
                    
HTML5
                
            
        

3）main部分，定义了一个 swig的block，放到一个container里面。

        

            

                {% block content %}{% endblock  %}
            
        

4）脚注

       

            

                

                    

                        Copyright © 2017 HelloWorld股份有限公司
                    
                    

                        

                            联系我们  | 
                            常见问题
                        
                    
                
            
        

5)javascript，两个作用，（1）控制脚注的位置，（2）设置main部分的container的高度。

在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 %}
    

        

            

                
                
            
            

                
登录
            
            

                用户名
                
            
            

                密码
                    忘记密码?
                
                
            
            

                
            
            

                
新用户?
                    创建新用户.
                
            
        
    
{% endblock %}

在index.js中增加一条路由

router.get('/login', function(req, res, next) {
  res.render('login', { 
    title: 'login'
 });
});

运行效果

基于express、swig和bootstrap的页面开发模式就基本建立起来了。