NodeJs从零单排第五期

不知道大家对jade语法熟悉没,有没有自己去了解下。

反正我没有单独花时间去学,看了下文档基本就会了。

如果你会看HTML,不会写的话应该也能看懂jade。

接上期,foot.jade代码如下:

.container
  nav
    ul(class='pagination')
      li
        a(href='#') «
      li
        a(href='#') 1
      li
        a(href='#') 2
      li
        a(href='#') 3
      li
        a(href='#') 4
      li
        a(href='#') 5
      li
        a(href='#') »

index.jade代码如下:

doctype html
html
  head
    title 我的第一个nodejs网站
    link(rel='stylesheet', href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css')
    script(src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js')
    script(src='http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js')

  body
    include nav.jade

    .container
      form(class='form-horizontal', role='form')
        .form-group
          lable(for='myEmail', class=['col-sm-2', 'control-lable', 'text-right']) Email address
          .col-sm-10
            input(type='email', class='form-control', id='myEmail', placeholder='Enter email')
        .form-group
          lable(for='myPassword' class=['col-sm-2', 'control-lable', 'text-right']) Password
          .col-sm-10
            input(type='password', class='form-control', id='myPassword', placeholder='Password')
        .form-group
          div(class=['col-sm-offset-2', 'col-sm-10'])
            button(type='submit', class='btn btn-default') Submit

    include foot.jade

最终浏览效果如下:

 

posted @ 2014-12-17 15:45  webyun  阅读(156)  评论(0)    收藏  举报