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

最新推荐文章于 2024-04-22 23:27:42 发布

hjh00

最新推荐文章于 2024-04-22 23:27:42 发布

阅读量959

点赞数

分类专栏： Nodejs

本文链接：https://blog.csdn.net/hjh00/article/details/78789652

版权

Nodejs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在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的页面开发模式就基本建立起来了。

hjh00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js 入门笔记(3) - bootstrap

Nodejs、express、swig和bootstarp
复制链接

扫一扫

专栏目录

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

“相关推荐”对你有帮助么？